35 Star 566 Fork 84

腾讯开源 / vConsole

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
plugin_properties_methods.md 4.04 KB
一键复制 编辑 原始数据 按行查看 历史
Maiz 提交于 2021-12-30 12:03 . docs: update docs

Buitin Plugin: Properties & Methods

Some built-in plugins will export some public methods for special needs, E.g:

vConsole.log.info()

If a plugin is not added, its instance and methods will be undefined, E.g:

vConsole = new VConsole({ defaultPlugins: ['system'] }); // network plugin is not added
vConsole.network.clear(); // Error: network is undefined

Log Panel


vConsole.log.log()

The same as console.log() series method. All available methods:

vConsole.log.log(...)
vConsole.log.info(...)
vConsole.log.debug(...)
vConsole.log.warn(...)
vConsole.log.error(...)

By calling this method, logs will only be output to vConsole Log panel instead of browser console.


vConsole.log.clear()

Remove all logs of Log panel. Similar to console.clear().

Parameters

None.

Return value

void


System Panel


vConsole.system.log() | info() | debug() | warn() | error()

The same as vConsole.log.log(), but the logs will be output to System panel.


vConsole.system.clear()

Remove all logs of System panel.

Parameters

None.

Return value

void


Network Panel


vConsole.network.add()

Add a custom request to Network panel.

vConsole.network.add(item: VConsoleNetworkRequestItem): VConsoleNetworkRequestItemProxy

Parameters

  • item: VConsoleNetworkRequestItem: The custom request object.
interface VConsoleNetworkRequestItem {
  // HTTP method
  method: '' | 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'CONNECT' | 'OPTIONS' | 'TRACE' | 'PATCH';
  // Full URL, E.g: https://www.abc.com/foo?a=b
  url: string;
  // HTTP status code, E.g: 200
  status: number | string;
  // XMLHttpRequest.readyState
  readyState?: XMLHttpRequest['readyState'];
  // Response header, key-value pairs
  header: { [key: string]: string };
  // XMLHttpRequest.responseType
  responseType?: XMLHttpRequest['responseType'];
  // 'xhr': XMLHttpRequest, 'custom': custom request
  requestType: 'xhr' | 'fetch' | 'ping' | 'custom';
  // Correspond `XMLHttpRequest.setRequestHeader()` or fetch's headers
  requestHeader?: HeadersInit;
  // The body of response
  response: any;
  // Timestamp
  startTime: number;
  // Timestamp
  endTime: number;
  // Query string parameters, key-value pairs or JSON string
  getData?: { [key: string]: string } | null;
  // Request payload, key-value pairs or JSON string
  postData?: { [key: string]: string } | string | null;
}

Return value

VConsoleNetworkRequestItemProxy

Once a custom request is added, a new object pointing to this request will be returned.

The properties of the return object is extended by VConsoleNetworkRequestItem.

interface VConsoleNetworkRequestItemProxy extends VConsoleNetworkRequestItem {
  // The internal id of the request
  id: string;
  // If possible, response will be parsed to JSON string, otherwise original value
  response: string | any;
  // endTime - startTime
  costTime?: number;
}

vConsole.network.update()

Update a custom request.

vConsole.network.update(id: string, item: VConsoleNetworkRequestItem | VConsoleNetworkRequestItemProxy)

Parameters

  • id: string: The internal id of the custom request. Can get it in the return value of vConsole.network.add().
  • item: VConsoleNetworkRequestItem | VConsoleNetworkRequestItemProxy: The custom request object.

Return value

void

Notice:

Modify the properties of VConsoleNetworkRequestItemProxy.response will not work.
If you want to update response, you must re-assign the entire object.

const item = vConsole.network.add({
  response: { foo: 'bar' },
  ... // other request properties
});

item.response.foo = 'newbar'; // will not work, response will not be changed
item.response = { foo: 'newbar' }; // it works
vConsole.network.update(item.id, item);

vConsole.network.clear()

Remove all requests from Network panel.

Parameters

None.

Return value

void

JavaScript
1
https://gitee.com/Tencent/vConsole.git
git@gitee.com:Tencent/vConsole.git
Tencent
vConsole
vConsole
dev

搜索帮助