HTML5 Zone is brought to you in partnership with:

Jakub is a Java EE developer since 2005 and occasionally a project manager, working currently with Iterate AS. He's highly interested in developer productivity (and tools like Maven and AOP/AspectJ), web frameworks, Java portals, testing and performance and works a lot with IBM technologies. A native to Czech Republic, he lives now in Oslo, Norway. Jakub is a DZone MVB and is not an employee of DZone and has posted 149 posts at DZone. You can read more from them at their website. View Full User Profile

Tools for Editor – Browser Integration for Interactive JS/HTML Development

03.27.2013
| 2919 views |
  • submit to reddit

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.

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:

  1. Install Guard and the Remote Control Firefox plugin
  2. Add the R.C. icon to the Firefox toolbar (View – Toolbars – Customize, find the icon and drag it next to the locatin bar)
  3. Start Remote Control – click the icon, it shall turn from red to green
  4. (Optional) Test R.C.: telnet localhost 32000, type reload and ENTER, it shall return ‘{}’ and the currently open page shall be reloaded
  5. Run Guard to watch for changes: run guard in 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

How it works? Guard watches files for changes and whenever one is detected, it sends ‘reload’ to the port where the Remote Control plugin listens. (‘reload’ is i shortcut for window.location.reload(); you can send any javascript for execution.)

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.

I guess there is a better way to use it though… .

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:


Help!

Do you know any other good tools that can enable interactive web development? Let me know!



Published at DZone with permission of Jakub Holý, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Haiylal Jsidkal replied on Tue, 2014/03/04 - 2:53am

Wow! We are so lazy to even press F5 or Ctrl+F5!!

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.