eruda/doc/TOOL_API.md

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.

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

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.

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

console.filter('all'); // String parameter. Log, warn, debug, error is also supported.
console.filter(/^eruda/);
console.filter(function (log)
{
    return log.type === 'error';
});

html

Log out html content.

Name	Type	Desc
html	string	Html string

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

set

Set dom element to show.

Name	Type	Desc
el	element	Element to display

elements.set(document.body);

Network

Display requests.

clear

Clear requests.

requests

Get request data.

network.clear();

Resources

LocalStorage, sessionStorage, cookies, scripts, styleSheets and images.

Config

Name	Type	Desc
hideErudaSetting	boolean	Hide Eruda Setting
observeElement	boolean	Auto Refresh Elements

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

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

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

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

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

color

Add color to select a color.

Name	Type	Desc
cfg	object	Config object
name	string	Option name
desc	string	Option description
[color]	array	Color list

separator

Add a separator.

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')