debug.js

debug.js is an embeddable JavaScript debugger for web development.
It allows you to debug easily without the F12 Tools.

The library has useful features such as Logger, DOM element inspector, Screen measure,
File Viewer, Command-line interpreter, Original script executor for automated testing, etc.

// Usage

Embed the debugger into your web page

Include the script file.

<script src="debug.js"></script>

That's it!

The debug window will be automatically generated and is draggable.

⚠	The debug window is hidden by default setting.
	You can switch show/hide by F2 key. (assignable)

Logging

Put log messages anywhere you want.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="debug.js"></script>
  <script>
    function foo() {
      log('button was clicked');
    }
  </script>
</head>
<body>
  <button onclick="foo();">DEMO</button> 
</body>
</html>

Print an object

You can also print all the properties of an object.

var obj = {
  key1: 'abc',
  key2: 123,
  key3: true
};
log(obj);

// Methods

Name

Argument

Description

Logging

log
( dbg.log )

message

Output standard log

log('');

log.root() : Output log to root window.

log.d
( dbg.log.d )

message

Output debug log

log.d('');

log.d.root() : Output log to root window.

log.i
( dbg.log.i )

message

Output information log

log.i('');

log.i.root() : Output log to root window.

log.w
( dbg.log.w )

message

Output warning log

log.w('');

log.w.root() : Output log to root window.

log.e
( dbg.log.e )

message

Output error log

log.e('');

log.e.root() : Output log to root window.

log.f
( dbg.log.f )

message

Output fatal log

log.f('');

log.f.root() : Output log to root window.

log.v
( dbg.log.v )

message

Output verbose log
The messages will be filtered out by default. Press the filter button [V] to display.

log.v('');

log.v.root() : Output log to root window.

log.p
( dbg.log.p )

arg1: variable
arg2: recursion level limit(opt)
arg3: message string(opt)

Output object dump

var obj = {...};
log.p(obj); 
log.p(obj, 1);  (lv1)
log.p(obj, 2);  (lv2)
log.p(obj, 0, '');  (w/ message)

log.json
( dbg.log.json )
( dbg.log.j )

arg1: variable
arg2: recursion level limit(opt)
arg3: message string(opt)

Output object dump (JSON format)

var obj = {...};
log.json(obj); 
log.json(obj, 1);  (lv1)
log.json(obj, 2);  (lv2)
log.json(obj, 0, '');  (w/ message)

log.t
( dbg.log.t )

arg1: message
arg2: timer value(opt: in millis)

Output log w/ elapsed time

log.t('');
"%dt" will be replaced with delta time (lap time).

You can reset the timer by specifying 0 for the second argument.
log.t('', );

log.res
( dbg.log.res )

message

Output result/response log

> message

log.res('');

log.res.err
( dbg.log.res.err )

message

Output error result/response log

> message

log.res.err('');

log.mlt
( dbg.log.mlt )

message

Output multi line log

var msg = Hello, World! 1
Hello, World! 2
Hello, World! 3

log.mlt(msg);

log.clear
( dbg.log.clear )

Clear log message

log.clear();

log.suspend
( dbg.log.suspend )

Suspend log output

log.resume
( dbg.log.resume )

Resume log output

log.preserve
( dbg.log.preserve )

Set/get log preserve status

log.preserve()get status 
log.preserve(true)on 
log.preserve(false)off

log.toBottom
( dbg.log.toBottom )

Scroll log area to bottom

dbg.stack

arg1: startIndex(opt)
arg2: silent(opt)

Print stack trace


dbg.stack();

dbg.stack();

var stk = dbg.stack(, );
log('Some message\n' + stk);

dbg.line

index(opt)

Returns current line number


dbg.line();
dbg.line();

dbg.funcname

index(opt)

Returns current line number


dbg.funcname();
dbg.funcname();

dbg.filename

arg1: index(opt)
arg2: absolute(opt)

Returns current line number


dbg.filename();
dbg.filename(, );

dbg.fileline

arg1: index(opt)
arg2: absolute(opt)

Returns current line number


dbg.fileline();
dbg.fileline(, );

dbg.sendLog

arg1: url
arg2: paramName
arg3: params
arg4: extInfo
arg5: flag
arg6: callback

Send log buffer to server.

url      : URL to send
paramName: request parameter name for log buffer(opt) "data" is used in default
params   : other parameters to send (Map object)(opt)
extInfo  : extra info text(opt)
flag     : head|log|b64buf(opt) target part to send. e.g., "head|log"
callback : callback function(opt) format: function(XMLHttpRequest){}

e.g.,
var cbFunc = function(xhr) {
  var st = xhr.status;
  if (st == 200) {
    log('Send Log OK');
  } else {
    log.e('Send Log ERR (' + st + ')');
  }
};

var url = 'https://[host]/savelog.cgi';

var params = {
  foo: 'aaa',
  bar: 'bbb'
};

var extInfo = {
  info0: 'additional info 0-1\nadditional info 0-2',
  info1: 'additional info 1-1\nadditional info 1-2',
  info2: 'additional info 2-1\nadditional info 2-2',
  info3: 'additional info 3-1\nadditional info 3-2'
};

dbg.sendLog(url, 'data', params, extInfo, flag, cbFunc);

-------------------------------------------------------
DEMO
var flag = '';

dbg.sendLog('https://debugjs.net/savelog.cgi'); 
dbg.sendLog(url, 'data', params, extInfo, sendFlag, cbFunc); //no-info 
dbg.sendLog(url, 'data', params, extInfo, sendFlag, cbFunc); //info0 
dbg.sendLog(url, 'data', params, extInfo, sendFlag, cbFunc); //info1 
dbg.sendLog(url, 'data', params, extInfo, sendFlag, cbFunc); //info2 
dbg.sendLog(url, 'data', params, extInfo, sendFlag, cbFunc); //info3 
dbg.sendLog(url, 'data', params, extInfo, sendFlag, cbFunc); //info0-3 
-> log.txt x

SENDING DATA FORMAT
info0
------------------------------------------------------------------------
Sending Time : 2018-10-17 07:58:44.200 -07:00 (America/Los_Angeles)
Timestamp    : 1539788324200
Browser      : Chrome 70.0.3538.67
User Agent   : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36
Screen Size  : w=1920 h=1200
Window Size  : w=1903 h=1089
Body Size    : w=1903 h=34341
Zoom Ratio   : 100%
Language     : en-US
------------------------------------------------------------------------
info1
------------------------------------------------------------------------

[LOG]
2018-10-17 07:58:35.689	LOG	Hello, World!
2018-10-17 07:58:36.192	DBG	Hello, World!
2018-10-17 07:58:36.960	INF	Hello, World!
2018-10-17 07:58:37.712	WRN	Hello, World!
2018-10-17 07:58:38.296	ERR	Hello, World!
2018-10-17 07:58:38.825	VRB	Hello, World!

info2

-- ORIGINAL LOG BUFFER -- b64buf
W3sidHlwZSI6MSwidGltZSI6MTUzOTc4ODMxNTY4OSwibXNnIjoiU0dWc2J...

info3

SERVER SIDE PROGRAM SAMPLE (savelog.cgi)

#!/usr/bin/python

import cgi

def save_log():
  form = cgi.FieldStorage()
  data = form.getvalue('data', '')
  f = open('log.txt', 'w')
  f.write(data)
  f.close()

def main():
  save_log()
  print('Content-Type: application/json')
  print()
  print('{"status":"OK"}')

main()

dbg.dumpLog

arg1: format
arg2: base64 encode(opt)
arg3: format time(opt)

Export the log buffer in JSON format / plain text format

format: 'json' | 'text'

base64:
 true: The result will be encoded in Base64
 false: Plain text (default)

format time:
 true:  The time format will be human-readable foamrt.
        e.g., 2017-10-17 12:34:56.789

 false: The numeric value corresponding to the time for 
        the logged time according to universal time. (default)
        e.g., 1508211296789

dbg.loadLog

json

Load logs into the debug window

JSON Format
[{"type":1,"time":"12:34:56.789","msg":"SGVsbG8sIFdvcmxkIQ==(Base64)"},...]

dbg.getLogBufSize

Returns log buffer size.

dbg.getLogBufSize();

dbg.setLogBufSize

size

Set log buffer size.

dbg.setLogBufSize('');

Time Test

dbg.time.start
( dbg.time.s )

arg1: timer name(opt)
arg2: message(opt)

Start a timer

dbg.time.start();
-> timer0: timer started
default timer name will be used in case no arguments are specified.

dbg.time.start('timer1');
-> timer1: timer started

dbg.time.start('timer1', 'Timer Start: %n');
-> Timer Start: timer1

dbg.time.start('timer1', null);
-> no output log (only start the timer)

dbg.time.split

arg1: timer name(opt)
arg2: message(opt)

Print elapsed time of the timer

dbg.time.split();
-> timer0: T+00:01:02.345 (⊿00:01:02.345)
default timer name will be used in case no arguments are specified.

dbg.time.split('timer1');
-> timer1: T+00:01:02.345 (⊿00:01:02.345)

dbg.time.split('timer1', '[%n] epalsed time: %t (%dt)');
-> [timer1] elapsed time: T+00:01:03.345 (⊿00:00:01.000)

dbg.time.split('timer1', null);
-> no output log (only split the timer)

dbg.time.end
( dbg.time.e )

arg1: timer name(opt)
arg2: message(opt)

Print elapsed time of the timer and clear.

dbg.time.end();
-> timer1: T+00:01:02.345
default timer name will be used in case no arguments are specified.

dbg.time.end('timer1');
-> timer1: T+00:01:02.345

dbg.time.end('timer1', '[%n] epalsed time: %t (%dt)');
-> [timer1] elapsed time: T+00:01:03.345 (⊿00:00:01.000)

dbg.time.end('timer1', null);
-> no output log (only clear the timer)

dbg.time.check

timer name

Get elapsed time of the timer.

dbg.time.check();
-> A string like "T+00:01:23.456" will be returned.
default timer name will be used in case no arguments are specified.

dbg.time.check('timer1');
-> A string like "T+00:01:23.456" will be returned.

Command Execution

dbg.cmd

arg1: command
arg2: echo(opt) arg3: saveHistory(opt)

Command execution
echo: true = print command line / false = silent(default)

dbg.cmd('rgb #fff'); 
dbg.cmd('rgb #fff', true); 
dbg.cmd('rgb #fff', true, true); 

>
dbg.cmd('base64 -e ', true);
dbg.cmd('base64 -d ', true);

dbg.cmd('json {"name": "John Smith", "age": 25, "city": "New York"}'); 

time calc +-
dbg.cmd('00:05:30.700 + 00:01:20.123'); 
dbg.cmd('00:05:30.700 - 00:05:20.400'); 

time calc + 1day
dbg.cmd('10:00 + 13:59'); 
dbg.cmd('10:00 + 14:00'); 
dbg.cmd('10:00 + 14:01'); 

