Tools for Editor - Browser Integration for Interactive JS/HTML Development
Chrome Development Tools and similar ones are great for interactive, exploratory coding of JavaScript, HTML, and CSS - but the changes aren't persistent and the tools haven't the power of a programmer's editor. I'd like to be able to use a powerful editor yet be able to see changes to JS/HTML/CSS without having to save-[compile]-reload and I want to be able to execute pieces of JS in the context of the browser. Fortunately, there are ways to get at least some of this and it is getting continually better. Let's see what tools we have now.
These tools usually use either remoting capabilities of the browser or a long-polling connection to the web site, sending and executing JavaScript.
To use:
You could use any build tool other than Guard as long as it can execute commands when files change, f.ex. the JavaScript-based Grunt.
It's main disadvantage for me was that it required a particular structure of the project.
In theory it should also be possible to run a custom http server and set up and run livereload manually to update the browser with your changes on the fly but I fialed to get that setup up when I tried due to problems with LiveReload, which have been fixed since that.
Disadvantages: the scripts jQuery and /skewer must be to every page that should support live reloading (though you can use some tricks to insert the dependecies into a page from the browser).
Here is a 1 min demo of editing CSS in SublimeText with the changes being immediately applied to Firefox:
http://www.youtube.com/watch?feature=player_embedded&v=UrnB8lZnx4I
(Perhaps Cloud9 IDE?)
These tools usually use either remoting capabilities of the browser or a long-polling connection to the web site, sending and executing JavaScript.
The Present
Update 4/13: LightTable seems to support a lot of live editing stuff (more in a blog post)Sublime Web Inspector
Sublime Web Inspector is a recently released addon for Sublime Text that supports live reload of js/css/less upon save (and maybe even without saving) and enables JS debugging and evaluation of a JS selection. Check out this 8 min demo of the reloading and debugging capabilities (I recommend to jump forward when the author is typing).Limited but working: Auto-reload with guard and Remote Control
Using the Firefox plugin Remote Control and a build tool such as Guard, a page can be automatically reloaded whenever a js/html/css/... file changes.To use:
- Install Guard and the Remote Control Firefox plugin
- Add the R.C. icon to the Firefox toolbar (View - Toolbars - Customize, find the icon and drag it next to the locatin bar)
- Start Remote Control - click the icon, it shall turn from red to green
- (Optional) Test R.C.:
telnet localhost 32000, typereloadand ENTER, it shall return '{}' and the currently open page shall be reloaded - Run Guard to watch for changes: run
guardin your project directory with configuration such as this:# Guardfile guard 'shell' do watch(%r{.*\.(js|html|css)$}) {|m| `echo "Reloading #{m[0]}"; echo reload | nc -c localhost 32000`} end
You could use any build tool other than Guard as long as it can execute commands when files change, f.ex. the JavaScript-based Grunt.
Disadvantages
- The page is reloaded => all state is lost, plus it might be slow
- You'd still need to use the Firebug/Chrome dev tool console to experiment with JS, i.e. no support for evaluating snippets of JS in the context of the browser
The LiveReload Chrome Plugin
The LiveReload plugin for Chrome:Provides Chrome browser integration for the official LiveReload apps (Mac & Windows) and third-parties like guard-livereload and yeoman.I guess you could use it without the official (commercial) LR apps but I hadn't time to try it.
Yeoman & Live Reloading
Yeoman is a build and project tool with built-in live preview server and support for LiveReload.It's main disadvantage for me was that it required a particular structure of the project.
In theory it should also be possible to run a custom http server and set up and run livereload manually to update the browser with your changes on the fly but I fialed to get that setup up when I tried due to problems with LiveReload, which have been fixed since that.
Emacs-specific Solutions
Simple, powerful but buggy: skewer-mode
skever-mode tries to achieve the same as swank-js but in pure elisp with a trivial setup. It is possible to evaluate JS in the context of the browser etc. It looks nice but I have encountered some issues:- It seemed to only work for JS, not for HTML.
- The built-in server failed to pick up changes to HTML and I haven't found a way to force it to reload them other than restarting Emacs.
Disadvantages: the scripts jQuery and /skewer must be to every page that should support live reloading (though you can use some tricks to insert the dependecies into a page from the browser).
Powerful but complex to set up: Swank-js
Swank-js is promissing but very complex setup, according to the reports, so I haven't tried it. Also there hasn't been much development lately.The Bright Future
Future Firefox DevTools: Remote control everything, code-in-browser
According to the post Future Firefox DevTools, breaing the editor <> browser <> devtools cycle is the number 1 request. The team is exploring mainly two options and that is authoring in the browser with an incorporated editor and making all the dev tools and Firefox controllable from external applications.Here is a 1 min demo of editing CSS in SublimeText with the changes being immediately applied to Firefox:
http://www.youtube.com/watch?feature=player_embedded&v=UrnB8lZnx4I
Related
Our web development workflow is completely broken - a good description of the pains of web development, i.e. the large distance between an app in a browser and the JS/LESS/.. files creating it, and a proposal of a better world with good, unified remote debugging tools integrated into our favorite editorsHelp!
Do you know any other good tools that can enable interactive web development? Let me know!(Perhaps Cloud9 IDE?)