Over a million developers have joined DZone.
Platinum Partner

Quick Example of Chrome JavaScript Hot Swapping

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

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.


	var x = 0;

	window.setInterval(hb, 1000);

	function hb() {
		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.

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


Published at DZone with permission of Raymond Camden , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}