time calc + 2days
dbg.cmd('10:00 + 37:59'); 
dbg.cmd('10:00 + 38:00'); 
dbg.cmd('10:00 + 38:01'); 

time calc - 1day
dbg.cmd('10:00 - 09:59'); 
dbg.cmd('10:00 - 10:00'); 
dbg.cmd('10:00 - 10:01'); 

time calc - 2days
dbg.cmd('10:00 - 33:59'); 
dbg.cmd('10:00 - 34:00'); 
dbg.cmd('10:00 - 34:01');

dbg.cmd.set

command

Set a command line to command field.

dbg.cmd.set('');

dbg.cmd.exec

Execute a command on the command line field.

dbg.cmd.exec();

dbg.cmd.focus

Focus on command line field.

dbg.cmd.focus();

dbg.cmd.hasFocus

Returns if the command line is active (has focus) or not.

dbg.cmd.hasFocus();

dbg.cmd.setMode

mode (text|password)

Set input mode of the command line.

dbg.cmd.setMode('');

dbg.cmd.saveHistory

true|false

Set a flag to save the command history.

dbg.cmd.saveHistory(true); 
dbg.cmd.saveHistory(false);

dbg.cmd.getElement

Returns an Element object of command line.

dbg.getCmdVal

name

Returns a command variable. (${name})

dbg.getCmdVal('');

dbg.setCmdVal

arg1: name
arg2: value

Returns a command variable. (${name})

dbg.setCmdVal('', '');

BAT Execution

dbg.bat

arg1: commands
arg2: arg(opt)
arg3: start line(opt)
arg4: end line(opt)

Multi command execution

var commands = '
point move #p1
point hint msg "Hi!"
wait 1s
point hint clear
:label1
point move #p2
point move #p4
:label2
point move #p3
point hint msg "Bye!"
wait 1s
point init

';

dbg.bat(commands); 

var arg = '';

dbg.bat(commands, arg); 
dbg.bat(commands, arg, , ); 
dbg.bat(commands, arg, '', '');

You can also call like this.

var script = new dbg.TextBuffer();
script.add('echo off');
script.add('echo "foo"');
script.add('echo "bar"');
script.add('echo "baz"');
dbg.bat(script);

dbg.bat.set

commands

Set a batch script. (only set. not run.)

var commands = 'echo off\n';
commands += 'echo "foo"\n';
commands += 'echo "bar"\n';
commands += 'echo "baz"\n';

dbg.bat.set(commands);

dbg.bat.run

arg1: start line(opt)
arg2: end line(opt)

Execute a loaded batch script

dbg.bat.pause

Pause the batch execution

dbg.bat.resume

key(opt)

Resume the batch execution

dbg.bat.stop

Terminate the batch execution

dbg.bat.clear

Clear loaded batch script from memory

dbg.bat.lock

Increment the lock counter to make a lock status.
Batch execution will be blocked until the status to be changed to unlock.

dbg.bat.unlock

Decrement the lock counter.
Batch execution will be resumed if the counter is 0.

dbg.bat.isRunning

true = running / false = stopped

dbg.bat.isAvailable

Returns if BAT script is available.

dbg.bat.isAvailable()

dbg.bat.status

Returns the following batch execution status.

"STOPPED"
"RUNNING"
"PAUSED"     Paused by "bat pause" command or [PAUSE] button.
"PAUSED_CMD" Paused by "pause" command.

dbg.bat.getPauseKey

Returns current pausing key.

dbg.bat.setCond

condition key

Sets condition for resuming "condwait pause" command.

dbg.bat.setCond('');

dbg.bat.getCondKey

Returns current condition key.

dbg.bat.getSymbols

Returns labels array list.

dbg.bat.getSymbols('label') 
dbg.bat.getSymbols('function') 
dbg.bat.getSymbols('', '')

dbg.bat.nestLv

Returns current execution nest level.

dbg.bat.nestLv()

dbg.bat.getPc

Returns the current program counter (execution line).

dbg.bat.getList

Get the program list of loaded batch script.

dbg.isBat

text

Returns whether the text is BAT script or not. (true / false)

var script = '
#!BAT!
echo "abc"

';
var ret = dbg.isBat(script);

The function returns whether the string starts with "#!BAT!"

dbg.isB64Bat

string

Returns whether the given string is Base64 encoded BAT script or not.

var ret = dbg.isB64Bat('');

The function returns whether the string starts with "IyFCQVQh"

dbg.point.hint

message

Show/Update a message at the pointer position.

dbg.point.hint('');

dbg.point.hint.show

Show a message at the pointer position.

dbg.point.hint.show();

dbg.point.hint.hide

Hide the message at the pointer position.

dbg.point.hint.hide();

dbg.point.hint.clear

Clear the message at the pointer position.

dbg.point.hint.clear();

Pseudo LED Controll

dbg.led

value

Set indicator bit pattern

	●	●	●	●	●	●	●	●
bit position	7	6	5	4	3	2	1	0

dbg.led();

dbg.led.on

bit position

Turn on the indicator

dbg.led.on(n);

dbg.led.off

bit position

Turn off the indicator

dbg.led.off(n);

dbg.led.val

Returns the current indicator value

dbg.led.val();

Message Area

dbg.msg

message

Set a string to the message display

dbg.msg('');

dbg.msg.clear

Clear the message display

Stopwatch

dbg.stopwatch

Launch stopwatch function (sw1)

dbg.stopwatch.start

arg1: id (0|1)
arg2: message

Start stopwatch
id: 0=Small one in the upper right / 1=Big one in the TOOL panel

dbg.stopwatch.start();  (sw1)
dbg.stopwatch.start();  (w/o message)
dbg.stopwatch.start(, '');  (w/ message)

dbg.stopwatch.split

arg1: id (0|1)
arg2: message

Split/LAP stopwatch

dbg.stopwatch.split();  (sw1)
dbg.stopwatch.split();  (w/o message)
dbg.stopwatch.split(, '');  (w/ message)

dbg.stopwatch.stop

id (0|1)

Stop stopwatch (pause)

dbg.stopwatch.stop();  (sw1)
dbg.stopwatch.stop();

dbg.stopwatch.end

arg1: id (0|1)
arg2: message

Stop stopwatch (completely end measuring)

dbg.stopwatch.end();  (sw1)
dbg.stopwatch.end();  (w/o message)
dbg.stopwatch.end(, '');  (w/ message)

dbg.stopwatch.reset

id (0|1)

Reset stopwatch

dbg.stopwatch.reset();  (sw1)
dbg.stopwatch.reset();

dbg.stopwatch.val

id (0|1)

Returns current stopwatch value. (millis)

dbg.stopwatch.val();  (sw1)
dbg.stopwatch.val();

Watchdog

dbg.wd.start

arg: timeout(opt)

Start watchdog timer

dbg.wd.start();

dbg.wd.stop

Stop watchdog timer

Debug Window Control

dbg.show

Show debug window

dbg.hide

Hide debug window

dbg.showHeaderInfo

Show/Hide header info

dbg.showHeaderInfo(false);
dbg.showHeaderInfo(true);

dbg.setWindowSize

arg1: width
arg2: height

or
arg1:
normal
expand
full
restore
reset

Set the debugger window size.

dbg.setWindowSize(, );

dbg.setWindowPos

arg1: x
arg2: y

Set the debugger window position.

dbg.setWindowPos(, );

dbg.opacity

0.1-1

Set the level of transparency of the debug window.

dbg.opacity();

dbg.isVisible

Returns if the debug window is visible.

dbg.isVisible(); 
->

dbg.pin

true|false

Fix the debug window in its position.

dbg.pin(); 
return: status(true|false)

dbg.zoom

zoom ratio

Zoom the debug window.

dbg.zoom(); 
return: the zoom ratio

dbg.getOptionValue

key

Returns debugger option value.

dbg.getOptionValue('');

dbg.getStatus

Returns debugger inner status.

dbg.getStatus();

dbg.getUiStatus

Returns debugger UI inner status.

dbg.getUiStatus();

dbg.getFeatureStack

Returns feature stack. (copy of inner value)

dbg.getFeatureStack();

Testing

dbg.test.init

Test Name

Initialize the test with test name.
All inner status will be initialized and "running" status will be set to "true".
This is the same as $test init command.

dbg.test.init('');

dbg.test.end

Finalize the test.
The running status will be set to false.
Test finished time will be set.
This is the same as $test end command.

dbg.test.end();

dbg.test.getResult

to JSON flag

Returns the test result object.

dbg.test.getResult();Object 
dbg.test.getResult(true);JSON 

JSON FORMAT EXAMPLE:
a = 1
b = 3
c = 'abc'

test init -name "TestName"
test set desc "Description1"
test set desc "Description2"

test set id "Test01"
test set comment "Comment1-1"
test set comment "Comment1-2"
test verify a == 1
test verify -label "label1" b == 2

test set id "Test02"
test set comment "Comment2"
test verify -label "label2" c == "abc"

test set id "Test03"
test set result ERR -label "label3" -info "Something went wrong"

test enddbg.test.getResult(true);
{
 "name": "TestName",
 "desc": [
  "Description1",
  "Description2"
 ],
 "startTime": 1545229050321,
 "endTime": 1545229050434,
 "totalResult": "ERR",
 "count": {
  "ok": 2,
  "ng": 1,
  "err": 1,
  "nt": 0
 },
 "results": {
  "Test01": {
   "comment": [
    "Comment1-1",
    "Comment1-2"
   ],
   "results": [
    {
     "label": "",
     "status": "OK",
     "method": "==",
     "exp": 1,
     "got": 1,
     "info": ""
    },
    {
     "label": "label1",
     "status": "NG",
     "method": "==",
     "exp": 2,
     "got": 3,
     "info": ""
    }
   ]
  },
  "Test02": {
   "comment": [
    "Comment2"
   ],
   "results": [
    {
     "label": "label2",
     "status": "OK",
     "method": "==",
     "exp": "abc",
     "got": "abc",
     "info": ""
    }
   ]
  },
  "Test03": {
   "comment": [],
   "results": [
    {
     "label": "label3",
     "status": "ERR",
     "method": null,
     "exp": null,
     "got": null,
     "info": "Something went wrong"
    }
   ]
  }
 }
}

dbg.test.getLastResult

Returns the last test result.

dbg.test.getLastResult();

dbg.test.getTotalResult

Returns the total test result.

dbg.test.getTotalResult();

dbg.test.getStatus

Returns the inner status.

dbg.test.getStatus();

dbg.test.isRunning

Returns whether test is running.

dbg.test.isRunning();

dbg.test.nextSeq

Returns sequential number for test ID.

dbg.test.nextSeq();

This value is also available for $test set id command.

e.g., $ test set id "TEST-%SEQ%"
       -> "TEST-1" is set for ID.

The value will be reset at the beginning of test. ($test init)

dbg.test.setSeq

