lxm_front/eruda
1
0
Fork 0
mirror of https://github.com/liriliri/eruda.git synced 2026-03-20 09:38:37 +08:00
Code Issues Projects Releases Wiki Activity

docs: update link

Browse Source
This commit is contained in:
redhoodsu
2024-07-05 18:29:18 +08:00
parent bfd5dfb461
commit b8119933be
6 changed files with 12 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@@ -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
<img src="https://eruda.liriliri.io/img/screenshot-v3.jpg" style="width:100%">
<img src="https://eruda.liriliri.io/img/screenshot.jpg" style="width:100%">
## 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

4
README_CN.md
View File

@@ -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
<img src="https://eruda.liriliri.io/img/screenshot-v3.jpg" style="width:100%">
<img src="https://eruda.liriliri.io/img/screenshot.jpg" style="width:100%">
## 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)。
## 相关项目

116
doc/API.md
View File

@@ -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();
```

79
doc/PLUGIN.md
View File

@@ -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).

311
doc/TOOL_API.md
View File

@@ -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('<span style="color:red">Red</span>');
```
## 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')
```

27
doc/UTIL_API.md
View File

@@ -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
```