Awesome
devtool-examples
Some examples of using devtool for a short talk/presentation at @nodeschool Toronto.
Intro
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.
Usage
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
Hello World
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.
npm run repl
Open a REPL with Node.js support:
devtool
npm run hello
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
Debugging / Profiling Node
npm run http
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/.
Browser APIs
npm run audio
Command-line app to convert MP3/OGG/etc to MP3 audio files:
devtool to-wav.js -qh < audio.mp3 > audio.wav
npm run canvas:dev
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
npm run canvas
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 Ideas
Other use cases:
- Debugging Gulp/Grunt scripts
- Web Speech (synthesis, recognition)
- Geolocation
- User Media (audio/video recording)
- Electron APIs like
browserWindow.capturePage
See Also
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