Sets the sequential number for test ID explicitly.

dbg.test.setSeq();

Util

dbg.getType

object

Returns object type.

"abc"        -> "string"
123          -> "number"
true         -> "boolean"
false        -> "boolean"
null         -> "null"
undefined    -> "undefined"
function()   -> "function"
[object Xxx] -> "Xxx"
other        -> "object"

dbg.getType();

dbg.getBrowserType

Get browser type info

e.g.,

{
  name: 'Firefox',
  version: '50.0'
}

dbg.copy

string

Copy to clipboard.

dbg.copy('');

dbg.countElements

element selector

Count number of elements.

dbg.countElements('*');
dbg.countElements('*', true); 
-> Count all elements

dbg.countElements('#id');
-> Count the id's element
   dbg.countElements('#title');

dbg.countElements('.className');
-> Count elements which has the className.

dbg.countElements('tagName');
-> Count elements which correspond to the tagName.
   dbg.countElements('div');

dbg.getElement

arg1: #id / .className / tagName
arg2: index(opt)

Get an DOM element object of the specified selector

e.g.,

dbg.getElement('#id');
dbg.getElement('.className', 0);
dbg.getElement('tagName', 1);

Returns an DOM element or null if an element with the specified selector is not in the document.

dbg.getElPosSize

DOM element object / #id / .className / tagName

Get the position and size of the specified DOM element

e.g.,

{
 x: 504,
 y: 77,
 w: 269,
 h: 94
}

dbg.getHTML

base64 flag(opt)

Dump the serialized HTML string of the whole document
base64 flag: false = plain text / true = Base64 encoded string

dbg.html2text

html

Convert HTML to plain text.

dbg.encodeBase64

string

Encodes Base64 string.

var ret = dbg.encodeBase64('');

dbg.decodeBase64

string

Decodes Base64 string.

var ret = dbg.decodeBase64('');

dbg.isBase64

string

Returns whether the given string is Base64 or not.

var ret = dbg.isBase64('');

dbg.random

arg1: min(opt)
arg2: max(opt)

Get random number

min: minimum number
max: maximum number

dbg.getRandomString

arg1: min
arg2: max
arg3: table(opt)

Get random string

min  : minimum length
max  : maximum length
table: character table

