Quick Example of Chrome JavaScript Hot Swapping

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.