guardian/frontend — pull request #4969 by mattosborn (2014-07-03 09:36:00+00:00)
Title: dev.js

dev.js:
- CSS Live reload
- weinre
- URL broadcasting (change all clients URL)

Usage:
- npm install
- `grunt csdevmode`
- dev.js is dropped in development which will attempt to connect to the devmode server (run with the grunt task above) once on page load
- browse to http://localhost:8007 to see connected clients, weinre and URL broadcast
- SASS compiler runs in the background and grunt task will automatically push CSS changes to clients over web sockets (usually takes 1-2 seconds from save)
- For URL broadcast put the path *without* domain (domain is prepended client-side)
- For mobile devices you can hit any page by IP (e.g. http://10.232.240.20:9000/ ) then URL broadcast to mass switch clients to desired page.

Notes:
- Uses ports 8005 to 8008
- 8005: target client to devmode socket (for live reload)
- 8006: target client to weinre server
- 8007: dev client to devmode http server (info and url broadcast)
- 8008: dev client to devmode socket (to push info updates)
- weinre does not show css in media queries, which is unfortunately most of our CSS
- Won't work with proxylocal as socket runs on a different port.

![image](https://cloud.githubusercontent.com/assets/960919/3467657/f6d29ade-0293-11e4-9370-11f15273bfab.png)

![image](https://cloud.githubusercontent.com/assets/960919/3467748/1d99f080-0295-11e4-8741-ec0ff798e375.png)