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.v
( dbg.log.v )
message Output verbose log
The messages will be filtered out by default. Press [VRB] 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 name(opt)
Output log w/ elapsed time
log.t('foo', 'timer1')
-> 00:00:12.345 foo

log.t('foo')
-> 00:00:12.345 foo
default timer name will be used in case no name is given to the timer name.
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 = 
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.py';

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.py'); 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
------------------------------------------------------------- head
Sending Time : 2018-10-17 07:58:44.200 -07:00
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] 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.py)

#!/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():
  try:
    save_log()
    status = 'OK'
  except Exception as e:
    status = 'ERROR'

  result = '{"status":"' + status + '"}'
  print('Content-Type: application/json')
  print()
  print(result)

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: 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: 00:01:02.345 (⊿00:01:02.345)

dbg.time.split('timer1')
-> timer1: 00:01:03.345 (⊿00:00:01.000)

dbg.time.split('timer1', '[%n] epalsed time: %t (%lt)')
-> [timer1] elapsed time: 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: 00:01:02.345
default timer name will be used in case no arguments are specified.

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

dbg.time.end('timer1')
-> timer1: 00:01:03.345 (⊿00:00:01.000)

dbg.time.end('timer1', '[%n] epalsed time: %t (%lt)')
-> [timer1] elapsed time: 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 "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 "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.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)
<div>#p1</div>
<div>#p2</div>

Multi command execution

var commands = '

';

dbg.bat(commands); 

var arg = '';

dbg.bat(commands, arg); 
dbg.bat(commands, arg, , ); 
dbg.bat(commands, arg, '', ''); 
<div>#p3</div>
<div>#p4</div>


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 condtion 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 = '

';
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 posision 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.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.pos arg1: x
arg2: y
Set the debugger window position.
dbg.pos(, ); 
dbg.size arg1: width
arg2: height
Set the debugger window size.
dbg.size(, ); 
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.fin Finalize the test.
"running" status will be set to false.
This is the same as $test fin command.
dbg.test.fin(); 
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 fin
dbg.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 *] -> "*"
other      -> "object"

dbg.getType(); 
dbg.getBrowserType Get browser type info

e.g.,)
{
  name: 'Firefox',
  version: '50.0'
}
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.getRndStr arg1: min
arg2: max
arg3: type(opt) arg4: table(opt)
Get random string
min  : minimum length
max  : maximum length
type : Char type
       "Aa1!" default:"Aa1"
       A: Aplhabet (Upper case)
       a: Aplhabet (Lower case)
       1: Number
       !: Symbol
table: User defined char table (list of char)

dbg.getRndStr(8);
dbg.getRndStr(1, 8);
dbg.getRndStr(1, 8, 'Aa1!');
dbg.getRndStr(1, 8, 'Aa', [' ', '?']);
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.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.arr.count arg1: array
arg2: value
arg3: strict mode(opt)
Count the value of array.

var array = [];

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 = [];

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 = [];

dbg.arr.has(array, ); 
dbg.arr.has(array, , ); 
dbg.arr.toSet arg1: array
arg2: strict mode(opt)
Convert array to set.

var array = [];

dbg.arr.toSet(array); 
dbg.arr.toSet(array, ); 
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.http arg1: request
arg2: callback(opt)
Send an HTTP request.
var request = {
  url: '',
  method: '',
  data: '',
  async: ,
  cache: ,
  user: '',
  pass: '',
  contentType: '',
  userAgent: ''
};

dbg.http(request, callback); 

function callback(xhr, req) { // req = request
  var statusMsg = xhr.status + ' ' + xhr.statusText;
  if (xhr.status == 0) {
    log.e('cannot load: ' + statusMsg);
  } else {
    log(statusMsg);
  }
  var head = xhr.getAllResponseHeaders();
  var body = xhr.responseText.replace(/</g, '&lt;');
  body = body.replace(/>/g, '&gt;');
  if (head || body) {
    log(head + '\n'+ body);
  }
}
dbg.sleep ms Causes the currently executing thread to sleep
sleep: ms; 
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: 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.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 px Adjust height of textarea which is created by createResBox().
dbg.adjustResBox(); 
Cookie
dbg.cookie.getAll Returns a map object consists of key and value.
var cookies = dbg.cookie.getAll(); 
dbg.cookie.get key Returns a value of the specified key.
var val = dbg.cookie.get(''); 
dbg.cookie.set arg1: key
arg2: value
Set a value for the specified key.
dbg.cookie.set('', ''); 
dbg.cookie.delete key Delete the specified key.
dbg.cookie.delete(''); 
dbg.cookie.deleteAll Delete all cookies.
dbg.cookie.deleteAll(); 
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.hasOpt argument-string
key
Returns if the arguments has an option.
dbg.hasOpt('', ''); 
Initialization
dbg.init options Initialize debug.js
See also: // Options section.
"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
set arg1: index
arg2: string
Set the string to the specified index in the buffer
get index Returns the string in the specified index of the buffer
getAll Returns the all contents array 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();
->
aLF
bLF
cLF

