From c56bbd3e97632660f255ab8698bba2b55fc03254 Mon Sep 17 00:00:00 2001 From: Maiz Date: Fri, 3 Jun 2016 20:29:25 +0800 Subject: [PATCH] add doc/ --- README.md | 115 +++++++----------------------------------------- doc/tutorial.md | 103 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 120 insertions(+), 98 deletions(-) create mode 100644 doc/tutorial.md diff --git a/README.md b/README.md index 75f6b5dc..9a163d22 100644 --- a/README.md +++ b/README.md @@ -4,122 +4,41 @@ vConsole ============================== [![npm version](https://badge.fury.io/js/vconsole.svg)](https://badge.fury.io/js/vconsole) -A front-end developer tool for mobile web page. +A lightweight, extendable front-end developer tool for mobile web page. -## Introduction +## Features -vConsole is a mobile front-end developer tool which can be very helpful for debug and development. - - -## Preview - -![](./example/snapshot/qrcode.png) - -[http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html) - -![](./example/snapshot/log_panel.png) - - -## Installation - -### 1. Download - -Download file `dist/vconsole.min.js` to your project's directory. - -Or, install via `npm` : - -``` -npm install vconsole -``` - -### 2. Import - -(1) Under non-AMD/CMD rule, insert vConsole into ``. To support further features, insert vConsole into `` rather than `` is a better choice. - -```html - - - -``` - -(2) Under AMD/CMD rule, use `require()` to import vConsole. - -```javascript -var vConsole = require('path/to/vconsole.min.js'); -``` +- View console logs +- View network requests +- Execute JS command manually +- Custom plugin ## Usage -(1) Use the methods of `console` to print logs, just like what you do at desktop browsers: - -```javascript -console.log('Hello World'); -``` - -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. - - -(2) 5 types of log method are supported, with different styles: - -```javascript -console.log('foo'); // black word, white bakcground -console.info('bar'); // purple word, white background -console.debug('oh'); // orange word, white background -console.warn('foo'); // orange word, yellow background -console.error('bar'); // red word, pink background -``` - - -(3) Object or Array variable will be printed as formatted JSON: - -```javascript -var obj = {}; -obj.foo = 'bar'; -console.log(obj); -/* -Object -{ - foo: "bar" -} -*/ -``` - - -(4) Multiple arguments are supported, each variable will be divided by a space: - -```javascript -var uid = 233; -console.log('UserID:', uid); // UserID: 233 +```html + + ``` +See [Tutorial](./doc/tutorial.md) for more details. -(5) Use `[default|system|...]` string to print logs to specific panel: -```javascript -// [xxx] must be at the beginning of a log -console.log('[system]', 'foo'); -console.log('[system] bar'); -// foo & bar will be printed to system panel -``` +## Preview -Supported panels: +![](./example/snapshot/qrcode.png) -``` -[default] Log panel (default) -[system] System panel -[network] Network panel -``` +[http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html) +![](./example/snapshot/log_panel.png) -## Notice -(1) After importing vConsole, a button, which can show/hide panel, will be displayed at the right bottom of the page. +## Documentation -Under production environment, DO NOT import vConsole to your page, unless you want to let your users help you to debug. Demo `example/demo2.php` shows how to import vConsole dynamicly. -(2) After v1.2.0, `vConsole.ready()` is deprecated. You can directly use `console.log()` after importing vConsole without waiting for its ready. This method will be removed at v2.0.0 and later. ## Changelog diff --git a/doc/tutorial.md b/doc/tutorial.md new file mode 100644 index 00000000..3b6b00ff --- /dev/null +++ b/doc/tutorial.md @@ -0,0 +1,103 @@ +Tutorial +============================== + +## Installation + +### 1. Download + +Download file `dist/vconsole.min.js` to your project's directory. + +Or, install via `npm` : + +``` +npm install vconsole +``` + +### 2. Import + +(1) Under non-AMD/CMD rule, insert vConsole into ``. To support further features, insert vConsole into `` rather than `` is a better choice. + +```html + + + +``` + +(2) Under AMD/CMD rule, use `require()` to import vConsole. + +```javascript +var vConsole = require('path/to/vconsole.min.js'); +``` + + +## Usage + +### Print logs + +Use the methods of `console` to print logs, just like what you do at desktop browsers: + +```javascript +console.log('Hello World'); +``` + +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. + + +### Styles + +5 types of log method are supported, with different styles: + +```javascript +console.log('foo'); // black word, white bakcground +console.info('bar'); // purple word, white background +console.debug('oh'); // orange word, white background +console.warn('foo'); // orange word, yellow background +console.error('bar'); // red word, pink background +``` + + +### Formatted object / array + +Object or Array variable will be printed as formatted JSON: + +```javascript +var obj = {}; +obj.foo = 'bar'; +console.log(obj); +/* +Object +{ + foo: "bar" +} +*/ +``` + + +### Polymorphic + +Multiple arguments are supported, each variable will be divided by a space: + +```javascript +var uid = 233; +console.log('UserID:', uid); // UserID: 233 +``` + + +### Special format + +Use `[default|system|...]` string to print logs to specific panel: + +```javascript +// [xxx] must be at the beginning of a log +console.log('[system]', 'foo'); +console.log('[system] bar'); +// foo & bar will be printed to system panel +``` + +Supported panels: + +``` +[default] Log panel (default) +[system] System panel +``` +