dbg.getRandomString(8);
dbg.getRandomString(1, 8);
dbg.getRandomString(1, 8, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ');

dbg.escHtml

string

Perform HTML sanitization.

< -> &lt;
> -> &gt;
& -> &amp;
" -> &quot;
' -> &#39;

dbg.escape

string

Escape the specified character(s).

dbg.escape('abc"123"xyz', '"');
-> 'abc\"123\"xyz'

dbg.escape('abc"123"xy\\z', ['\\\\', '"']);
-> 'abc\"123\"xy\\\z'

dbg.toHalfWidth

string

Convert full-width character(s) to half-width.

dbg.toHalfWidth('');

dbg.toFullWidth

string

Convert half-width character(s) to full-width.

dbg.toFullWidth('');

dbg.isAscii

string

Returns if the given string consists of valid 7–bit US-ASCII characters.

dbg.isAscii('');

dbg.hex2base64

HEX

Convert HEX to Base64 encoded string.

dbg.hex2base64('');

dbg.base642hex

string

Convert Base64 encoded string to HEX.

dbg.base642hex('');

dbg.hex2str

HEX

Convert HEX to string. (UTF-8)

dbg.hex2str('');

dbg.str2hex

string

Convert string(UTF-8) to HEX

dbg.str2hex('');

dbg.getProtocol

Returns the protocol scheme of the URL, including the final ':'.

dbg.getHost

Returns the domain of the URL.

dbg.getPort

Returns the port number of the URL.

dbg.getParentPath

Returns parent path of the URL.

dbg.getQuery

key(opt)

Returns the query string of the URL.

?a=1&b=2 : dbg.getQuery() -> "a=1&b=2"
?a=1&b=2 : dbg.getQuery('a') -> "1"
?a=1&a=2&b=3 : dbg.getQuery('a') -> ["1", "2"]

var value = dbg.getQuery(); 
var value = dbg.getQuery('');

dbg.getUrlHash

Returns the hash string of the URL.

dbg.loadobj

key

Returns an object that is saved into the localStorage, or null if the key does not exist in the Storage.

dbg.saveobj

arg1: key
arg2: object

Save the given object into the localStorage.

dbg.clearobj

key

Clear an object that is corresponding to the given key from the localStorage.

dbg.fromJSON

text
reviver(opt)

Parses a JSON string, constructing the JavaScript value or object described by the string

dbg.toJSON

value
replacer(opt)
space(opt)

Converts a JavaScript value to a JSON string

dbg.obj2json

object

Returns JSON string of given object in a Friendly Readable Format.

var obj = ;
dbg.obj2json(obj);

dbg.formatJSON

string

Returns JSON string of given 1-line JSON in a Friendly Readable Format.

var str = '';
dbg.formatJSON(str);

dbg.getKeys

object

Returns property key name array of the object

var obj = {
  key1: 'A',
  key2: 'B',
  key3: 'C',
};

dbg.getKeys(obj);
-> ['key1', 'key2', 'key3']

dbg.xlsCol

column name / column number

Returns the Excel column number for a reference and vice versa.

dbg.xlsCol(''); 
dbg.xlsCol();

dbg.arr.count

arg1: array
arg2: value
arg3: strict mode(opt)

Count the value of array.

var array = [1, 2, 1, 3, '1', 2];

dbg.arr.count(array, ); 
dbg.arr.count(array, , );

dbg.arr.pos

arg1: array
arg2: value
arg3: strict mode(opt)

Returns the position of the specified element in the array.
The function returns -1 if the element was not found.

var array = [1, 2, 1, 3, '1', 2];

dbg.arr.pos(array, ); 
dbg.arr.pos(array, , );

dbg.arr.has

arg1: array
arg2: value
arg3: strict mode(opt)

Returns if the specified value exists in the array.

var array = [1, 2, 3];

dbg.arr.has(array, ); 
dbg.arr.has(array, , );

dbg.arr2set

arg1: array
arg2: strict mode(opt)

Convert array to set.

var array = [1, 2, 1, 3, '1', 2];

dbg.arr2set(array); 
dbg.arr2set(array, );

dbg.http

arg1: request
arg2: callback(opt)

Send an HTTP request.

var request = {
  url: '',
  method: '',
  data: '',
  async: ,
  cache: ,
  user: '',
  pass: '',
  contentType: '',
  withCredentials: ,
  headers: {
    key1: value1,
    key2: value2,
    ...
  },
  cb: callback
};

dbg.http(request); 

// xhr: XMLHttpRequest
// res: xhr.responseText
// req: request
function callback(xhr, res, req) {
  var statusMsg = xhr.status + ' ' + xhr.statusText;
  if (xhr.status == 0) {
    log.e('cannot load: ' + statusMsg);
  } else {
    log(statusMsg);
  }
  var head = xhr.getAllResponseHeaders();
  var body = res.replace(/</g, '&lt;');
  body = body.replace(/>/g, '&gt;');
  if (head || body) {
    log(head + '\n'+ body);
  }
}

dbg.sleep

Causes the currently executing thread to sleep

log('sleep start');
sleep: ms; 
log('sleep end');

dbg.addCmdListener

listener

Adds a listener function for the command input.

function cmdListener(str) {
  if (some condition) {
    // The default action should not be taken as it normally would be.
    return false;
  }
}
dbg.addCmdListener(cmdListener);

dbg.addEvtListener

arg1: type
arg2: listener

Adds the specified EventListener function to the list of event listeners for the specified event type.

type: batstart
Callback function which is called before starting batch execution.

Function format:
  function onBatStart() {}

type: batstop
Callback function which is called after stopped batch execution.

Function format:
  function onBatStop(exitstatus) {}

type: ctrlc
Callback function which is called when Ctrl+C is pressed on the command line.

Function format:
  function onCtrlC() {}

type: drop
Callback function which is called when a file or text is dropped on the log window.

Function format:
  function onDrop(event) {}

type: error
Callback function which is called when an error log is printed.

Function format:
  function onError() {}

type: fileloaded
Callback function which is called when file load has been completed.

Function format:
  function onFileLoaded(file, content, isB64) {}

  file   : meta info (MIME Type, Size, Modified date)
  content: File content
  isB64  : true = Base64 encoded / false = Binary ArrayBuffer

type: stopwatch
Callback function which is called when the stopwatch status is changed.

Function format:
  function onStopwatch(id, type, millis(for start, stop)) {}

  id  : 0 = mini stopwatch
        1 = stopwatch on the tool window
  type: start, stop, reset, timesup (id 1 dedicated)

type: unlock
Callback function which is called when the debug window is unlocked.

Function format:
  function onUnlock() {}

type: watchdog
Callback function which is called when the watchdog timer has been timed out.

Function format:
  function onWatchdogTimeout(elapsed) {}

dbg.addFileLoader

arg1: target element
arg2: callback function
arg3: mode('b64' or 'bin')
arg4: decode

Add File Loader Handler

Handler format:
  function(file, content)

In case that mode is 'bin', arg4 decode is ignored.

dbg.addDropHandler

arg1: target element
arg2: callback function

Add Drop Handler

Handler format:
  function(content)

dbg.createResBox

message

Returns a read-only textarea tag string with given message.
This is intended to display some result or response.

var html = dbg.createResBox('');

dbg.createResBoxErr

message

Returns a read-only textarea tag string with given message. (error style)

var html = dbg.createResBoxErr('');

dbg.adjustResBox

Adjust height of textarea which is created by createResBox().

dbg.adjustResBox();

dbg.getCookie

key(opt)

Returns a value of the specified key.

var cookies = dbg.getCookie(); 
Returns a map object consists of key and value.

var val = dbg.getCookie('');

dbg.setCookie

arg1: key
arg2: value

Set a value for the specified key.

dbg.setCookie('', '');

dbg.deleteCookie

key

Delete the specified key.

dbg.deleteCookie(''); 

Delete all cookies.
dbg.deleteCookie();

Command Line Argument Operation

dbg.splitArgs

argument-string

Splits a given argument string into an array of strings by separating the string into substrings, using whitespace character " ".

var args = dbg.splitArgs('');

dbg.splitCmdLine

argument-string

An extended version of splitArgs(). (grouped by "", '', ())

var ret = dbg.splitCmdLine('');

dbg.splitCmdLineInTwo

argument-string

Splits a command line in two.

var ret = dbg.splitCmdLineInTwo('');

dbg.countArgs

argument-string

Returns number of arguments.

dbg.countArgs('');

dbg.getArgVal

argument-string
index

Returns a value of an option.

var val = dbg.getArgVal('', );

dbg.getOptVal

argument-string
key

Returns a value of an option.

var val = dbg.getOptVal('', '');

dbg.getOptVals

argument-string

Returns values of options.

var vals = dbg.getOptVals('');

dbg.getNonOptVals

argument-string

Returns values of non options.

var vals = dbg.getNonOptVals(''); 
var vals = dbg.getNonOptVals('', true);

dbg.get1stOpt

argument-string

Returns the 1st option name in the argument.

var opt = dbg.get1stOpt('');

dbg.hasOpt

argument-string
key

Returns if the arguments has an option.

dbg.hasOpt('', '');

dbg.countOpts

argument-string

Returns the count of options.

dbg.countOpts('');

Initialization

dbg.init

options

Initialize debug.js
See also: // Options section.

dbg.isReady

Returns if debug.js is initialized

"dbg" is an alias of "DebugJS". / "log" is an alias of "dbg.log".
debug.js will not use aliases in case of those that are already defined.

// Classes

RingBuffer
Name	Arguments	Description
Constructor	buffer size
add	string	Add the string to the buffer
get	index	Returns the string in the specified index of the buffer
getAll		Returns the all contents array in the buffer
set	arg1: index arg2: string	Set the string to the specified index in the buffer
clear		Clear the buffer
count		Returns the buffer count
size		Returns the buffer size
var buf = new dbg.RingBuffer(3); buf.add('a'); buf.add('b'); buf.add('c'); buf.add('d'); buf.add('e'); buf.getAll(); -> ['c', 'd', 'e']
TextBuffer
Constructor	string	Constructs a buffer with the given string. In case of no argument, constructs with no characters in it.
add	string	Add a line to the buffer with LF
toString		Returns the text buffer
var buf = new dbg.TextBuffer(); buf.add('a'); buf.add('b'); buf.add('c'); buf.toString(); -> a↓LF b↓LF c↓LF

// Commands

Name	Arguments	Description
alias	name=command	Define or display aliases. $ alias [name=['command']]
arr2set	array	Convert Array to Set. $ arr2set ['a', 'b', 'c', 'a', 'b'] -> ['a', 'b', 'c'] $ arr2set -j ['a', 'b', 'c', 'a', 'b'] -> Output in JSON format. [ "a", "b", "c" ] $ arr2set -s ['a', 'b', '1', 1] -> ['a', 'b', '1', 1] (Strict mode) $ arr2set -sort ['z', 'a', 'b', 'a'] -> ['a', 'b', 'z']
ascii		Print all ASCII characters
base64	arg1: operation arg2: string	Encodes / Decodes Base64 string. operation: -e encode(default option) -d decode $ base64 -e abcdefg -> YWJjZGVmZw== $ base64 -d YWJjZGVmZw== -> abcdefg
base64s	arg1: operation arg2: key arg3: string	Base64 with XOR encryption by the specified key. operation: -e encode(default option) -d decode key : -k KEY $ base64s -e -k xyz abcdefg -> GRsZHBwcHwA= $ base64s -d -k xyz GRsZHBwcHwA= -> abcdefg
bat	arg1: run\|pause\|stop\|list\|status\|pc\|clear\|exec\|set arg2: start line(opt) arg3: end line(opt)	Operate BAT Script $ bat run -s START-LINE(opt) -e END-LINE(opt) -arg ARGUMENT(opt) $ bat pause $ bat stop $ bat list start-line(opt) end-line(opt) $ bat status key(opt) $ bat clear $ bat exec b64-encoded-bat $ bat run 1 -> Execute only line 1 $ bat run -s 3 -e 5 -> Execute from line 3 through line 5 $ bat run -s 3 -> Execute from line 3 through the end $ bat pc -> Displays current program counter $ bat labels [pattern(RegExp)] -> Displays label list $ bat set b 1 $ bat set break 1 -> Sets a break point to the specified line. $ bat set delay 1000 $ bat set delay 1d2h3m4s500 -> Sets execution delay. $ bat set pc 1 -> Sets the program counter to the specified line.
bit	bit position or num of bits	Displays the value of the given bit position. $ bit 8 HEX 0x80 DEC 128 OCT 0200 BIN 0000 0000 0000 0000 0000 0000 1000 0000 (8 bits) $ bit -a 8 HEX 0xFF DEC 255 OCT 0377 BIN 0000 0000 0000 0000 0000 0000 1111 1111 (8 bits)
bsb64		Encodes / Decodes BSB64(Bit Shifted Base64) reversible encryption string. operation: -e encode(default option) -d decode -i Iput string -n Number of bit rotation 1-7 : n bit rotate left (default=1) 0 : bit inversion $ bsb64 -e -i "abc" -n 1 -> wsTG $ bsb64 -d -i "wsTG" -n 1 -> abc Simple usage: $ bsb64 abc $ bsb64 -e abc $ bsb64 -d wsTG $ bsb64 -d wsTG$N (equal to bsb64 -d -i "wsTG" -n N)
bswap	hex	Swaps the byte ordering. $ bswap 1234 > 0x3412 HEX 0x3412 DEC 13,330 OCT 032022 BIN 0000 0000 0000 0000 0011 0100 0001 0010 (14 bits)
byte	B KB MB GB TB PB	Convert KB/MB/GB/TB/PB <--> Bytes. (case-insensitive) $ byte -k 1 $ 1KB -> 1 KB 1,024 B $ byte -m 1 $ 1MB -> 1 MB 1,024 KB 1,048,576 B $ byte -g 1 $ 1GB -> 1 GB 1,024 MB 1,048,576 KB 1,073,741,824 B $ byte 1048576 $ 1048576 b -> 1 MB 1,024 KB 1,048,576 B
chars	arg1: start character arg2: end character	Print Unicode characters that consists of consecutive code points $ chars A Z $ chars 0x41 0x5A $ chars U+0041 U+005A -> ABCDEFGHIJKLMNOPQRSTUVWXYZ
close	function	Close a function function measure: Screen Measure sys : System Info dom : Element Info js : JavaScript Editor tool : Tools ext : Extension Panel
clock		Manipulate the clock. $ clock 20210508T123456 $ clock -3600000 $ clock now $ clock stop $ clock start $ clock on $ clock off $ clock -label "2021-05-08 SAT 12:34:56"
cls		Clear log message.
chmod	mode	Convert the Linux file mode between numeric and symbolic notation. $ chmod 755 -> rwxr-xr-x $ chmod rwxr-xr-x -> 755
code	code statement	Execute a code statement as pure JavaScript.
condwait	arg1: operation arg2: key	Sets condition key and pause BAT execution. $ condwait set -key <key> $ condwait pause [-timeout ms\|1d2h3m4s500] [-q] dbg.bat.setCond(<key>); $ condwait init -> Clear the waiting condition forcibly.
cookie	arg1: operation arg2: key arg3: value	Manipulate cookie. $ cookie keys -> Get all keys in the cookie $ cookie get "<key>" -> Get a value $ cookie get -a -> Get all keys and values $ cookie set "<key>" "<value>" -> Set a value for the key $ cookie delete "<key>" -> Delete the key $ cookie delete -a -> Delete all keys from the cookie
copy	string	Copy to clipboard. $ copy -> Copy the logs $ copy "abc" -> Copy the string
dbgwin	arg1: operation arg2: parameter arg3: parameter	Control the debug window operation: show Show debug window operation: hide Hide debug window operation: pos Set the debugger window position. parameter1: n: center \| top ne: right \| top e: right \| middle se: right \| bottom s: center \| bottom sw: left \| bottom w: left \| middle nw: left \| top c: center \| middle parameter1: pos-x parameter2: pos-y operation: size Set the debug window size parameter1: width parameter2: height operation: opacity Set the level of transparency of the debug window parameter1: 0.1-1 operation: status Show the status of the debug window operation: lock Hide and lock the debug window with lock code parameter1: lock code See also: Options -> lockCode
date	millis / Date-Time	Convert millis <--> Date-Time -iso option: output in ISO 8601 format $ date 1549683296789 -> 2019-02-09 12:34:56.789 +09:00 SAT $ date 1549683296.789 -> 2019-02-09 12:34:56.789 +09:00 SAT $ date 1549683296. -> 2019-02-09 12:34:56.000 +09:00 SAT $ date 2000/01/01 00:00:00 -> 2000-01-01 00:00:00.000 +09:00 SAT (946652400000) $ date 20180620T123456.987 -> 2018-06-20 12:34:56.987 +09:00 WED (1529465696987) $ date -> 2019-08-30 23:50:58.209 +09:00 FRI (1567176658209) current time $ date -iso -> 20190830T235058.209+0900 (1567176658209) current time $ date -iso 1500000000000 -> 20170714T114000.000+0900 w/ time zone offset $ date -0700 -> 2019-08-30 07:53:21.312 -07:00 FRI (1567176801312) $ date 1549683296789 -0700 -> 2019-02-08 20:34:56.789 -07:00 FRI $ date 2000/01/01 00:00:00 -0700 -> 2000-01-01 00:00:00.000 -07:00 SAT (946710000000)
delay	arg1: millis\|target time arg2: command	Delay command execution $ delay 1000 echo "abc" $ delay 20180520T170030 echo "abc" $ delay T170030 echo "abc" $ delay T0000\|T1200 echo "abc" $ delay T**30 echo "abc" $ delay 1d2h3m4s500 echo "abc" $ delay 1.5s echo "abc" $ delay -c Cancel the execution $ delay -q Check the execution queue
echo	string or expression	Display the ARGs on the log window $ echo "abc" -> echo "abc" abc $ @echo "abc" -> abc $ echo 1 + 2 -> echo 1 + 2 3 $ echo off -> Command echo will be turned off $ echo on -> Command echo will be turned on
elements	(opt) #id / .class / tagName	Count elements by #id / .className / tagName. $ elements #header DIV 6 A 1 IMG 1 BR 1 Total 9 Filtering by attribute: $ elements -innerText "Download" A 1 BUTTON 1 Total 2 $ elements -value "hidden-value-1" INPUT 1 Total 1
event	arg1: operation arg2: target arg3: value	Manipulate an event. Create New Event $ event create mousedown Set Properties $ event set button 0 $ event set propertyName "value"quoted value is treated as a string Dispatch to a target $ event dispatch windowtarget $ event dispatch documenttarget $ event dispatch activetarget (document.activeElement) $ event dispatch pointtarget (pointed element by point command) $ event dispatch #idtarget $ event dispatch .classNametarget 0index(opt) $ event dispatch tagNametarget 0index(opt) Clear the event object $ event clear e.g., Send a Key Down Event (A + Shift) to window $ event create keydown $ event set keyCode 65 $ event set shiftKey true $ event set ctrlKey false $ event set altKey false $ event set metaKey false $ event dispatch window
exit		Close the debug window and clear all status.
float	value	Displays IEEE 754 bit-level encodings. $ float -118.625 binary32: -118.625 -1110110.101 133(+6) 8bits 23bits seeeeeeeefffffffffffffffffffffff 11000010111011010100000000000000 C 2 E D 4 0 0 0 binary64: -118.625 -1110110.101 1029(+6) 11bits 52bits seeeeeeeeeeeffffffffffffffffffffffffffffffffffffffffffffffffffff 1100000001011101101010000000000000000000000000000000000000000000 C 0 5 D A 8 0 0 0 0 0 0 0 0 0 0 $ float -b 11000010111011010100000000000000 $ float 0b11000010111011010100000000000000 $ float -b -1110110.101 binary32: -118.625 -1110110.101 133(+6) 8bits 23bits seeeeeeeefffffffffffffffffffffff 11000010111011010100000000000000 C 2 E D 4 0 0 0 $ float -h C2ED4000 $ float 0xC2ED4000 binary32: -118.625 -1110110.101 133(+6) 8bits 23bits seeeeeeeefffffffffffffffffffffff 11000010111011010100000000000000 C 2 E D 4 0 0 0
history	option(opt)	Displays command history. Option: -c Clear the history list. -d offset Delete the history entry at position offset.
http	arg1: method(opt) arg2: url arg3: data to send(opt)	Send an HTTP request by specified method. This command perform the operation synchronously and XMLHttpRequest object will be returned. method: The HTTP method to use, such as GET, POST, HEAD, PUT, DELETE, OPTIONS, etc. GET is set as the default value in case of that the method is not specified. e.g., GET The results of the following commands will be the same. http get https://debugjs.net/test/?abc=123&xyz=987 http https://debugjs.net/test/?abc=123&xyz=987 https://debugjs.net/test/?abc=123&xyz=987 POST http post https://debugjs.net/test/ abc=123&xyz=987 HEAD http head https://debugjs.net/test/ w/ User Auth http [METHOD] -u USER:PASS URL DATA
inject	arg1: function name arg2: code	Inject a given code into a given function. The given code will be inserted into the beginning of the function. $ inject func1 "log('func1 was called');"
int	value	Convert DEC / HEX / BIN to other radix base number. $ int 128 -> HEX 0x80 DEC 128 OCT 0200 BIN 0000 0000 0000 0000 0000 0000 1000 0000 (8 bits) $ int 0x20 -> HEX 0x20 DEC 32 OCT 040 BIN 0000 0000 0000 0000 0000 0000 0010 0000 (6 bits) $ int 0b1010 -> HEX A DEC 10 OCT 012 BIN 0000 0000 0000 0000 0000 0000 0000 1010 (4 bits)
json	one-line JSON	Parse one-line JSON. $ json {"name": "John Smith", "age": 25, "city": "New York"} -> Convert JSON strings to a Friendly Readable Format like below. { "name": "John Smith", "age": 25, "city": "New York" } Option: -p Print the object in the same format as p command. -l<n> Recursion level limit
keypress	keycode	Dispatch a keyevent to active element. $ keypress 1 -shift -ctrl -alt -meta
keys	Object(s)	Displays all enumerable property keys of an object.
kiosk	zoom ratio(opt)	Make the debugger window go full screen.
laptime		Lap time test togglable Start the stopwatch and print the measurement time by clicking left mouse button. The stopwatch will be reset with each clicking.
led	bit pattern(0-255)	Set a bit pattern to the indicator. e.g., $ led 1 ●●●●●●●● $ led 255 ●●●●●●●● $ led 0x20 ●●●●●●●● $ led 0b111 ●●●●●●●●
len	string	Count the length of the given string. $ len abc -> 3 $ len abc★(length) -> 4 $ len -b abc★(UTF-8 bytes) -> 6
log	arg1: operation arg2: args	Manipulate log output bufsize: Set the log buffer size $ log bufsize 1000 -> Set the size to 1000 $ log bufsize -> Show the current size copy: Copy to clipboard $ log copy date: Show date $ log date on -> 1: 2019-06-25 21:45:00.000 Hello, world! $ log date off -> 1: 21:45:00.000 Hello, world! dump: Export the log buffer in JSON format $ log dump -> export in JSON format $ log dump -b64 -> export in base64 encoded JSON format See also: log load command dbg.loadLog() dbg.dumpLog() filter: Set log filter $ log filter "Filter String" -> case insensitive $ log filter -case "Filter String" -> case sensitive load: Load logs into the debug window $ log load JSON $ log load -b64 Base64-encoded-JSON JSON Format [{"type":1,"time":"12:34:56.789","msg":"SGVsbG8sIFdvcmxkIQ==(b64)"},...] See also: log dump command dbg.dumpLog() dbg.loadLog() preserve: Preserve log $ log preserve on $ log preserve off suspend: Suspend log output $ log suspend on $ log suspend off lv: Set log level filter $ log lv LOG\|VRB\|DBG\|INF\|WRN\|ERR\|FTL $ log lv ALL $ log lv NONE
mod	arg1: digit(opt) arg2: code	Calculate check digit by modulus N. $ mod 10\|11\|43 [-w WEIGHT] [DIGIT] CODE e.g., # JAN-13 $ mod 10 456995111617 > 9 $ mod10 13 4569951116179 > OK $ mod 10 13 4569951116178 > NG # UPC-A $ mod 10 01234567890 > 5 $ mod 10 12 012345678905 > OK $ mod 10 12 012345678906 > NG $ mod 10 -w 2 123456789012 > 0 $ mod 11 12345678901 > 8 $ mod 11 12 123456789018 > OK $ mod 11 12 123456789019 > NG $ mod 43 ABC123 > $ $ mod 43 6 ABC123$ > OK
msg	message	Set a string to the message display. -c option: Clear the message.
nexttime	time-string	Returns next time from given args. now = 2019-03-20 00:00:00.000 $ nexttime T0000\|T0930\|T1345 -> 2019-03-20 WED 00:00:00.000 Returns "T0000" $ nexttime T30 -> 2019-03-20 WED 00:30:00.000 Returns "T0030" $ nexttime T**** -> 2019-03-20 WED 00:00:01.000 Returns "T000001" $ nexttime 1d2h3m4s -> 2019-03-21 WED 02:03:04.000 Returns "T020304" $ nexttime 60000 -> 2019-03-20 WED 00:01:00.000 Returns "T000100" $ nexttime -q T0000\|T0930\|T1345 -> Quiet display option
now		Returns the number of milliseconds elapsed since Jan 1, 1970 00:00:00 UTC.
open	arg1: function arg2: sub function arg3: option	Launch a function function measure: Screen Measure sys : System Info dom : Element Info js : JavaScript Editor tool : Tools ext : Extension Panel sub function (for tools) timer: Clock/Timer font : Font Checker file : File Loader html : HTML Editor bat : Batch editor sub function (for ext) panel index or panel name option for timer: mode clock: Clock sw : Stopwatch for tools.file: load format b64: Base64 bin: Binary
num	arg1: value1 arg2: value2 arg3: step(opt)	Displays the numbers in order. $ num 1 10 1 2 3 4 5 6 7 8 9 10 $ num -z 1 10 01 02 03 04 05 06 07 08 09 10 $ num 0 10 2 0 2 4 6 8 10
p	-l: recursion level limit -j: in JSON format(opt) expression	Print value of expression EXP. $ p object -> dump all properties w/ limit (1000) $ p -l<n> object -> dump properties w/ recursion level limit $ p -json object -> dump in JSON format $ p -a object -> dump all properties w/o limit (may be out of memory)
pause	-key key(opt) -timeout ms(opt)	Suspends processing of batch file. Click, press any key, or execute "resume" command to resume. -key option requires "resume -key key" command or dbg.bat.resume('key') to resume. -timeout option(opt): Set time-out value in milliseconds. -q option(opt): Silent mode $ pause [-q] click / key press $ pause -key aaa [-timeout ms\|1d2h3m4s500\|T123456\|T**00] $ resume $ resume -key aaa $ pause -key aaa\|bbb [-timeout ms\|1d2h3m4s500\|T123456\|T00] $ resume $ resume -key aaa $ resume -key bbb $pause -key [-timeout ms\|1d2h3m4s500\|T123456\|T**00] $ resume / $ resume -key
pin	on\|off	Fix the window in its position
point	coordinate / element / operation	Manipulate the pseudo pointer. $ point 100 200 -> Show the pointer at x=100px, y=200px $ point +10 +20 $ point -10 -20 -> Move the pointer from current position $ point CSS-Selector -alignX 0.50-1(opt) -alignY 0.50-1(opt) $ point #id $ point .className $ point .className index $ point tagName $ point tagName index $ point node+[N] $ point node-[N] $ point bytext "INNER_TEXT" index $ point byattr ATTR_NAME "VALUE" index -> Point the specified element $ point center Center of the screen $ point center 100 $ point left 100 $ point right 100 $ point 100 middle $ point 100 bottom $ point mouse Current mouse position -> Point the specified position $ point hide -> Hide the pointer $ point show -> Show the pointer $ point click -speed 500click speed in ms (opt:default=100) -> Click the current position $ point cclick -speed 500click speed in ms (opt:default=100) -> Center click the current position $ point rclick -speed 500click speed in ms (opt:default=100) -> Right click the current position $ point dblclick -speed 200click speed in ms (opt:default=100) -> Double click the current position $ point contextmenu $ point focus $ point blur $ point change -> Dispatch the specified event to the current position $ point mousedown 0button(0-4) -> Dispatch the mousedown event to the current position $ point mouseup 0button(0-4) -> Dispatch the mouseup event to the current position $ point keydown -keyCode 65 -code KeyA -key a -sshiftKey(opt) -cctrlKey(opt) -aaltKey(opt) -mmetaKey(opt) -> Dispatch the keydown event to the current position $ point keypress -keyCode 65 -code KeyA -key a -sshiftKey(opt) -cctrlKey(opt) -aaltKey(opt) -mmetaKey(opt) -> Dispatch the keydown event to the current position $ point keyup -keyCode 65 -code -code KeyA -key a -sshiftKey(opt) -cctrlKey(opt) -aaltKey(opt) -mmetaKey(opt) -> Dispatch the keydown event to the current position $ point text "abc123" -speed 10(opt) -step 2(opt) -start 1(opt) -end 6(opt) speed: input speed in millis(default=30 / 50-500=50ms to 500ms in random) step : number of characters to input at a time (default=1) start: animation sequence end position end : animation sequence end position -> Input text into the current position (<input>, <textarea>) $ point selectoption set text "option1" $ point selectoption set value "1" -> Select a <select> option value at the current position $ point selectoption get text -> "option1" $ point selectoption get value -> "1" $ point selectoption get texts -> ["Option1", "Option2", "Option3"] $ point selectoption get values -> ["1", "2", "3"] $ point scroll x y -> Scroll the current position x: [+\|-]val \| left \| center \| right \| current y: [+\|-]val \| top \| middle \| bottom \| current $ point position -speed 10speed ms(opt) -step 10step px(opt) -alignX 0.50-1(opt) -alignY 0.50-1(opt) $ point move x y $ point move #id $ point move .className 0index $ point move CSS-Selector $ point move tagName 0index $ point move node+[N] $ point move node-[N] $ point move bytext "INNER_TEXT" 0index $ point move byattr ATTR_NAME "VALUE" 0index $ point move center Center of the screen $ point move center 100 $ point move left 100 $ point move right 100 $ point move 100 middle $ point move 100 bottom $ point move mouse Current mouse position -> Move the pointer from the current position to the specified position $ point move +100 +200 $ point move -100 -200 -> Move the pointer to the specified position (relative) $ point drag <The rest of the arguments are the same as point move command> -> Drag the pointer to the specified position $ point event eventType -prop1 val1 -prop2 val2 -> Send a event to the pointer position $ point hint msg "hello!" -> Show a message at the pointer position $ point hint msgseq "hello!" $ point hint msgseq "hello!" -speed 500(opt) -step 2(opt) -start 3(opt) -end 5(opt) -> Show a message at the pointer position with sequence animation. $ point hint hide -> Hide a message $ point hint show -> Show a message again $ point hint clear -> Hide and clear a message $ point cursor data:image/png;base64,<base64-encoded-image-data> 20width(opt) 10height(opt) -> Change the cursor image $ point cursor default -> Change the cursor image to default cursor (normal pointer image) $ point cursor pointer -> Change the cursor image to pointer cursor (an image of a hand) $ point cursor text -> Change the cursor image to the shape of an I-beam. $ point cursor none -> No cursor is rendered $ point getelement -> Get an Element object at the current pointed position e.g., $ ${el} = point getelement $ ${el}.innerHTML = "abc" $ ${el}.style.color = "#f00" $ point getprop propertyName -> Get property value of the element at the current pointed position $ point setprop propertyName value -> Set property value of the element at the current pointed position $ point verify propertyName operand value -> Verify a property value of the element at the current pointed position e.g., $ point verify value == "123" [OK] Got="123" == Exp="123" [NG] Got="456" == Exp="123" $ point verify value == "123" $ point verify value != "123" $ point verify value < "123" $ point verify value <= "123" $ point verify value > "123" $ point verify value >= "123" $ point verify value regexp \d.*\sabc $point ch 1 -> Switch the pointer channel. (Default ch is 0) $ point init -> Hide pointer, clear message, point x=0, y=0. $ point init -a -> Initialize all pointer channel.
prop	property-name	Displays a property value of the debugger.
props		Displays debugger property list.
random	arg1: type(opt) arg2: min(opt) arg3: max(opt)	Get random number / string. type: -n number (default) -s string min: minimum number / length max: maximum number / length $ random -> 0-2147483647 $ random 4 -> 0-4 $ random 1 4 -> 1-4 $ random 4d -> "0000"-"9999" $ random -s -> Random string with 1-10 characters $ random -s 4 -> Random string with four characters $ random -s 1 4 -> Random string with 1-4 characters $ random -s 1 4 -tbl "ABCDEFG0123456789!@?" -> Random string with 1-4 characters using the characters in the -tbl option
resume	-key key(opt)	Resume a batch process which suspended by "pause -c" command. -key option resumes the batch process corresponding to the same key by "pause -key" command.
rgb	RGB Color Value	Convert RGB color values between HEX and DEC. $ rgb #fff -> 255 255 255 $ rgb 255 255 255 -> #fff
rot	5\|13\|18\|47 N string	Replaces a letter with ROT5, ROT13, ROT18(ROT13.5), ROT47. -n Number of shift(opt) $ rot 5 123 -> 678 $ rot 13 abc -> nop $ rot 18 123ABCabc -> 678NOPnop $ rot 47 !"#123@ABC_abc~ -> PQR`abopqr0234O $ rot 13 -n 1 abc -> bcd $ rot 13 -n (-1) abc -> zab
scrollto	arg1: target arg2: position x\|selector arg3: position y arg4: options	Set scroll position target = window: -> scroll window x: [+\|-]px\|<selector>\|left\|center\|right\|current y: [+\|-]px\|top\|middle\|bottom\|current w/ "+" / "-" : the offset in pixels. w/o "+" / "-" : absolute position in pixels. $ scrollto window +0 bottom $ scrollto 100 5000 -> Gradually adjust the position (use scrollstep/scrollspeed properties) $ scrollto window 100 5000 -speed 20 -step 10 -> Gradually adjust the position (x=100, y=5000) by 10px every 20ms. $ scrollto window 100 5000 -speed 0 -step 0 -> Scroll to the specified position directly $ scrollto window #id -adjX 0(opt:px) -adjY (-100)(opt:px) $ scrollto window .className 0(opt:index) -adjX 0(opt:px) -adjY (-100)(opt:px) $ scrollto window tagName 0(opt:index) -adjX 0(opt:px) -adjY (-100)(opt:px) -> Scroll to the specified selector target = log: -> scrollto log window position: top\|px\|bottom
select	arg1: selectors arg2: "value"	Select an option of select element / get value or option label text e.g., $ select #id set value "1" $ select select:nth-child(1) set text "abc" $ select #id get text $ select #id get value $ select #id get texts $ select #id get values
set	arg1: property-name arg2: value	Set a property value of the debugger. See also "props" command.
setattr	arg1: selector arg2: index(opt) arg3: property-name arg4: value	Sets the value of an attribute on the specified element. e.g., $ setattr #id disabled true $ setattr .className 1 disabled true
sha	arg1: algorithm arg2: input	Calculates and displays hash value. * jsSHA is required. e.g., $ sha 256 "abc" > ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad
sleep	millis	Causes the currently executing thread to sleep
stack	function name	Inject print stack trace code (dbg.stack()) into a given function. This command is not applicable for native function. $ stack func1
stopwatch	arg1: target(opt) arg2: operation	Manipulate the stopwatch. target: 0: Mini stopwatch on the upper right of the debug window 1: Timer on the TOOL window operation: start stop reset split end t0 time value e.g., $ stopwatch start $ stopwatch stop $ stopwatch t0 20210613T1200 $ stopwatch value 5000 $ stopwatch 1 start $ stopwatch 1 split $ stopwatch 1 stop $ stopwatch 1 t0 20210613T1200 $ stopwatch 1 value 5000
strp	arg1: pattern table arg2: index or string	String permutation Get the string pattern from the index $ strp "ABC" 2 -> B $ strp "ABC" 4 -> AA Get the index of the pattern $ strp "ABC" "B" -> 2 $ strp "ABC" "AA" -> 4 Count total patterns $ strp -total "ABC" 1 -> 3 $ strp -total "ABC" 2 -> 12 $ strp "ABC" 1 5 -> A B C AA AB
sw		Launch the stopwatch in the full-screen mode. $ quit to close the stopwatch.
test	arg1: operation type arg2: verify target value arg3: verify method arg4: verify expected value	Manage unit test. [operation type] init: Reset the test results. ($ test init -name "TestName"(opt)) set: Set Test ID / Label / Description / Comment / Result ($ test set id\|label\|desc\|comment\|result "STRING") verify: Evaluate a value count: Displays the test count. result: Displays the test result. last: Last result of test/point verify command. (OK / NG / ERR / NT) status: Displays the total test result. (OK / NG / ERR / NT) end: Finalize the test execution. (The running status will be set to false and finished time will be set) $ test init -name "TestName" $ test set desc "Description" $ test set id "Test01" $ test set id "Test-%SEQ%""%SEQ%" will be replaced by auto sequential number. ("Test-%SEQ%" -> "Test-1") $ test set comment "Comment" $ test verify a == 1 $ test verify -label "text" b == 2 $ test set result OK -label "result1" -info "ok test" $ test set result NG -label "result2" -info "ng test" $ test set result ERR -label "result3" -info "err test" $ test set result NT -label "result4" -info "nt test" $ test set seq 10 Explicitly set number for "%SEQ%". $ test end $ test result [Result Output Example] Test Result: [TEST NAME] TestName [DESCRIPTION] Description [RESULTS] --------- [ERR] Test01 # Comment [NG] Got=[object Object] == Exp=1 text [NG] Got=1,2,3 == Exp=2 result1 [OK] ok test result2 [NG] ng test result3 [ERR] err test result4 [NT] nt test [SUMMARY] OK:0/1 NG:0 ERR:1 NT:0 (OK:1/6 NG:3 ERR:1 NT:1) ----- [ERR]
text	arg1: text arg2: selector arg3: "data" arg4: options	Set text value into an element. $ text #text1 "abc 123" -speed 100(opt) $ text #text1 "abc 123" -speed 100-200(opt) $ text #text1 "abc 123" -speed 100(opt) -start 1(opt) -end 3(opt) $ text #text1 "abc 123" -speed 100(opt) -start 2(opt) -end 3(opt) $ text #text1 "abc 123" -step 2(opt) speed: input speed in millis(default=30 / 50-500=50ms to 500ms in random) step : number of characters to set at a time (default=1) start: animation sequence start position end : animation sequence end position
textedit	arg1: oeration arg2: value	Manipulate text editor $ textedit get -> Get text $ textedit set "Text" -> Set text $ textedit clear -> Clear text $ textedit mode 1 -> Switch edit mode $ textedit setoptval 0 "abc" -> Set option value (Set "abc" to the first option) $ textedit exec -> Execute edit
time	ms\|time-string	String <--> millis $ time 1d2h3m4s567 -> 1d 2h 3m 4s 567 (93784567 ms) $ time 1d 2h 3m 4s 567 -> 1d 2h 3m 4s 567 (93784567 ms) $ time 26:03:04.567 -> 1d 2h 3m 4s 567 (93784567 ms) $ time 93784567 -> 1d 2h 3m 4s 567 (93784567 ms) $ time 93784.567 -> 1d 2h 3m 4s 567 (93784567 ms)
timediff	ms\|time-string	Time duration calculator. $ timediff 1 3 -> 00:00:00.002 $ timediff 1000 3000 -> 00:00:02.000 $ timediff 1.0 3.0 -> 00:00:02.000 $ timediff 09:00:00 10:05:30 -> 01:05:30.000 $ timediff "2019-02-09 12:00:00.000" "2019-02-10 13:02:03.456" -> 1d 01:02:03.456 $ timediff "20190209T120000.000" "20190210T130203.456" -> 1d 01:02:03.456 $ timediff "2020-01-01 00:00:00.000" now $ timediff now "2100-01-01 00:00:00.000" -> Xd HH:MI:SS.sss
unalias	name(s)	Remove each NAME from the list of defined aliases $ unalias name [name ...]
unicode	arg1: operation arg2: string	Displays Unicode escape sequences from text string / Decodes Unicode string from code point(s). operation: -e encode(default option) -d decode $ unicode -e "ABC" -> \u0041\u0042\u0043 $ unicode -d 41 42 43 -> ABC
uri	arg1: operation arg2: string	Encodes / decodes a URI component. operation: -e encode(default option) -d decode $ uri -e abc:def -> abc%3Adef $ uri -d abc%3Adef -> abc:def
utf8	string	Dump UTF-8 byte sequence.
v		Displays version info.
vals		Displays variable list. option: -c: Clear user variables
watchdog	arg1: start / stop arg2: timeout (ms)(opt)	Start/Stop Watchdog timer The default timeout value is 500ms.
win	size	Set the debugger window size/pos. size: normal: default size center: 960 x 640 px full: full screen expand: depends on the current size restore: restore the original size reset: reset to initial size and position
xlscol	ref	Excel column number <--> reference $ xlscol A -> 1 $ xlscol 1 -> A $ xlscol A + 1 -> B $ xlscol B - 1 -> A $ xlscol A B -> 2 (cells) $ xlscol A:C -> A B C
xlsdate	days\|YYYY/MM/DD	Serial number <--> Date text $ xlsdate 1 -> 1900/01/01 $ xlsdate 1900/01/01 -> 1 $ xlsdate 44633 -> 2022/03/13 $ xlsdate 2022/03/13 -> 44633
xlstime	time\|hh:mm:ss.000	Serial number <--> Time text $ xlstime 0.5 -> 12:00:00.000 $ xlstime 12:00 -> 0.5 $ xlstime 0.05816756944444444 -> 01:23:45.678 $ xlstime 01:23:45.678 -> 0.05816756944444444
zoom	ratio	Zoom the debugger window. $ zoom 1.4 $ zoom 1

// Calculation / Conversion

The debugger can perform the following calculation/conversion on the command-line.

Calculation	Input	Description
Radix conversion	decimal number hexadecimal number binary number	Convert DEC / HEX / BIN to other radix base number. $ 128 -> HEX 0x80 DEC 128 OCT 0200 BIN 0000 0000 0000 0000 0000 0000 1000 0000 (8 bits) $ 0x20 -> HEX 0x20 DEC 32 OCT 040 BIN 0000 0000 0000 0000 0000 0000 0010 0000 (6 bits) $ 0b1010 -> HEX A DEC 10 OCT 012 BIN 0000 0000 0000 0000 0000 0000 0000 1010 (4 bits) This is an alias of int command.
bit	bit position (LSB=1)	Displays the value of the given number of bit. $ 8bit -> HEX 0x80 DEC 128 OCT 0200 BIN 0000 0000 0000 0000 0000 0000 1000 0000 (8 bits)
bits	number of bits	Displays the maximum value of the given number of bits. $ 8bits -> HEX 0xFF DEC 255 OCT 0377 BIN 0000 0000 0000 0000 0000 0000 1111 1111 (8 bits)
Number format	decimal number	$ 123456789012345678901234 4 -> 1234垓5678京9012兆3456億7890万1234 $ 1京1234兆5678億9012万3456 -> 11234567890123456 $ 12345678 3 -> 12,345,678 $ 12,345,678 0 -> 12345678 $ 123456789 m $ 123456789 milli -> 1.234 $ 1234 u $ 1234 micro -> 0.001 234 $ 1234 n $ 1234 nano -> 0.000 001 234 The following metric prefixes are also available. p pico f femto a atto z zepto y yocto $ 0.123456789012345678901234567890 3 -> 0.123 456 789 012 345 678 901 234 567 890 m u n p f a z y
Time calculation	HH:MI:SS.sss + HH:MI:SS.sss [+] HH:MI:SS.sss - HH:MI:SS.sss [-]	Perform a time calculation. $ 00:05:30.700 + 00:01:20.123 -> 00:06:50.823 $ 00:05:30.700 - 00:05:20.400 -> 00:00:10.300 $ 10:00 + 16:00 -> 26:00:00.000 $ 10:00 + 16:00 d -> 02:00:00.000 (+1 Day) $ 10:00 - 16:00 -> -06:00:00.000 $ 10:00 - 16:00 d -> 18:00:00.000 (-1 Day) $ 01:30 * 2 -> 03:00:00.000 $ 03:00 / 2 -> 01:30:00.000
Date calculation	YYYY/MM/DD +\|- days	Perform a date calculation. $ 2018/01/01 + 2 $ 2018-01-01 + 2 $ 20180101 + 2 -> 2018/01/03 $ 2018/01/01 - 2 $ 2018-01-01 - 2 $ 20180101 - 2 -> 2017/12/30 $ today + 2 $ today - 2
Date diff	YYYY/MM/DD YYYY/MM/DD	$ 2018/01/01 2018/01/03 $ 2018-01-01 2018-01-03 $ 20180101 20180103 -> 2 $ 2018/01/01 2017/12/30 -> -2 $ today 2018/04/10
Date-Time	date-time	$ 2018/06/20 12:34:56.123 $ 2018-06-20 12:34:56.123 $ 20180620T123456.123 -> 2018-06-20 12:34:56.123 +09:00 WED (1529465696123) $ 2018/06/20 12:34:56.123 -0700 $ 2018-06-20 12:34:56.123 -0700 $ 20180620T123456.123 -0700 -> 2018-06-20 12:34:56.123 -07:00 WED (1529523296123) This is an alias of date command.
Date-Time (UTC based)	utc[+\|-][offset]	$ utc -> 2020-08-17 00:15:00.123 +00:00 MON $ utc-8 -> 2020-08-16 16:15:00.123 -08:00 SUN $ utc+0530 -> 2020-08-17 05:45:30.123 +05:30 MON $ utc+9 -> 2020-08-17 09:15:00.123 +09:00 MON
To milli seconds	time	$ 12:00:01 -> 12h 0m 1s (43201000 ms) $ 01:00 -> 1h 0m 0s (3600000 ms) $ 00:00:01.234 -> 1s 234 (1234 ms) This is an alias of time command.
Unicode	U+nnnn ...	Displays the character(s) of the code point which specified by the argument. $ U+0041 -> A $ U+6F22 U+5B57 -> 漢字 This is an alias of unicode command.
Ratio	formula	$ x:1080=16:9 -> x=1920 $ 1920:x=16:9 -> x=1080 $ 1920:1080=x:9 -> x=16 $ 1920:1080=16:x -> x=9 $ 1920:1080= -> 16:9
Permutation	nPr	$ 6p3 -> 120
Combination	nCr	$ 4c2 -> 6
Multi Choose	nHr	$ 12h4 -> 1365

// BAT Script Execution

BAT script is an original script language in debug.js.
It consists of a series of commands to be executed by the command-line interpreter.
You can write any commands of the library and JavaScript statements.

How to execute
From the menu on the upper of the debugger window,

TOOL => <BAT> => Write a BAT script => [ RUN ]

Sample Script (for Auto-testing of this page)
You can load a script by drag a script file (plain text file) and drop to log window.

Batch File Format

#!BAT! File Header

#comment

//comment

/*
multi-line-comment
*/

!__TEXT__!
plain text
plain text
plain text
!__TEXT__!
This is also comment section.
The difference from other comment section is the content will be set to the variable ${%TEXT%}.

${val} = command Command result will be set to the variable ${val}.

%{val} inline expansion of the value

IF (${val} == 1) (
  command
) ELSE IF (${val} == 2) (
  command
) ELSE (
  command
)

${i} = 0
LOOP (${i} < 3) (
  command
  ${i}++
)

LOOP (
  command
  IF (xxx) (
    BREAK
  )
  IF (xxx) (
    CONTINUE
  )
)

!__JS__! Inline JavaScript Section
JavaScript Code;
JavaScript Code;
JavaScript Code;
!__JS__! This section will be executed at once.

!__JS__! pure JavaScript section w/o variable substitution (${val})
JavaScript Code;
JavaScript Code;
JavaScript Code;
!__JS__!

:label
goto label

call func1 ${val}(argument is optional)
${val} = ${%RET%}

FUNCTION func1
  ${val} = ${%ARG%}
  command
  ${ret} = command
  return ${ret}(return value is optional)

Batch dedicated commands

Name	Arguments	Description
call	arg1: funcname arg2: argument(opt)	Call a function. call funcname call funcname argument
exit	exit status	Terminate the execution of the batch script When a program exits, it can return to the parent program a small amount of information about the cause of termination, using the exit status. Normally the exit status 0 indicates successful program completion. Other value indicates unsuccessful program completion. You can access the exit status via special variable ${?} bat exec IyFCQVQhDQpleGl0IDENCg==(1) echo "Exit Status = " + ${?} IF (${?} == 0)) ( echo "OK!" ) ELSE ( echo "ERROR!" ) (1) #!BAT! exit 1
goto	label	Jump to the label :label1 goto label1
jump	arg1: label arg2: argument(opt)	Jump to the label with link. Copy the address of the next instruction into link variable in the BAT control data. jump label jump label argument
nop		No operation (The same behavior as press enter key without command input)
return	return value(opt)	Return to the link which is saved by call/jump instruction. return return value
wait	millis or target time	Wait the specified milli seconds. wait wait 1000 wait 20180614T123045 wait T1230 wait T0000\|T1200 wait T**30 wait 1d2h3m4s500 wait 1.5s