// Commands
Name Arguments Description
alias name=command Define or display aliases.
$ alias [name=['command']]
base64 arg1: operation
arg2: string
Encodes / Decodes Base64 string.
operation: -e encode(default option)
           -d decode

$ base64 -e abcdefg
-> YWJjZGVmZw==

$ base64 -d YWJjZGVmZw==
-> 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.
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)
close function
Close a function
function
  measure: Screen Measure
  sys    : System Info
  html   : HTML Source Viewer
  dom    : Element Info
  js     : JavaScript Editor
  tool   : Tools
  ext    : Extension Panel
clock Open clock mode.
-sss option turns on milliseconds indication.
cls Clear log message.
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]
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
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 SAT 12:34:56.789 +0900

$ date 1549683296.789
-> 2019-02-09 SAT 12:34:56.789 +0900

$ date 1549683296.
-> 2019-02-09 SAT 12:34:56.000 +0900

$  date 2000/01/01 00:00:00
-> 2000-01-01 SAT 00:00:00.000 +0900 (946652400000)

$ date 20180620T123456.987
-> 2018-06-20 WED 12:34:56.987 +0900 (1529465696987)

$ date
-> 2017-07-15 SAT 14:18:23.892 +0900 (1500095903892) current time

$ date -iso
-> 20170715T141823.892 current time

$ date -iso 1500000000000
-> 20170714T114000.000
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 delay execution
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
event arg1: operation
arg2: tartget
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.
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] --user [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');"
js operation Operate JavaScript code in JS editor.
Execute the edited script.
$ js exec
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.
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  
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

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
$ log lv ALL
$ log lv NONE
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 T**30
-> 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
  html   : HTML Source Viewer
  dom    : Element Info
  js     : JavaScript Editor
  tool   : Tools
  ext    : Extension Panel

sub function (for tools)
  timer: Clock/Timer
  text : Text Checker
  file : File Loader
  html : HTML Editor
  bat  : Batch editor

sub function (for ext)
  panel index

option
  for timer: mode
    clock: Clock
    sw1  : Stopwatch (count up)
    sw2  : Stopwatch (count down)
  for tools.file: load format
    b64: Base64
    bin: Binary
p arg1: recursion level limit(opt)
arg2: object
Print object dump. (recursive)
$ 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: Set time-out value in milliseconds.(opt)
$ pause
click / key press

$ pause -key aaa [-timeout ms|1d2h3m4s500|T123456|T****00]
$ resume
$ resume -key aaa

$ pause -key aaa|bbb [-timeout ms|1d2h3m4s500|T123456|T****00]
$ 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 label labelText 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)
  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 label labelText 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 renderd

$ 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: -d number
      -s string

min: minimum number / length

max: maximum number / length
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|47
string
Encrypt/Decrypt string by ROT5, ROT13, ROT47.

operation: -e encode(default option)
           -d decode

-i Iput string
-n Number of shift

$ rot 13 -e -i "abc"
-> nop

$ rot 13 -e -n 1 -i "abc"
-> bcd

$ rot 13 -e -n (-1) -i "abc"
-> zab

$ rot 13 -d -i "nop"
$ rot 13 -d -n 1 -i "bcd"
$ rot 13 -d -n (-1) -i "zab"
-> abc
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
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:
  sw0: Mini stopwatch on the upper right of the debug window
  sw1: CountUp Timer in TOOL window
  sw2: CountDown Timer in TOOL window

operation:
  start: (sw0/sw1/sw2)
  stop : (sw0/sw1/sw2)
  reset: (sw0/sw1/sw2)
  split: (sw0/sw1/sw2)
  end  : (sw0/sw1/sw2)
  val  : (sw0/sw1/sw2)

e.g.,)
$ stopwatch start
$ stopwatch stop

$ stopwatch sw1 start
$ stopwatch sw1 split
$ stopwatch sw1 stop
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)
fin: Finalize the test execution.

$ 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 fin
$ 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)
  step : number of characters to set at a time (default=1)
  start: animation sequence start position
  end  : animation sequence end position
timediff ms|time-string Time duration calculator.

$ timediff 1 3
-> 0.002s

$ timediff 3 1
-> -0.002s

$ timediff 1000 3000
-> 2s

$ timediff 3.0 1.0
-> -2s

$ timediff "2019-02-09 12:00:00.000" "2019-02-10 13:02:03.456"
-> 1d 1h 2m 3s 456ms

$ timediff "2019-02-10 13:02:03.456" "2019-02-09 12:00:00.000"
-> -1d 1h 2m 3s 456ms
timer arg1: start / split / stop / list
arg2: timer name(opt)
Manipulate the timer.
timestr ms|time-string String <--> millis

$ timestr 1d2h3m4s500
-> 93784500

$ timestr 1d 2h 3m 4s 500
-> 93784500

$ timestr 93784500
-> 1d 2h 3m 4s 500ms

