Vdebugger NPM | npm.io

vDebugger ·

A Front-End JavaScript Breakpoint Debugger.

Make it possible to debug your JavaScript in browser, Node.js, JavaScriptCore or other JavaScript runtimes without any extra supports from host environments. Try vDebugger on playground.

Installation

vDebugger requires ES2015 for Generator support.

Install by NPM:

$ npm install vdebugger

import vDebugger from 'vdebugger';

Or, import from CDN:

<script src="https://unpkg.com/vdebugger@latest/dist/vdebugger.js"></script>
<!-- vDebugger will mount at global like window.vDebugger by default -->

Getting Started

import vDebugger from 'vdebugger';

const run = vDebugger.debug(`// here's line 1
let a = 1;
a = 2; // break at line 3 later
a = 3;
a = 4;
console.log(a); // output "4"
`, './test.js');
// the second argument is debuggerId for identifing the script,
// which normally is the script url

vDebugger.setBreakpoint('./test.js', 3); // break at line 3

run();

vDebugger.evaluate('console.log(a)'); // output "1"

vDebugger.resume('stepOver');

vDebugger.evaluate('console.log(a)'); // output "2"

vDebugger.resume(); // output "4"

Pre-Transform

vDebugger needs code transform for break, while transforming at runtime by default causes performance loss, and therefore, vDebugger provides a method called transform for code pre-transform at compilation.

/* ----- Compilation ----- */

// pre-transform at compilation, and pass the result to vDebugger.debug at runtime
import vDebugger from 'vdebugger';

const result = vDebugger.transform(`// here's line 1
let a = 1;
a = 2; // break at line 3 later
a = 3;
a = 4;
console.log(a); // output "4"
`, './test.js');
// the second argument is debuggerId for identifing the script,
// which normally is the script url

Pass the transformed result to vDebugger.debug at runtime.

/* ----- Runtime ----- */

// except for passing the transformed result to vDebugger.debug,
// runtime debugging has no difference from which without pre-transform
import vDebugger from 'vdebugger';

const run = vDebugger.debug(result);
// the result contains debuggerId, so the second argument is optional

vDebugger.setBreakpoint('./test.js', 3); // break at line 3

run();

vDebugger.evaluate('console.log(a)'); // output "1"

vDebugger.resume('stepOver');

vDebugger.evaluate('console.log(a)'); // output "2"

vDebugger.resume(); // output "4"