Command Environment Variables

Variable	Description
${?}	Exit status of BAT execution
${%%ARG%%}	BAT execution argument string
${%ARG%}	Argument string of call/jump instruction
${%RET%}	Return value which is set by return instruction
${%LABEL%}	Current executing label name
${%FUNCNAME%}	Current executing function name
${%RESUMED_KEY%}	Last key value of resume command
${%TEST_TOTAL_RESULT%}	Total test result
${%TEST_LAST_RESULT%}	Last result of test/point verify command
${%TEXT%}	Text content written in !__TEXT__! section

BAT related system properties

Property	Description
batcont	Continue flag. The batch script will be continued after page unload/load. $ set batcont on $ set batcont off
batstop	Error stop trigger. The batch script will be stopped when an error occurred (when log.e() was called) or test verify command result was failed. $ set batstop none $ set batstop error $ set batstop test $ set batstop error\|test

// Features

Button	Description
	Screen Measure
SYS	Show system info
DOM	DOM Element Inspector
JS	JavaScript Editor/Executor
TOOL	Tools - Timer - Text Font Checker - HTML Previewer - File Viewer - BAT Editor/Controller
0	Reset stopwatch
>>	Start stopwatch
\|\|	Stop stopwatch
*	Preserve log
/	Suspend log output
P	Fix the window in its position
C	Copy log text
=	Show/Hide header info
－	Restore initial window size and position
□	Expand the window and adjust to center position
×	Close the window

