Over a million developers have joined DZone.

Quick Example of Chrome JavaScript Hot Swapping

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

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 by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".


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 }}