diff --git a/README.md b/README.md index 15584ad..fed9d0c 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ Console for Mobile Browsers. [license-image]: https://img.shields.io/npm/l/eruda?style=flat-square [donate-image]: https://img.shields.io/badge/$-donate-0070ba.svg?style=flat-square - + ## Demo @@ -45,13 +45,13 @@ javascript:(function () { var script = document.createElement('script'); script. ## Features -* [Console](doc/TOOL_API.md#console): Display JavaScript logs. -* [Elements](doc/TOOL_API.md#elements): Check dom state. -* [Network](doc/TOOL_API.md#network): Show requests status. -* [Resources](/doc/TOOL_API.md#resources): Show localStorage, cookie information. -* [Info](doc/TOOL_API.md#info): Show url, user agent info. -* [Snippets](doc/TOOL_API.md#snippets): Include snippets used most often. -* [Sources](doc/TOOL_API.md#sources): Html, js, css source viewer. +* [Console](https://eruda.liriliri.io/docs/api.html#console): Display JavaScript logs. +* [Elements](https://eruda.liriliri.io/docs/api.html#elements): Check dom state. +* [Network](https://eruda.liriliri.io/docs/api.html#network): Show requests status. +* [Resources](https://eruda.liriliri.io/docs/api.html#resources): Show localStorage, cookie information. +* [Info](https://eruda.liriliri.io/docs/api.html#info): Show url, user agent info. +* [Snippets](https://eruda.liriliri.io/docs/api.html#snippets): Include snippets used most often. +* [Sources](https://eruda.liriliri.io/docs/api.html#sources): Html, js, css source viewer. ## Install @@ -94,7 +94,7 @@ When initialization, a configuration object can be passed in. under html root element. * tool: Choose which default tools you want, by default all will be added. -For more information, please check the [documentation](doc/API.md). +For more information, please check the [documentation](https://eruda.liriliri.io/docs/api.html). ```javascript let el = document.createElement('div'); @@ -117,7 +117,7 @@ eruda.init({ * [eruda-orientation](https://github.com/liriliri/eruda-orientation): Test orientation api. * [eruda-touches](https://github.com/liriliri/eruda-touches): Visualize screen touches. -If you want to create a plugin yourself, follow the guides [here](./doc/PLUGIN.md). +If you want to create a plugin yourself, follow the guides [here](https://eruda.liriliri.io/docs/plugin.html). ## Related Projects diff --git a/README_CN.md b/README_CN.md index 6f09241..ab720e0 100644 --- a/README_CN.md +++ b/README_CN.md @@ -29,7 +29,7 @@ [license-image]: https://img.shields.io/npm/l/eruda?style=flat-square [donate-image]: https://img.shields.io/badge/$-donate-0070ba.svg?style=flat-square - + ## Demo @@ -120,7 +120,7 @@ eruda.init({ * [eruda-orientation](https://github.com/liriliri/eruda-orientation)：测试重力感应接口。 * [eruda-touches](https://github.com/liriliri/eruda-orientation)：可视化屏幕 Touch 事件触发。 -如果你想要自己编写插件，可以查看这里的[教程](./PLUGIN.md)。 +如果你想要自己编写插件，可以查看这里的[教程](https://eruda.liriliri.io/docs/plugin.html)。 ## 相关项目 diff --git a/doc/API.md b/doc/API.md deleted file mode 100644 index e5c34e2..0000000 --- a/doc/API.md +++ /dev/null @@ -1,116 +0,0 @@ -# Api - -## init - -Initialize eruda. - -### Options - -|Name |Type |Desc | -|-----------------|------------|-----------------------------------------------------------------------------------------| -|container |element |Container element. If not set, it will append an element directly under html root element| -|tool |string array|Choose which default tools you want, by default all will be added | -|autoScale=true |boolean |Auto scale eruda for different viewport settings | -|useShadowDom=true|boolean |Use shadow dom for css encapsulation | -|defaults |object |Default settings | - -Available default settings: - -|Name |Type |Desc | -|------------|------|---------------------------------------------| -|transparency|number|Transparency, 0 to 1 | -|displaySize |number|Display size, 0 to 100 | -|theme |string|Theme, defaults to Light or Dark in dark mode| - -```javascript -const el = document.createElement('div'); -document.body.appendChild(el); - -eruda.init({ - container: el, - tool: ['console', 'elements'], - useShadowDom: true, - autoScale: true, - defaults: { - displaySize: 50, - transparency: 0.9, - theme: 'Monokai Pro' - } -}); -``` - -## destroy - -Destory eruda. - -Note: You can call **init** method again after destruction. - -```javascript -eruda.destroy(); -``` - -## scale - -Set or get scale. - -```javascript -eruda.scale(); // -> 1 -eruda.scale(1.5); -``` - -## position - -Set or get entry button position. - -It will not take effect if given pos is out of range. - -```javascript -eruda.position({x: 20, y: 20}); -eruda.position(); // -> {x: 20, y: 20} -``` - -## get - -Get tool, eg. console, elements panels. - -```javascript -let console = eruda.get('console'); -console.log('eruda'); -``` - -## add - -Add tool. - -```javascript -eruda.add(new (eruda.Tool.extend({ - name: 'test' -}))); - -eruda.add(eruda.Network); -``` - -## remove - -Remove tool. - -```javascript -eruda.remove('console'); -``` - -## show - -Show eruda panel. - -```javascript -eruda.show(); -eruda.show('console'); -``` - -## hide - -Hide eruda panel. - -```javascript -eruda.hide(); -``` diff --git a/doc/PLUGIN.md b/doc/PLUGIN.md deleted file mode 100644 index b48c15f..0000000 --- a/doc/PLUGIN.md +++ /dev/null @@ -1,79 +0,0 @@ -# Writing a Plugin - -It is possible to enhance Eruda with more features by writing plugins, which means, creating your own custom panels. - -## Creating a Plugin - -Adding plugins is super easy for eruda. All you have to do is passing an object with a few methods implemented. - -```javascript -eruda.add({ - name: 'test', - init($el) { - $el.html('Hello, this is my first eruda plugin!'); - this._$el = $el; - }, - show() { - this._$el.show(); - }, - hide() { - this._$el.hide(); - }, - destroy() {} -}); -``` - -## Basic Structure - -### name - -Every plugin must have a unique name, which will be shown as the tab name on the top. - -### init - -Called when plugin is added, and a document element used to display content is passed in. - -The element is wrapped as a jQuery like object, provided by the [licia](https://licia.liriliri.io/docs.html) utility library. - -### show - -Called when switch to the panel. Usually all you need to do is to show the container element. - -### hide - -Called when switch to other panel. You should at least hide the container element here. - -### destroy - -Called when plugin is removed using `eruda.remove('plugin name')`. - -## Worth Mentioning - -Apart from passing an object, you can also pass in a function that returns an object. Eruda will automatically invoke the function and use the object it returns. - -When writing plugins, you can use utilities exposed by Eruda, see [docs](./UTIL_API.md) here. - -```javascript -eruda.add(function (eruda) { - // eruda.Tool implements those four methods. - class Test extends eruda.Tool { - constructor() { - super() - this.name = 'test'; - this.style = eruda.util.evalCss('.eruda-test { background: #000; }'); - } - init($el) { - super.init($el); - } - destroy() { - super.destroy(); - eruda.util.evalCss.remove(this.style); - } - } - - return new Test(); -}); -``` - -There is also a tool for plugin initialization, check it out [here](https://github.com/liriliri/eruda-plugin). - diff --git a/doc/TOOL_API.md b/doc/TOOL_API.md deleted file mode 100644 index 102cc1b..0000000 --- a/doc/TOOL_API.md +++ /dev/null @@ -1,311 +0,0 @@ -# Tool Api - -Each default tool provided by eruda can be accessed by `eruda.get('Tool Name')`. - -## Console - -Display console logs. Implementation detail follows the [console api spec](https://console.spec.whatwg.org/). - -### Config - -|Name |Type |Desc | -|-------------------|-------|-------------------------------| -|asyncRender |boolean|Asynchronous rendering | -|jsExecution |boolean|Enable JavaScript execution | -|catchGlobalErr |boolean|Catch global errors | -|overrideConsole |boolean|Override console | -|displayExtraInfo |boolean|Display extra information | -|displayUnenumerable|boolean|Display unenumerable properties| -|displayGetterVal |boolean|Access getter value | -|lazyEvaluation |boolean|Stringify object when clicked | -|displayIfErr |boolean|Auto display if error occurs | -|maxLogNum |string |Max log number | - -```javascript -let console = eruda.get('console'); -console.config.set('catchGlobalErr', true); -``` - -### log, error, info, warn, dir, time/timeLog/timeEnd, clear, count/countReset, assert, table, group/groupCollapsed/groupEnd - -All these methods can be used in the same way as window.console object. - -Note: When called, a corresponding event is triggered. - -```javascript -let console = eruda.get('console'); -console.log('eruda is a console for %s.', 'mobile browsers'); -console.table([{test: 1}, {test: 2}, {test2: 3}], 'test'); -console.error(new Error('eruda')); -console.on('log', function () -{ - // Do whatever you want, send to server or save on local storage. -}); -``` - -### filter - -Filter logs. - -|Name |Type |Desc | -|------|----------------------|-------------| -|filter|string regexp function|Custom filter| - -```javascript -console.filter('eruda'); -console.filter(/^eruda/); -console.filter(function (log) -{ - return log.type === 'error'; -}); -``` - -### html - -Log out html content. - -|Name|Type |Desc | -|----|------|-----------| -|html|string|Html string| - -```javascript -console.html('Red'); -``` - -## Elements - -Check dom element status. - -### Config - -|Name |Type |Desc | -|-------------------|-------|---------------------| -|overrideEventTarget|boolean|Catch Event Listeners| -|observeElement |boolean|Auto Refresh | - -### select - -Select node to show. - -|Name|Type |Desc | -|----|---------|-------------------| -|node|ChildNode|Node to be selected| - -```javascript -elements.select(document.body); -``` - -## Network - -Display requests. - -### clear - -Clear requests. - -### requests - -Get request data. - -```javascript -network.clear(); -``` - -## Resources - -LocalStorage, sessionStorage, cookies, scripts, styleSheets and images. - -### Config - -|Name |Type |Desc | -|----------------|-------|---------------------| -|hideErudaSetting|boolean|Hide Eruda Setting | - -## Sources - -View object, html, js, and css. - -### Config - -|Name |Type |Desc | -|-----------|-------|-----------------| -|showLineNum|boolean|Show Line Numbers| -|formatCode |boolean|Beautify Code | -|indentSize |string |Indent Size | - -## Info - -Display special information, could be used for displaying user info to track -user logs. - -By default, page url and browser user agent is shown. - -### clear - -Clear infos. - -### add - -Add info. - -|Name |Type |Desc | -|-------|---------------|------------| -|name |string |Info name | -|content|string function|Info content| - -```javascript -info.add('title', 'content'); -info.add('location', () => location.href); -``` - -### get - -Get info or infos. - -|Name |Type |Desc | -|------|---------------|------------| -|name |string |Info name | -|return|string function|Info content| - -```javascript -info.add('title', 'content') -info.get(); // -> [{name: 'title', val: 'content'}] -info.get('title') // -> 'content' -``` - -### remove - -Remove specified info. - -|Name|Type |Desc | -|----|------|---------| -|name|string|Info name| - -```javascript -info.remove('title'); -``` - -## Snippets - -Allow you to register small functions that can be triggered multiple times. - -### clear - -Clear snippets. - -### add - -Add snippet. - -|Name|Type |Desc | -|----|--------|------------------------| -|name|string |Snippet name | -|fn |function|Function to be triggered| -|desc|string |Snippet description | - -### remove - -Remove specified snippet. - -|Name|Type |Desc | -|----|------|-----------------| -|name|string|Snippet to remove| - -### run - -Run specified snippet. - -|Name|Type |Desc | -|----|------|--------------| -|name|string|Snippet to run| - -```javascript -snippets.add('hello', function () -{ - console.log('Hello World!'); -}, 'Display hello on console'); - -snippets.run('hello'); -snippets.remove('hello'); -``` - -## Settings - -Customization for all tools. - -### clear - -Clear settings. - -### remove - -Remove setting. - -|Name|Type |Desc | -|----|------|-------------| -|cfg |object|Config object| -|name|string|Option name | - -### text - -Add text. - -|Name|Type |Desc | -|----|------|-----------------| -|str |string|String to display| - -### switch - -Add switch to toggle a boolean value. - -|Name|Type |Desc | -|----|------|---------------------------------------| -|cfg |object|Config object created by util.createCfg| -|name|string|Option name | -|desc|string|Option description | - -### select - -Add select to select a number of string values. - -|Name |Type |Desc | -|------|------|--------------------------| -|cfg |object|Config object | -|name |string|Option name | -|desc |string|Option description | -|values|array |Array of strings to select| - -### range - -Add range to input a number. - -|Name |Type |Desc | -|------|------|------------------| -|cfg |object|Config object | -|name |string|Option name | -|desc |string|Option description| -|option|object|Min, max, step | - -### separator - -Add a separator. - -```javascript -import defaults from 'licia/defaults'; - -let cfg = eruda.Settings.createCfg('test'); - -cfg.set(defaults(cfg.get(), { - testBool: true, - testSelect: 'select1', - testRange: 1 -})); - -settings.text('Test') - .switch(cfg, 'testBool', 'Test Bool') - .select(cfg, 'testSelect', 'Test Select', ['select1', 'select2']) - .range(cfg, 'testRange', 'Test Range', {min: 0, max: 1, step: 0.1}) - .separator(); - -settings.remove(cfg, 'testBool') -``` diff --git a/doc/UTIL_API.md b/doc/UTIL_API.md deleted file mode 100644 index 37d4e81..0000000 --- a/doc/UTIL_API.md +++ /dev/null @@ -1,27 +0,0 @@ -# Eruda Util Documentation - -## evalCss - -Load css into page. - -|Name |Desc | -|------|-------------| -|css |Css code | -|return|Style element| - -```javascript -evalCss('body{background:#08c}'); -``` - -## isErudaEl - -Check if value is eruda container element. - -|Name |Desc | -|------|----------------------------------------| -|val |Value to check | -|return|True if value is eruda container element| - -```javascript -isErudaEl(document.body); // -> false -``` \ No newline at end of file