// Options

If you want to change the debugger settings, explicitly call for initialization function in advance.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="debug.js"></script>
  <script>
    var options = {
      visible: true,
      zoom: 1.4,
      position: 'ne'
    };
    dbg.init(options);  

    function foo() {
      log('button was clicked');
    }
    ...

Name	Description	Default
visible	Default visible status	false
keyAssign	Key code for the debug window show/hide control show: { key: KeyCode, shift: undefined(not care) / true / false ctrl: undefined(not care) / true / false, alt: undefined(not care) / true / false, meta: undefined(not care) / true / false }	{ key: 113,(F2) shift: undefined ctrl: undefined, alt: undefined, meta: undefined }
focusOnShow	If true, the command-line will be given focus when the debug window is shown.	true
autoPopup	Popup the debug window when the following error occurs scriptError: a JavaScript runtime error loadError: .css / .js file load error error: log.e() has been called fatal: log.f() has been called	{ scriptError: true, loadError: true, error: true fatal: true }
lines	Number of lines to display	20
bufsize	Log buffer size (lines)	300
width	Debug window size (px)	602
zoom	Zoom ratio	1
position	Default window position 'n' = top \| center 'ne' = top \| right 'e' = middle \| right 'se' = bottom \| right 's' = bottom \| center 'sw' = bottom \| left 'w' = middle \| left 'nw' = top \| center 'c' = middle \| center	'se'
adjX	Debug window position x-adjustment (px)	20
adjY	Debug window position y-adjustment (px)	20
fontSize	Log message font size (px)	12
fontFamily	Font family	'Consolas, Monaco, Menlo, monospace, sans-serif'
fontColor	General font color	'#fff'
logColorV	Verbose log color	'#99bcc8'
logColorD	Debug log color	'#ccc'
logColorI	Information log color	'#9de'
logColorW	Warning log color	'#ee4'
logColorE	Error log color	'#d9a'
logColorF	Fatal log color	'#ea4'
logColorS	System log color	'#fff'
clockColor	Clock color	'#8f0'
timerColor	Timer color	'#9ef'
sysInfoColor	System info color (window / mouse / key status, etc.)	'#ddd'
btnColor	Button color ([CLR], >>, etc.)	'#6cf'
btnHoverColor	Button color for onMouseOver	'#8ef'
promptColor	Color code for command prompt "$" and ">" at the head of result log	'#0cf'
promptColorE	Color code for ">" at the head of error result log	'#f45'
background	Background style	'linear-gradient(150deg, rgba(0,0,0,0.8),rgba(0,0,0,0.5))'
border	Debug window border style	'solid 1px #888'
borderRadius	Rounded style for corners of the debug window	'0'
opacity	Transparency of the debug window	'1'
showLineNums	Show log line numbers	true
showTimestamp	Show log timestamp 0: None 1: Time only 2: Date and Time	1
resizable	Debug window resizable	true
togglableShowHide	Togglable Show / Hide (Show × button)	true
useClock	Show clock	true
useClearButton	Show [CLR] button	true
useSuspendLogButton	Show / button	true
usePinButton	Show P button	true
useWinCtrlButton	Show － □ button	true
useStopwatch	Enable stopwatch function	true
useDeviceInfo	Show window size / mouse status / key status	true
useLed	Show 8bit indicator ( ● ● ● ● ● ● ● ● )	true
useMsgDisplay	Enable Fixed Position Message Display	true
msgDisplayBackground	Background style of the fixed position message	'rgba(0,0,0,0.2)'
useScreenMeasure	Enable Screen Measure	true
useSystemInfo	Enable System Info indication	true
useElementInfo	Enable DOM Element inspection	true
useJsEditor	Enable JavaScript Editor	true
useTools	Enable tools	true
useLogFilter	Enable Log Filter	true
useCommandLine	Enable command-line	true
saveCmdHistory	Save command-line history to Window.localStorage	true
cmdHistoryMax	Max num of command-line history	100
timerLineColor	Line color of the timer / clock feature	'#0cf'
disableAllCommands	Disable all internal function commands	false
disableAllFeatures	Disable all features except log featureoverridable	false
mode	"kiosk" : Make the debugger window go full screen "noui" : No debugger window, log buffering only other : Normal debug window	''
lockCode	Lock code string. Run into protected mode and unlock with this code. The debug window will not appear until unlocked. Unlock: [ESC] -> [Ctrl] -> lockCode -> [Ctrl]	null
elmId	Debug window element id (The window is automatically generated in case of null)	null

