UNPKG

3.7 kBMarkdownView Raw
1English | [简体中文](./tutorial_CN.md)
2
3Tutorial
4==============================
5
6## Installation
7
8### 1. Download
9
10Download the [latest release](https://github.com/WechatFE/vConsole/releases/latest) of vConsole.
11
12Or, install via `npm` :
13
14```
15npm install vconsole
16```
17
18Then save `dist/vconsole.min.js` to your project.
19
20### 2. Import
21
22(1) Under non-AMD/CMD rule, insert vConsole into `<head>`. To support further features, insert vConsole into `<head>` rather than `</body>` is a better choice.
23
24```html
25<head>
26 <script src="path/to/vconsole.min.js"></script>
27 <script>
28 var vConsole = new VConsole();
29 </script>
30</head>
31```
32
33(2) Under AMD/CMD rule, use `require()` to import vConsole.
34
35```javascript
36var VConsole = require('path/to/vconsole.min.js');
37var vConsole = new VConsole();
38```
39
40Notice that `VConsole` is the prototype of vConsole. So vConsole panel will not be inserted into your page until you `new` it manually.
41
42
43## Usage
44
45### Initialization & Configuaration
46
47After imported, vConsole should be inited manually:
48
49```javascript
50var vConsole = new VConsole(option);
51```
52
53`option` is an optional object.
54
55See [Public Properties & Methods](./public_properties_methods.md) for definition.
56
57Use `setOption()` to update `option`:
58
59```javascript
60vConsole.setOption('maxLogNumber', 5000);
61// or:
62vConsole.setOption({maxLogNumber: 5000});
63```
64
65
66### Print logs
67
68Use the methods of `console` to print logs, just like what you do at desktop browsers:
69
70```javascript
71console.log('Hello World');
72```
73
74When vConsole is not loaded, logs will be printed to native console. After importing vConsole, logs will be printed to both front-end console and native console.
75
76
77### Styles
78
795 types of log method are supported, with different styles:
80
81```javascript
82console.log('foo'); // black word, white bakcground
83console.info('bar'); // purple word, white background
84console.debug('oh'); // orange word, white background
85console.warn('foo'); // orange word, yellow background
86console.error('bar'); // red word, pink background
87```
88
89
90### Other methods
91
92Supported `console` methods:
93
94```javascript
95console.time('foo'); // start a timer named "foo"
96console.timeEnd('foo'); // stop "foo" timer and print the elapsed time
97```
98
99
100### Formatted object / array
101
102Object or Array variable will be printed as formatted JSON:
103
104```javascript
105var obj = {};
106obj.foo = 'bar';
107console.log(obj);
108/*
109Object
110{
111 foo: "bar"
112}
113*/
114```
115
116
117### Polymorphic
118
119Multiple arguments are supported, each variable will be divided by a space:
120
121```javascript
122var uid = 233;
123console.log('UserID:', uid); // UserID: 233
124```
125
126
127### Styled log
128
129Use `%c` to add style to logs:
130
131```javascript
132console.log('%c blue %c red', 'color:blue', 'color:red'); // blue red
133console.log('%c FOO', 'font-weight:bold', 'bar'); // FOO bar
134console.log('%c Foo %c bar', 'color:red'); // Foo %c bar
135```
136
137Note that only first parameter support `%c` format, and the following parameter(s) will be used as HTML style to fill `%c`, and the remain `%c` or parameters will be shown as normal logs.
138
139
140
141### Special format
142
143Use `[system]` as the first parameter to print logs to System tab:
144
145```javascript
146console.log('[system]', 'foo'); // 'foo' will be printed to System tab
147console.log('[system] bar'); // this log will show in Log tab instead of System tab
148```
149
150
151## Built-in Plugins
152
153### Network
154
155All `XMLHttpRequest` requests will be displayed in Network tab by default.
156
157To prevent the display, add `_noVConsole = true` to XHR object:
158
159```javascript
160var xhr = new XMLHttpRequest();
161xhr._noVConsole = true; // now this request would not be displayed in tab
162xhr.open("GET", 'http://example.com/');
163xhr.send();
164```
165
166
167[Goto: Documentation Index](./a_doc_index.md)
\No newline at end of file