$ timestr 93784.500
-> 1d 2h 3m 4s 500ms
unalias name(s) Remove each NAME from the list of defined aliases
$ unalias name [name ...]
unicode arg1: operation
arg2: string
Displays Unicode code point(s) from text string / Decodes Unicode string from code point(s).
operation: -e encode(default option)
           -d decode

$ unicode -e abc
-> U+0041 U+0042 U+0043

$ 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 sequesnce.
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:
  min: 292 x 155 px
  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
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
->
DEC 128
HEX 0x80
BIN 1000 0000 (8 bits)

$ 0x20
->
HEX 0x20
DEC 32
BIN 10 0000 (6 bits)

$ 0b11110000
->
BIN 1111 0000 (8 bits)
DEC 240
HEX 0xF0
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
-> 02:00:00.000 (+1 Day)

$ 10:00 + 16:00 +
-> 26:00:00.000

$ 10:00 - 16:00
-> 18:00:00.000 (-1 Day)

$ 10:00 - 16:00 -
-> -06:00: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 WED 12:34:56.123 +0900 (1529465696123)
This is an alias of date 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.

// 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
HTM Live HTML source viewer
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
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
{
  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
}
popupOnError Popup the debug window when the following error occurs

scriptError: a JavaScript runtime error
loadError: .css / .js file load error
errorLog: log.e() has been called

{
  scriptError: true,
  loadError: true,
  errorLog: true
}
lines Number of lines to display 18
bufsize Log buffer size (lines) 300
width Debug window size (px) 532
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'
adjustX Debug window position x-adjustment (px) 20
adjustY Debug window position y-adjustment (px) 20
fontSize Log message font size (px) 12
fontFamily Font family 'Consolas, monospace'
fontColor General font color '#fff'
logColorV Verbose log color '#99bcc8'
logColorD Debug log color '#ccc'
logColorI Information log color '#9ef'
logColorW Warning log color '#eee000'
logColorE Error log color '#f66'
logColorS System log color '#fff'
clockColor Clock color '#8f0'
timerColor Timer color '#9ef'
timerColorExpr Count down timer color (Expired) '#fcc'
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'
backgdound Background style 'rgba(0,0,0,0.65)'
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 true
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
useWindowSizeInfo Show window size monitor true
useMouseStatusInfo Show mouse status monitor true
useKeyStatusInfo Show key status monitor true
useLed Show 8bit indicator ( ) true
useMsgDisplay Enable Fixed Position Message Display true
msgDisplayPos Display Position of the fixed position message ('left' / 'right') 'right'
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
useHtmlSrc Enable HTML Source viewer true
useElementInfo Enable DOM Element inspection true
useTools Enable tools true
useJsEditor Enable JavaScript Editor 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
target 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: 'extention 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.onCreateP1 = function(panel) {
  
};

// Called when the panel is displayed.
example.onActiveP1 = function(panel) {
  
};

// Called when the panel is hidden.
example.onInActiveP1 = function(panel) {
  
};

var panel1 = {
  name: '',
  onCreate: example.onCreateP1,
  onActive: example.onActiveP1,
  onInActive: example.onInActiveP1,
  fileloader: { // optional
    cb: example.onFileLoaded,
    mode: 'b64',
    decode: true
  }
};
var index = dbg.x.addPanel(panel1);
Change the button label
dbg.x.setBtnLabel('');
Get a panel (Base DIV element)
dbg.x.getPanel(index);
dbg.x.getActivePanel();
Remove a panel
dbg.x.removePanel();
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.

// Browser Support
Browser Version
Chrome Current
Edge Current
Firefox Current
Internet Explorer 11 (partially 9+)
Opera Current
// DEMO
log
log with random message
log() log.d() log.i() ...
dbg.led

time
dbg.time.start();
dbg.time.split();
dbg.time.end();
log w/ timing measurement
dbg.time.start('timer1');
dbg.time.split('timer1');
dbg.time.end('timer1');
log.t('elapsed time of %n', 'timer1');
dbg.time.start('timer2', '%t start [Timer Name = %n]');
dbg.time.split('timer2', '%n: split=%t/lap=%lt');
dbg.time.eEnd('timer2', '%n: split=%t/lap=%lt');
log.t('elapsed time of %n t=%t lap=%lt', 'timer2');

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>

From the menu on the upper of the debugger window,
TOOL => <BAT> => Copy & Paste the above script => [ RUN ]
See also: // BAT Execution section.
text1
text2
pass


tabindex=1
tabindex=2
tabindex=3
sp chr
sp chr
sp chr
checkbox1
checkbox2
radio1 r1 r2 r3 (w/o label)
radio2 (w/ label)
file
data-attribute
DIV
123
456
789
#div1

#table1
th1th2th3
td1(span1)(span2)td2td3
td4td5td6
td7td8td9
td10td11td12
.class1 .class1 .class2 .class1
#event1 (event test)
#box1
#box2
Link1  Link2 Link3 
a-div
File Loader b64
File Loader b64 decoded
File Loader Bin