// Extension

You can define your own commands and panels like below.

Extension Command

// Command definition
example.cmdHello = function(arg, tbl) {
  log('Hello, world!!');
};

// Command table definition
example.CMD_TBL = [
  {cmd: 'hello', fn: example.cmdHello, desc: 'extension command example'}
];

// Register the command table
dbg.x.addCmdTbl(example.CMD_TBL);

$ hello
-> Hello, world!

Extension Panel

// Called when the panel is first created.
// This is where you should do all of your normal static set up:
// create views, initialize data, etc.
// The argument panel is the base DOM element of the extension panel.
example.onCreate = function(panel) {
  log('onCreate P1');
var style = {
  'box-sizing': 'border-box',
  'width': '100%',
  'height': '100%',
  'paddingf': '4px'
};
var body = dbg.ui.addElement(panel, 'pre', style);
body.innerHTML = 'Extension Panel 1';
};

// Called when the panel is displayed.
example.onActive = function(panel) {
  log('onActive P1');
};

// Called when the panel is hidden.
example.onInActive = function(panel) {
  log('onInActive P1');
};

// Called when a file/text is fropped.
example.onDrop = function(text) {
  log('onDrop P1:\n' + text);
};

var panel1 = {
  name: '',
  onCreate: example.onCreate,
  onActive: example.onActive,
  onInActive: example.onInActive,
  onDrop: example.onDrop, // optional. See dbg.addDropHandler()
  fileloader: { // optional
    cb: example.onFileLoaded,
    mode: 'b64',
    decode: true
  }
};
var index = dbg.x.pnl.add(panel1);

