devdebug
- it fork devtool update the electron
Update: This tool is mostly obsolete as much of the philosophy has been brought into Node/devdebug core, see here for details.
If you wish to take over maintenance of this project, please ping me on twitter: @mattdesl.
Runs Node.js programs inside Chrome devdebugs (using Electron).
# runs a Node.js app in devdebug
devdebug src/app.js
This allows you to profile, debug and develop typical Node.js programs with some of the features of Chrome devdebugs. See my blog post Debugging Node.js With Chrome devdebugs for more details.
The recording below shows setting breakpoints within an HTTP server.
Note: This tool is still in early stages. So far it has only been tested on a couple of OSX machines. :)
Install
Install globally with npm
.
npm install devdebug -g
Usage
Run the command to open a new devdebugs window.
Usage:
devdebug [entry] [opts]
Options:
--watch, -w enable file watching (for development)
--quit, -q quit application on fatal errors
--console, -c redirect console logs to terminal
--index, -i specify a different index.html file
--poll, -p enable polling when --watch is given
--show, -s show the browser window (default false)
--headless, -h do not open the devdebugs window
--timeout, -t if specified, will close after X seconds
--break insert a breakpoint in entry point
--config a path to .devdebugrc config file
--verbose verbose Chromium logging
--version, -v log versions of underlying tools
--require, -r require path(s) before running entry
--browser-field, --bf resolve using "browser" field
--no-source-maps,
--no-sm disable source map generation
--no-node-timers,
--no-nt use browser timers
--no-browser-globals,
--no-bg removes window,document,navigator from required files
Examples:
# watch/dev a JS file, with a custom index.html
devdebug src/devdebug.js --index index.html --watch
# redirect console and pipe results to a file
devdebug main.js -q -c > foo.txt
# open a REPL window
devdebug
# pipe content into process.stdin
devdebug writer.js < README.md
# pass clean arg list to app.js
devdebug app.js --watch -- entry
# register with babel before requiring our app
devdebug -r babel-register app.js
You can specify --watch
multiple times to watch different files/globs. If a custom --index
is passed, it will also be watched for changes.
If --
is given, anything after it will be used as the arguments for the app's process.argv
. This way you can avoid polluting your program arguments with those specific to devdebug
.
The --browser-field
or --bf
makes the require()
statements respect the package.json "browser"
field.
The --no-browser-globals
or --no-bg
flag makes required modules behave a little more like Node, in that window
, navigator
, document
and some other browser globals will be undefined in required files. Note: the console and REPL may still show some of these globals.
Advanced Configuration
You can also specify advanced Electron/Node options in a rc
configuration file, such as devdebugs themes and V8 flags. See rc configuration for more details.
Further Documentation
See my blog post Debugging Node.js With Chrome devdebugs for more details.
Use Cases
Debugging / Profiling
For example, we can use this to profile and debug browserify, a node program that would not typically run inside Chrome devdebugs. Here we use console.profile()
, a feature of Chrome.
// build.js
var browserify = require('browserify');
// Start devdebugs profiling...
console.profile('build');
// Bundle some browser application
browserify('client.js').bundle(function (err, src) {
if (err) throw err;
// Finish devdebugs profiling...
console.profileEnd('build');
});
Now we can run devdebug
on our file:
devdebug build.js
Some screenshots of the profiling and debugging experience:
Note: Performance may vary between Node and Electron, so always take the results with a grain of salt!
You can also set an initial breakpoint with the --break
flag. This will insert a debugger
statement (hidden behind source maps) at the start of your entry file. This way, you can add breakpoints without having to reload the program or manually add them to your source code.
# run app but break on start
devdebug src/devdebug.js --break
REPL
We can also use the devdebugs Console as a basic Node REPL with some nice additional features. The require statements will be relative to your current working directory. You can run the command without any entry file, like this:
devdebug
When you don't specify an entry file, you can pipe JavaScript in to execute it in the browser. For example:
browserify client.js | devdebug -c
Browser APIs
You can also mix Node modules with browser APIs, such as Canvas and WebGL. See example/streetview.js and the respective script in package.json, which grabs a StreetView panorama with some Google Client APIs and writes the PNG image to process.stdout
.
For this, you may want to use the --bf
or --browser-field
flag so that modules like nets will use Web APIs where possible.
Example:
devdebug street.js --index street.html --quit --bf > street.png
Result:
Note: For the output to drain correctly, we need to close the window after the buffer has been written.
process.stdout.write(buffer, function () {
window.close();
});
See extract-streetview for a practical implementation of this idea built on devdebug
.
Grunt/Gulp/Mocha
To debug Grunt/Gulp/Mocha and other commands, you will need to pass the JavaScript file that runs them. You should also include --
to avoid any argument conflicts.
# same as "gulp watch"
devdebug node_modules/gulp/bin/gulp.js -c -- watch
# same as "grunt"
devdebug node_modules/grunt-cli/bin/grunt -c --
# run a mocha test
devdebug node_modules/mocha/bin/_mocha -qc -- ./tests/my-spec.js
Other Examples
See the example/ folder for more ideas, and the package.json scripts which run them.
- example/markdown.js - Pipes a
.md
file intoprocess.stdin
, then renders GitHub Flavored Markdown to a PNG image - example/es2015.js - ES2015 transpiling
- example/geolocate.js - prints current
[ latitude, longitude ]
tostdout
- example/http.js - a simple Node.js server that you can throw break points into
- example/tape-browser.js - demonstrates piping JavaScript directly into devdebug, e.g. for browser testing
Also see devdebug-examples for more ideas.
Features
This is built on Electron, so it includes the Console, Profile, Debugger, etc.
It also includes some additional features on top of Electron:
- Improved error handling (more detailed syntax errors in console)
- Improved source map support for required files
- Makes various Node features behave as expected, like
require.main
,process.argv
,process.stdin
and timers - Console redirection back to terminal (optional)
- File watching for development and quit-on-error flags for unit testing (e.g. continuous integration)
- Handles
process.exit
and error codes - Supports
"browser"
field resolution (optional) - Can hide browser globals (like
window
andnavigator
) for better compatibility with Node.js modules (optional) - Supports config files for V8 flags, color themes, and other options
Gotchas
Since this is running in Electron and Chromium, instead of Node, you might run into some oddities and gotchas.
window
and other browser APIs are present; this may affect modules using these globals to detect Browser/Node environments- The
--no-browser-globals
may help mitigate these issues
- The
- You must call
window.close()
to stop the process; apps will not quit on their own - If a native module does not work, you may need to rebuild it for the right version of Electron
- If you want to close or exit after writing to stderr/stdout, you should do so after a callback:
outStream.write(buf, callback)
setTimeout
,setInterval
and related functions are shimmed for better compatibility with Node.jstimers
process.stdin
does not work in Windows shells, see this Electron issue
Roadmap / Contributing
This project is experimental and has not been tested on a wide range of applications or Node/OS environments. If you want to help, please open an issue or submit a PR. Some outstanding areas to explore:
- Improving syntax error handling, e.g. adding it to Sources panel
- Exposing an API for programmatic usage
- Exploring native addons
- Testing against a wide range of Node.js applications and modules
You can git clone
and npm install
this repo to start working from source. Type npm run
to list all available commands.
See Also / Comparisons
hihat
If you like this, you might also like hihat. It is very similar, but more focused on running and testing browser applications. Hihat uses browserify to bundle everything into a single source file, and uses watchify for incremental file changes.
In some ways, devdebug
is a spiritual successor to hihat
. The architecture is cleaner and better suited for large Node/Electron applications.
iron-node
Another Electron-based debugger is iron-node. iron-node
includes better support for native addons and a complex graphical interface that shows your package.json
and README.md
.
Whereas devdebug
is more focused on the command-line, Unix-style piping/redirection, and Electron/Browser APIs for interesting use-cases (e.g. Google StreetView).
devdebug
shims various features to behave more like Node.js (like require.main
and process.exit
) and overrides the internal require
mechanism for source maps, improved error handling and "browser"
field resolution.
node-inspector
You may also like node-inspector, which uses remote debugging instead of building on top of Electron.
This means your code will run in a true Node environment, without any window
or other Browser/Electron APIs that may pollute scope and cause problems with certain modules. It has stronger support for large Node.js applications (i.e. native addons) and more control over the devdebugs instance (i.e. can inject breakpoints and support Network requests).
However, since it re-implements much of the debugging experience, it may feel clunky and fragile compared to developing inside the latest Chrome devdebugs (e.g. console.profile()
does not exist).
Whereas devdebug
aims to make the experience feel more familiar to those coming from Chrome devdebugs, and also promotes other features like Browser/Electron APIs.
License
MIT, see LICENSE.md for details.