grvgr / devsync

sync edits in chrome devtools, with localhost

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

The hack is basically a bridge b/w chrome devtools and localhost editing. A web developer spends much time on devtools (if he uses chrome). Each time, he tries some changes on the site, replicates them to files on the localhost, and then again has to switch back to the browser and do refresh. The hack tries to make that cycle simpler. You do your edits on devtools, once you are ready, push a button (will try to make it a keyboard shortcut) and the changes will go back to the localhost files (js and css changes) and site itself will be refreshed. If one edits the localhost file, again the page on the browser is refreshed (just Alt+Tab to it).

How to make it work:

Start with http://code.google.com/chrome/devtools/docs/contributing.html

The devtools needs some hacks for this to work, its included as such in the repo (Will soon try to get genrate a patch for it).

On the localhost side, we need a node js app (ex: upload.js). Hopefully an npm is coming soon. Run it from root of your application.

After starting the backend server, start chrome with the following options.

./chrome --unlimited-quota-for-files --debug-devtools-frontend=<path to the devtools in this hack>

Remember, the chrome binary is the one you downloaded from initially.

How it works:
There are basically two parts to the hack. One is to figure out the files changed, in the devtool, and update them on the localhost. Second part is to watch for any changes happening in the localhost, and if thats the case, refresh the browser.

For first part, we hack into devtools, to figure out the files, and upload them to a nodejs app, which based on the path provided, and the current directory, updates the files.

For second part, we use socket.io library, in nodejs, to talk with the chrome devtools via websockets.

I know, pretty ugly hack :)


todo:
- cleanup and organize code
- some way to automate much of the stuff
- npm

About

sync edits in chrome devtools, with localhost