HTML5 Zone is brought to you in partnership with:

Raymond Camden is a developer evangelist for Adobe. His work focuses on web standards, mobile development and Cold Fusion. He's a published author and presents at conferences and user groups on a variety of topics. He is the happily married proud father of three kids and is somewhat of a Star Wars nut. Raymond can be reached via his blog at www.raymondcamden.com or via email at raymondcamden@gmail.com Raymond is a DZone MVB and is not an employee of DZone and has posted 254 posts at DZone. You can read more from them at their website. View Full User Profile

Quick Example of Chrome JavaScript Hot Swapping

02.12.2013
| 1984 views |
  • submit to reddit

This morning I read an nice blog entry about Chrome JavaScript hot swapping: The Chrome Javascript editor can do hot swapping. I liked the article but wanted to try it myself to see it in action.

First off - this feature does not work for JavaScript in HTML files. This is possibly obvious, and most likely you keep your JavaScript and HTML separate anyway, but I tend to create small demos that have the JavaScript on the same page as the HTML. If you do this and open up the HTML in the Chrome Sources tab, you won't be able to edit it.

I edited my code to include a JavaScript file instead of directly embedding it. Here's the simple example I started with.

$(document).ready(function(){

	var x = 0;

	window.setInterval(hb, 1000);

	function hb() {
		x++;
		console.log("hb is "+x);
	}
});

Note the simple interval. I increment a variable and log it to the console. I opened up the HTML in Chrome and confirmed it was logging as expected. I then switched over to my Resources tab and edited the file directly in Chrome.

Hit CTRL+S to save it and then switched back to my console.

Easy - and cool. But note that this change did not persist to the file system. Unless you've read the docs or read it on a blog entry, you'll have no idea until you reload. You can save it to the file system if you do Save As instead.

If you like this, be sure to check out what is coming soon to Brackets: Live Development with Brackets (experimental). As cool as it is to be able to edit in Chrome, I'd much rather do my editing with a real editor.

Published at DZone with permission of Raymond Camden, 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.)