Switch panels

dbg.x.pnl.switchPanel('');(by name)

Show / Hide

dbg.x.pnl.setHidden('', );

Remove a panel

dbg.x.pnl.remove('');(by name)

Get a panel

dbg.x.pnl.getPanel('');(by name)

dbg.x.pnl.getActivePanel();

Panel object structure:
{
  name: Panel Name String,
  onCreate: function(),
  onActive: function(),
  onInActive: function(),
  onDrop: function(),
  fileloader: Loader Definition,
  panel: Base DIV element
}

is Active

dbg.x.pnl.isActive('');

Exists

dbg.x.pnl.exists('');

Get the panel length

dbg.x.pnl.len();(visible only)
dbg.x.pnl.len(true);(all)

Append UI parts

dbg.ui.addElement(parentElement, 'TagName', style);
dbg.ui.addBtn(parentElement, 'LabelText', onclickfunction);
dbg.ui.addLabel(parentElement, 'LabelText', style);
dbg.ui.addTextInput(parentElement, width'50px', txtAlign'right'|'center'|'left', color'#fff', valdefault value, oninputfunction);

style:
e.g.,
style = {
  'width': '50px',
  'margin-top': '8px',
  'color': '#fff'
};

Change the button label

dbg.x.pnl.setBtnLabel('');

Please refer to extension-sample/debug-x-cmd.js and extension-sample/debug-x-panel.js for details.

// Lazy Load

Execute the following code from F12 console.

Note that it depends on Content-Security-Policy header.

s=document.createElement('script');s.src='https://debugjs.net/debug.js';document.body.appendChild(s);setTimeout('dbg.start()',1000);

for iframe

s=document.createElement('script');s.src='https://debugjs.net/debug.js';var f=document.getElementsByTagName('iframe')[0];f.contentDocument.body.appendChild(s);setTimeout('f.contentWindow.dbg.start()',1000);

from Base64 encoded script

(function() {var decodeB64=function(s){return decodeURIComponent(Array.prototype.map.call(atob(s), function(c) {return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);}).join(''));};var d=decodeB64('[BASE64_ENCODED_DEBUGJS]');var s=document.createElement('script');s.innerHTML=d;document.body.appendChild(s);})();dbg.start();

for iframe

(function() {var decodeB64=function(s){return decodeURIComponent(Array.prototype.map.call(atob(s), function(c) {return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);}).join(''));};var d=decodeB64('[BASE64_ENCODED_DEBUGJS]');var s=document.createElement('script');var f=document.getElementsByTagName('iframe')[0];f.contentDocument.body.appendChild(s);f.contentWindow.dbg.start();})();

// Browser Support

Browser	Version
Chrome	Current
Edge	Current
Firefox	Current
Internet Explorer	11 (partially 9+)
Opera	Current

// DEMO

log

log() log.d() log.i() ...

log with random message

dbg.led

console

You can switch the console.log() output between native function and debug.js's log() function as follows.

$ set consolelog native(default)
$ set consolelog me


console.time('timer3');	console.timeEnd('timer3');

Problematic Behavior

fakeError;

One-line JSON Sample for "json" command

Execute a command from the command line like below.
$ json {"foo": "abc", "bar": 1}

{"name": "John Smith", "age": 25, "city": "New York"}

{"firstName":"John","lastName":"Smith","isAlive":true,"age":25,"address":{"streetAddress":"21 2nd Street","city": "New York","state":"NY","postalCode":"10021-3100"},"phoneNumbers":[{"type":"home","number":"212 555-1234"},{"type":"office","number":"646 555-4567"},{"type":"mobile","number":"123 456-7890"}],"children":[],"spouse":null}

// AUTOMATED TESTING DEMO

With a pseudo mouse pointer, the library can perform automated web page manipulation!
<Sample Script>

#!BAT!
point init

# Input ------------------------
point move #text1
wait 500
point click
wait 200
point text "abc 123"
wait 500

point move #select1
wait 500
point click
wait 200
point selectoption set value 2
wait 500

point move #checkbox1
wait 500
point click
wait 500

point move #radio2
wait 500
point click
wait 500

point move bytext "r3"
wait 500
point click
wait 500

point move #textarea1
wait 500
point click
wait 200
point text "abcdefg\n1234567890"
wait 500

# Dragging --------------------
point move #box1
wait 500
point drag +230 +35
wait 500

point move #box2
wait 500
point drag -250 -30
wait 500

point move #box1
point drag -230 -35
wait 500

point move #box2
wait 500
point drag +250 +30
wait 500

# Test ------------------------
test init -name "Test1"

test set id "Test1-1"
point move #text1
point verify value == "abc 123"

point move #select1
point verify value == "2"

test set id "Test1-2"
point move #checkbox1
point verify -label "Checkbox" checked == true

point move #radio2
point verify -label "Radio" checked == true

test set id "Test1-3"
point move #textarea1
point verify value == "abcdefg\n1234567890"

test end
test result

point move center
point move -250 +0
point hint msg "<span style=\"font-size:24px;\">AUTO TESTING HAS BEEN COMPLETED!</span>\nTest Result: !TEST_COUNT! !RESUME!!STOP!"
pause -key -timeout 5s

point init

From the menu on the upper of the debugger window,

TOOL => <BAT> => Copy & Paste the above script => [ RUN ]

th1	th2	th3
td1(span1)(span2)	td2	td3
td4	td5	td6
td7	td8	td9
td10	td11	td12