1 | English | [简体中文](./tutorial_CN.md)
|
2 |
|
3 | Tutorial
|
4 | ==============================
|
5 |
|
6 | ## Installation
|
7 |
|
8 | ### 1. Download
|
9 |
|
10 | Download the [latest release](https://github.com/WechatFE/vConsole/releases/latest) of vConsole.
|
11 |
|
12 | Or, install via `npm` :
|
13 |
|
14 | ```
|
15 | npm install vconsole
|
16 | ```
|
17 |
|
18 | Then 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
|
36 | var VConsole = require('path/to/vconsole.min.js');
|
37 | var vConsole = new VConsole();
|
38 | ```
|
39 |
|
40 | Notice 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 |
|
47 | After imported, vConsole should be inited manually:
|
48 |
|
49 | ```javascript
|
50 | var vConsole = new VConsole(option);
|
51 | ```
|
52 |
|
53 | `option` is an optional object.
|
54 |
|
55 | See [Public Properties & Methods](./public_properties_methods.md) for definition.
|
56 |
|
57 | Use `setOption()` to update `option`:
|
58 |
|
59 | ```javascript
|
60 | vConsole.setOption('maxLogNumber', 5000);
|
61 | // or:
|
62 | vConsole.setOption({maxLogNumber: 5000});
|
63 | ```
|
64 |
|
65 |
|
66 | ### Print logs
|
67 |
|
68 | Use the methods of `console` to print logs, just like what you do at desktop browsers:
|
69 |
|
70 | ```javascript
|
71 | console.log('Hello World');
|
72 | ```
|
73 |
|
74 | When 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 |
|
79 | 5 types of log method are supported, with different styles:
|
80 |
|
81 | ```javascript
|
82 | console.log('foo'); // black word, white bakcground
|
83 | console.info('bar'); // purple word, white background
|
84 | console.debug('oh'); // orange word, white background
|
85 | console.warn('foo'); // orange word, yellow background
|
86 | console.error('bar'); // red word, pink background
|
87 | ```
|
88 |
|
89 |
|
90 | ### Other methods
|
91 |
|
92 | Supported `console` methods:
|
93 |
|
94 | ```javascript
|
95 | console.time('foo'); // start a timer named "foo"
|
96 | console.timeEnd('foo'); // stop "foo" timer and print the elapsed time
|
97 | ```
|
98 |
|
99 |
|
100 | ### Formatted object / array
|
101 |
|
102 | Object or Array variable will be printed as formatted JSON:
|
103 |
|
104 | ```javascript
|
105 | var obj = {};
|
106 | obj.foo = 'bar';
|
107 | console.log(obj);
|
108 | /*
|
109 | Object
|
110 | {
|
111 | foo: "bar"
|
112 | }
|
113 | */
|
114 | ```
|
115 |
|
116 |
|
117 | ### Polymorphic
|
118 |
|
119 | Multiple arguments are supported, each variable will be divided by a space:
|
120 |
|
121 | ```javascript
|
122 | var uid = 233;
|
123 | console.log('UserID:', uid); // UserID: 233
|
124 | ```
|
125 |
|
126 |
|
127 | ### Styled log
|
128 |
|
129 | Use `%c` to add style to logs:
|
130 |
|
131 | ```javascript
|
132 | console.log('%c blue %c red', 'color:blue', 'color:red'); // blue red
|
133 | console.log('%c FOO', 'font-weight:bold', 'bar'); // FOO bar
|
134 | console.log('%c Foo %c bar', 'color:red'); // Foo %c bar
|
135 | ```
|
136 |
|
137 | Note 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 |
|
143 | Use `[system]` as the first parameter to print logs to System tab:
|
144 |
|
145 | ```javascript
|
146 | console.log('[system]', 'foo'); // 'foo' will be printed to System tab
|
147 | console.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 |
|
155 | All `XMLHttpRequest` requests will be displayed in Network tab by default.
|
156 |
|
157 | To prevent the display, add `_noVConsole = true` to XHR object:
|
158 |
|
159 | ```javascript
|
160 | var xhr = new XMLHttpRequest();
|
161 | xhr._noVConsole = true; // now this request would not be displayed in tab
|
162 | xhr.open("GET", 'http://example.com/');
|
163 | xhr.send();
|
164 | ```
|
165 |
|
166 |
|
167 | [Goto: Documentation Index](./a_doc_index.md) |
\ | No newline at end of file |