Live edit browserified code in chrome devtools
You may have noticed that Remy Sharp never has to leave devtools, or have watched addy osmani improving productivity with chrome dev tools.
If not, you should and while you are at it read chrome-devtools-revolutions.
As I wanted to have this kind of workflow for our projects which bundle with browserify I did a bit of experimentation and found that this is indeed possible. A short video tutorial will demonstrate, but here are the main steps:
- bundle your code via browserify and make sure to have it include source maps, i.e.
browserify -d main.js > bundle.js - open the served page in chrome and open devtools, open the Sources tab and in there the left sidebar with it's own Sources tab
- right click any file in there (except the bundle itself) once to create a workspace folder and again to map the networked file to a system resource
- now you are able to edit the file in devtools, save it and have the changes persisted to your filesystem
- in order to have the bundle auto update, use any of the following tools or create your own server that bundles on demand