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
catchGlobalErr	boolean	Catch global errors
overrideConsole	boolean	Override console
displayExtraInfo	boolean	Display extra information
displayUnenumerable	boolean	Display unenumerable properties
displayGetterVal	boolean	Access getter value
viewLogInSources	boolean	View log in sources panel
displayIfErr	boolean	Auto display if error occurs
maxLogNum	string	Max log number

var console = eruda.get('console');
console.config.set('catchGlobalErr', true);

log, error, info, warn, dir, time/timeEnd, clear, count, assert, table

All these methods can be used in the same way as window.console object.

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

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 performance timing, resource timing and xhr requests.

Config

Name	Type	Desc
disablePerformance	boolean	Disable Performance Timing
hideXhrResource	boolean	Hide Xhr Resource Timing
overrideXhr	boolean	Catch Xhr Requests

Resources

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

Config

Name	Type	Desc
hideErudaSetting	boolean	Hide Eruda Setting

Sources

View json, html, js, css and http request detail.

Config

Name	Type	Desc
showLineNum	boolean	Show Line Numbers
formatCode	boolean	Beautify Code

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	Info content

info.add('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

snippets.add('hello', function ()
{
    console.log('Hello World!');
}, 'Display hello on console');

snippets.remove('hello');

Features

Browser feature detections, thanks to modernizr project.

Red means unsupported, otherwise ok. All buttons is linked directly to related materials in Can I Use website.

Settings

Customization for all tools.

clear

Clear settings.

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.

var cfg = eruda.util.createCfg('test');

cfg.set(eruda.util.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();