Some examples of using devtool for a short talk/presentation at @nodeschool Toronto.

devtool is a new command-line tool for debugging, developing and profiling Node applications built on Electron. We will also explore some novel use cases here, blending browser and Electron APIs.

Clone this module and install devtool globally:

git clone https://github.com/Jam3/devtool-examples.git
cd devtool-examples
npm install

# also grab devtool globally
npm install -g devtool

If you git clone this repo, you can use npm run to execute commands. Or you can install devtool globally and use it directly in shell.

Open a REPL with Node.js support:

devtool

Open the "Hello, World!" script in devtool:

devtool hello-world.js

Or with console redirection:

devtool hello-world.js --console

Or with file watching, for development:

devtool hello-world.js --watch

To debug an HTTP server:

devtool http.js --console --watch

Then try setting a breakpoint in one of the request handlers and loading http://localhost:8080/.

Command-line app to convert MP3/OGG/etc to MP3 audio files:

devtool to-wav.js -qh < audio.mp3 > audio.wav

Using the <canvas> API to programmatically render an image.

The development version shows a browser and DevTools window, renders the canvas to the DOM, and reloads on file save.

NODE_ENV=development devtool canvas.js --watch --show

The production version renders the canvas as a PNG file and writes it to process.stdout, without showing any GUI.

devtool canvas.js --quit --headless > image.png

Result:

Other use cases:

• Debugging Gulp/Grunt scripts
• Web Speech (synthesis, recognition)
• Geolocation
• User Media (audio/video recording)
• Electron APIs like browserWindow.capturePage

More inspiration built on top of Electron, which devtool could also be used for.

• tile-folder.js - tile a folder of images into a single images
• three-png-stream - stream ThreeJS canvas to a PNG file
• shadertoy-export - export ShaderToy as a high-resolution PNG