7 ms·

The Chrome Javascript editor can do hot swapping

134 points by ensmotko 14y ago

jQueryIsAwesome 14y ago
And recently from the settings menu (low right corner) it also can change the user agent, reported resolution, the geo-location and emulate touch events. Chrome inspector is really something else.
- ensmotko 14y ago
  What amazes me is that it became a full blown editor and it seems like almost nobody noticed...
- purephase 14y ago
  It's for this reason that I've never understood why developers/designers stick with Firefox/Firebug. Don't get me wrong, I love FF, but the developer toolset in Chrome is amazing.
CWIZO 14y ago
It would be even better if it worked the other way around. Tell Chrome where my files are and it would watch them for changes. That way I can use my favourite editor/IDE and get the features you described.
- ensmotko 14y ago
  I agree, that would be useful. There are some extensions out there that try to do just that, but I didn't find them all that useful.
  - robertfw 14y ago
    What problems did you encounter with them?
    - ensmotko 14y ago
      I couldn't find one that worked consistently. Sometimes they detected source code changes and did a hot swap successfully, but other times something went wrong. And because of this inconsistency I never knew whether I changed the wrong peace of code or the extension didn't do it's job thus making the extension pretty useless...
- ryanackley 14y ago
  I wrote an extension that does both live reload and saving from devtools: http://tin.cr http://tin.cr. To address the comment below with regard to extensions not working, it's Chrome's fault. It will fail to hotswap JavaScript occasionally and it doesn't communicate the reason to the user or extensions built on top of it. Speaking from experience, hot swapping JS sounds much better than it actually is in practice. First, as mentioned above it randomly fails with no explanation from Chrome. Also, I find a lot of code I want to hotswap runs on DOM ready and assumes that the page has just been loaded. On the other hand, CSS hotswapping in Chrome works really well.
  - ensmotko 14y ago
    I think your extension was one of the few I tried. Sorry for the slight bashing, I appreciate what you're doing and I'd actually like to help you out in any way I can! Have you tried getting in touch with Chrome developers? Printing out info when hot swapping failed would really make you extension useful. Weirdly, I haven't noticed failures while using the Chrome editor. Might be that I just haven't logged enough hours with it yet, but so far it was working flawlessly.
  - rococo 14y ago
    That is fantastic, thank you for this.
  - wubbfindel 14y ago
    "I find a lot of code I want to hotswap runs on DOM ready and assumes that the page has just been loaded." Maybe it would be possible to put all your "setup" code into a single myscript.load() function and then when you've edited your js in chrome devtools, then call myscript.load() in the console to reboot all your DOM events and so on. Just an idea, completely not tested. P.S. Just tried your extension using vim to edit a Sass file, while compass watch is running, and your extension is watching my CSS output directory. Awesome to see changes in vim almost immediately appear in my browser! EDIT: Formatting. Adding P.S.
  - skrebbel 14y ago
    It probably works great for games, though put your render() function in the hotswapped code, and hooray. ctrl+s updates the view.
- bwm 14y ago
  We've done that with SCSS/Sass (http://usetakana.com http://usetakana.com). It's a Sublime plugin that compiles & hot-swaps in your stylesheet changes as you type.
  - byproxy 14y ago
    It says "Made for Mac", but as a Sublime plugin would it also work with Windows/Linux versions of Sublime? I'd give it a go, but I'm on Windows.
- jasonkester 14y ago
  Looks like it took about 12 hours for them to build, release, then blog about this for you: https://plus.google.com/u/0/+GoogleChromeDevelopers/posts/644qQuBKZeL https://plus.google.com/u/0/+GoogleChromeDevelopers/posts/64... Anything else you'd like from them while you have their ear?
  - shanelja 14y ago
    That's pretty awesome, I don't know if the two actions are related but if they are, it's really good to see the Chrome team: 1) Taking suggestions from sources like this so easily ("Hey, look what I just read on HN, we should do that!") 2) Implementing a change so quickly - most companies as large as Google can take days to approve a change in a product as widely used as Chrome. (I am aware that most users won't use the developer tools, but with any added functionality comes an added unforeseen bug.)
  - CWIZO 14y ago
    Wow. Really nice!
kevingadd 14y ago
When using this feature, be aware that the saved changes stick around indefinitely and can override updated JS being served by the host. I've had this one bite me repeatedly even though I never use the live editing feature due to the thoroughly broken keyboard focus implementation in Chrome. :/ IIRC if you do a force reload (right click the reload button with the inspector open) that bypasses cache, that should reliably destroy any local edits.
- ensmotko 14y ago
  There is also an option to disable cache in the settings.
jasonlotito 14y ago
Keep in mind that if you use Chrome's feature of reformatting minified JavaScript, it will not let you edit it. You can only edit the JavaScript in it's "natural" state.
roschdal 14y ago
I would really like to see hotswap in Firefox also.
- badgar 14y ago
  I wonder if the Firefox architecture would allow for hot swapping. V8 throws everything away after compiling - it goes all the way back and reparses the source if it needs to recompile anything. So I'm guessing it's already relatively well prepared for human-edited source code.
tikhonj 14y ago
This reminds me of using swank-js with Emacs, as demonstrated in a short Emacs Rocks! screencast[1]. [1]: http://emacsrocks.com/e11.html http://emacsrocks.com/e11.html Basically, you can hook Emacs up to the browser and interact with the page directly without having to refresh it. You can do some really cool stuff as shown at the end of the screencast. All this without having to sacrifice the inherent editing and programming power of Emacs. In the screencast, code gets reevaluated using a key command (C-x C-e), just like Emacs does for lisp. However, since Emacs is extremely programmable, it would be pretty easy to set it up to run any new code as soon as you finished modifying it, or on a timer, or however you like. As an aside, the rest of the Emacs Rocks! videos are also worth watching--they make it very clear why people really like Emacs. For example, episode 12 (about editing HTML with Emacs) not only shows how powerful some of the default modes are, but also how easy it is to customize commands.
- julian37 14y ago
  Shameless plug, my toy project is integrating the WebKit debugger with Emacs: https://github.com/jscheid/kite https://github.com/jscheid/kite Live editing (or "hot swapping" as it's called in the article) is my main, long-term objective. I can only devote so much time to it, and it's not as far along as I would like it to be. But, getting there... do take a look at the other branch if you're curious.
  - tikhonj 14y ago
    Okay, that's pretty awesome. I almost wish I was still doing web development so that I could play around with the great stuff coming out for it! If I ever get back to web development--and, the way these things usually go, it's probably inevitable--I'll definitely give kite a go.
  - seanmcdirmid 14y ago
    Hot swapping is a prerequisite, but not sufficient for live editing (or live programming as I call it). You also need to ensure that you can have responsive feedback about your edit via framework or programming model affordances. This is just hot swapping (as they claim), it's been around since before smalltalk.
martinced 14y ago
It's good. Iteration cycles drop like mad when you can do hot-swapping. Now of course Lisp dialects had that 50 years ago or so and... Any modern which can run JavaScript can run ClojureScript and hence already had hot-swapping ; ) But it's good to see non-Lispers getting there eventually ; )
swix 14y ago
Now we just need a way to connect sublime text 2 or 3 directly to the chrome-console, so that when you edit files in sublime, they are magically used instantly without page refresh - now that would be bliss....
photon_off 14y ago
The one flaw is lack of a persistent, multiple-line JS editor in the Console. I will boot FireBug just to use that.
- shocks 14y ago
  Huh? I'm a little confused. I thought you could do multi-line with the Chrome JS Console by hitting Shift-Enter?
  - photon_off 14y ago
    A notepad will persist your code and allow you to edit it easily, including newlines and tabs. It will also allow you to undo/redo. Try FireBug to see what I mean. Yes, in Chrome you can technically hit "Shift+Enter" anytime you want a line break, but you cannot tab. Regardless your script will disappear after you execute it. Yes, you can make what you just typed reappear by hitting the up arrow, but then it's again difficult to edit it. It also does not support undo/redo.
    - shocks 14y ago
      Ah I see what you mean, thanks! That'd a fantastic feature to have in Chrome.
  - coldtea 14y ago
    Why confused? Shift-Enter is a horrible way to work with multiline edits, so I wouldn't call Chrome's offering a "multiline editor" at all. Just give us a proper multiline editor with syntax highlighting, line numbers and all the rest already.
jamesrom 14y ago
This isn't news.. Chrome Developer Tools has been able to do this for years.
- ensmotko 14y ago
  It's true it isn't proper news. But it still seems there are a lot of developers out there that didn't know about this feature and this is definitely news to them.
stephen 14y ago
How about over the wire as part of a debugger protocol? Would love to see this in IDEs.
- pixel80r 14y ago
  This would be more easily possible when this[1] issue is fixed. At the moment only one debugger client can be connected at a time. So only one of chrome devtools, or a third party client can be connected. This is a problem because your IDE/text editor could have support(native or via a plugin) for the chrome debugger protocol[2] and update the js as you edit it, but you can't have the debugger open at the same time. [1] http://code.google.com/p/chromium/issues/detail?id=129539 http://code.google.com/p/chromium/issues/detail?id=129539 [2] https://developers.google.com/chrome-developer-tools/docs/debugger-protocol https://developers.google.com/chrome-developer-tools/docs/de...
shurcooL 14y ago
The files in the Sources tab do not appear to be editable for me. How do I make them editable? I can edit stuff in the Elements tab, but the article suggests it's possible to do so in the Sources tab...?
- ensmotko 14y ago
  They are editable for me. I tried it in Google Chrome 24.0.1312.69 and Chromium 24.0.1312.5. Both on Linux. Which version do you have?
  - shurcooL 14y ago
    Running Chrome 24.0.1312.57 (stable channel) on OS X. The files in Sources tab become editable if I turn "pretty print" option on and then immediately off. But afterwards, whatever changes I make have no effect on what's displayed. Even if I right click and "save" my changes, the original unmodified source is saved (despite there being something edited in the Sources tab)... So strange.
jasonlotito 14y ago
A bit off-topic, but I'm somewhat surprised that this is news. Not because it's not awesome, but that so many people seem to have been unaware of this feature. It makes me wonder how many things I know that I take for granted. How many simple things that I do, that I use, that others would find amazing. Like CTRL-A in bash (I'd mentioned it in passing, and someone was excited to find out about it); ESC-. in bash as well to insert the last argument, incredibly handy for quickly injecting long paths. I did a talk on tmux at work, and it went over extremely well with those who attended, much beter then expected. I guess the reason I think this way is I imagine I'm the dumbest person around, so I assume if I know something, everyone else must. And if I mention it, a part of me feels like I'll be exposing some weakness. It's stupid of me to think that way. It's a personal failing, I know. Even knowing it though won't change my way of thinking. Sorry for hijacking.
kyrra 14y ago
Brackets takes advantage of this already, right? http://brackets.io/ http://brackets.io/
haydenchambers 14y ago
is there any reason why this wouldn’t work for me? Versión 24.0.1312.57 mac
Uncompetative 14y ago
Pressing Control+S is not the immediate-update mechanism Bret Victor uses as a foundation to his sophisticated ideas about Learnable Programming: http://worrydream.com/LearnableProgramming/ http://worrydream.com/LearnableProgramming/ I don't understand how someone can link to his 'Inventing on Principle" video in the second paragraph of their web page and fail to comprehend the material it covers in just the first 6 minutes of its running time. Note, that Bret Victor despises the term 'live-coding' as a description of this work.

134 points by ensmotko 14y ago

And recently from the settings menu (low right corner) it also can change the user agent, reported resolution, the geo-location and emulate touch events. Chrome inspector is really something else.

ensmotko 14y ago
What amazes me is that it became a full blown editor and it seems like almost nobody noticed...
purephase 14y ago
It's for this reason that I've never understood why developers/designers stick with Firefox/Firebug. Don't get me wrong, I love FF, but the developer toolset in Chrome is amazing.

CWIZO 14y ago

It would be even better if it worked the other way around. Tell Chrome where my files are and it would watch them for changes. That way I can use my favourite editor/IDE and get the features you described.

ensmotko 14y ago
I agree, that would be useful. There are some extensions out there that try to do just that, but I didn't find them all that useful.
- robertfw 14y ago
  What problems did you encounter with them?
  - ensmotko 14y ago
    I couldn't find one that worked consistently. Sometimes they detected source code changes and did a hot swap successfully, but other times something went wrong. And because of this inconsistency I never knew whether I changed the wrong peace of code or the extension didn't do it's job thus making the extension pretty useless...
ryanackley 14y ago
I wrote an extension that does both live reload and saving from devtools: http://tin.cr http://tin.cr. To address the comment below with regard to extensions not working, it's Chrome's fault. It will fail to hotswap JavaScript occasionally and it doesn't communicate the reason to the user or extensions built on top of it. Speaking from experience, hot swapping JS sounds much better than it actually is in practice. First, as mentioned above it randomly fails with no explanation from Chrome. Also, I find a lot of code I want to hotswap runs on DOM ready and assumes that the page has just been loaded. On the other hand, CSS hotswapping in Chrome works really well.
- ensmotko 14y ago
  I think your extension was one of the few I tried. Sorry for the slight bashing, I appreciate what you're doing and I'd actually like to help you out in any way I can! Have you tried getting in touch with Chrome developers? Printing out info when hot swapping failed would really make you extension useful. Weirdly, I haven't noticed failures while using the Chrome editor. Might be that I just haven't logged enough hours with it yet, but so far it was working flawlessly.
- rococo 14y ago
  That is fantastic, thank you for this.
- wubbfindel 14y ago
  "I find a lot of code I want to hotswap runs on DOM ready and assumes that the page has just been loaded." Maybe it would be possible to put all your "setup" code into a single myscript.load() function and then when you've edited your js in chrome devtools, then call myscript.load() in the console to reboot all your DOM events and so on. Just an idea, completely not tested. P.S. Just tried your extension using vim to edit a Sass file, while compass watch is running, and your extension is watching my CSS output directory. Awesome to see changes in vim almost immediately appear in my browser! EDIT: Formatting. Adding P.S.
- skrebbel 14y ago
  It probably works great for games, though put your render() function in the hotswapped code, and hooray. ctrl+s updates the view.
bwm 14y ago
We've done that with SCSS/Sass (http://usetakana.com http://usetakana.com). It's a Sublime plugin that compiles & hot-swaps in your stylesheet changes as you type.
- byproxy 14y ago
  It says "Made for Mac", but as a Sublime plugin would it also work with Windows/Linux versions of Sublime? I'd give it a go, but I'm on Windows.
jasonkester 14y ago
Looks like it took about 12 hours for them to build, release, then blog about this for you: https://plus.google.com/u/0/+GoogleChromeDevelopers/posts/644qQuBKZeL https://plus.google.com/u/0/+GoogleChromeDevelopers/posts/64... Anything else you'd like from them while you have their ear?
- shanelja 14y ago
  That's pretty awesome, I don't know if the two actions are related but if they are, it's really good to see the Chrome team: 1) Taking suggestions from sources like this so easily ("Hey, look what I just read on HN, we should do that!") 2) Implementing a change so quickly - most companies as large as Google can take days to approve a change in a product as widely used as Chrome. (I am aware that most users won't use the developer tools, but with any added functionality comes an added unforeseen bug.)
- CWIZO 14y ago
  Wow. Really nice!

kevingadd 14y ago

When using this feature, be aware that the saved changes stick around indefinitely and can override updated JS being served by the host. I've had this one bite me repeatedly even though I never use the live editing feature due to the thoroughly broken keyboard focus implementation in Chrome. :/ IIRC if you do a force reload (right click the reload button with the inspector open) that bypasses cache, that should reliably destroy any local edits.

ensmotko 14y ago
There is also an option to disable cache in the settings.

jasonlotito 14y ago

Keep in mind that if you use Chrome's feature of reformatting minified JavaScript, it will not let you edit it. You can only edit the JavaScript in it's "natural" state.

roschdal 14y ago

I would really like to see hotswap in Firefox also.

badgar 14y ago
I wonder if the Firefox architecture would allow for hot swapping. V8 throws everything away after compiling - it goes all the way back and reparses the source if it needs to recompile anything. So I'm guessing it's already relatively well prepared for human-edited source code.

tikhonj 14y ago

This reminds me of using swank-js with Emacs, as demonstrated in a short Emacs Rocks! screencast[1]. [1]: http://emacsrocks.com/e11.html http://emacsrocks.com/e11.html Basically, you can hook Emacs up to the browser and interact with the page directly without having to refresh it. You can do some really cool stuff as shown at the end of the screencast. All this without having to sacrifice the inherent editing and programming power of Emacs. In the screencast, code gets reevaluated using a key command (C-x C-e), just like Emacs does for lisp. However, since Emacs is extremely programmable, it would be pretty easy to set it up to run any new code as soon as you finished modifying it, or on a timer, or however you like. As an aside, the rest of the Emacs Rocks! videos are also worth watching--they make it very clear why people really like Emacs. For example, episode 12 (about editing HTML with Emacs) not only shows how powerful some of the default modes are, but also how easy it is to customize commands.

julian37 14y ago
Shameless plug, my toy project is integrating the WebKit debugger with Emacs: https://github.com/jscheid/kite https://github.com/jscheid/kite Live editing (or "hot swapping" as it's called in the article) is my main, long-term objective. I can only devote so much time to it, and it's not as far along as I would like it to be. But, getting there... do take a look at the other branch if you're curious.
- tikhonj 14y ago
  Okay, that's pretty awesome. I almost wish I was still doing web development so that I could play around with the great stuff coming out for it! If I ever get back to web development--and, the way these things usually go, it's probably inevitable--I'll definitely give kite a go.
- seanmcdirmid 14y ago
  Hot swapping is a prerequisite, but not sufficient for live editing (or live programming as I call it). You also need to ensure that you can have responsive feedback about your edit via framework or programming model affordances. This is just hot swapping (as they claim), it's been around since before smalltalk.

martinced 14y ago

It's good. Iteration cycles drop like mad when you can do hot-swapping. Now of course Lisp dialects had that 50 years ago or so and... Any modern which can run JavaScript can run ClojureScript and hence already had hot-swapping ; ) But it's good to see non-Lispers getting there eventually ; )

swix 14y ago

Now we just need a way to connect sublime text 2 or 3 directly to the chrome-console, so that when you edit files in sublime, they are magically used instantly without page refresh - now that would be bliss....

photon_off 14y ago

The one flaw is lack of a persistent, multiple-line JS editor in the Console. I will boot FireBug just to use that.

shocks 14y ago
Huh? I'm a little confused. I thought you could do multi-line with the Chrome JS Console by hitting Shift-Enter?
- photon_off 14y ago
  A notepad will persist your code and allow you to edit it easily, including newlines and tabs. It will also allow you to undo/redo. Try FireBug to see what I mean. Yes, in Chrome you can technically hit "Shift+Enter" anytime you want a line break, but you cannot tab. Regardless your script will disappear after you execute it. Yes, you can make what you just typed reappear by hitting the up arrow, but then it's again difficult to edit it. It also does not support undo/redo.
  - shocks 14y ago
    Ah I see what you mean, thanks! That'd a fantastic feature to have in Chrome.
- coldtea 14y ago
  Why confused? Shift-Enter is a horrible way to work with multiline edits, so I wouldn't call Chrome's offering a "multiline editor" at all. Just give us a proper multiline editor with syntax highlighting, line numbers and all the rest already.

jamesrom 14y ago

This isn't news.. Chrome Developer Tools has been able to do this for years.

ensmotko 14y ago
It's true it isn't proper news. But it still seems there are a lot of developers out there that didn't know about this feature and this is definitely news to them.

stephen 14y ago

How about over the wire as part of a debugger protocol? Would love to see this in IDEs.

pixel80r 14y ago
This would be more easily possible when this[1] issue is fixed. At the moment only one debugger client can be connected at a time. So only one of chrome devtools, or a third party client can be connected. This is a problem because your IDE/text editor could have support(native or via a plugin) for the chrome debugger protocol[2] and update the js as you edit it, but you can't have the debugger open at the same time. [1] http://code.google.com/p/chromium/issues/detail?id=129539 http://code.google.com/p/chromium/issues/detail?id=129539 [2] https://developers.google.com/chrome-developer-tools/docs/debugger-protocol https://developers.google.com/chrome-developer-tools/docs/de...

shurcooL 14y ago

The files in the Sources tab do not appear to be editable for me. How do I make them editable? I can edit stuff in the Elements tab, but the article suggests it's possible to do so in the Sources tab...?

ensmotko 14y ago
They are editable for me. I tried it in Google Chrome 24.0.1312.69 and Chromium 24.0.1312.5. Both on Linux. Which version do you have?
- shurcooL 14y ago
  Running Chrome 24.0.1312.57 (stable channel) on OS X. The files in Sources tab become editable if I turn "pretty print" option on and then immediately off. But afterwards, whatever changes I make have no effect on what's displayed. Even if I right click and "save" my changes, the original unmodified source is saved (despite there being something edited in the Sources tab)... So strange.

jasonlotito 14y ago

A bit off-topic, but I'm somewhat surprised that this is news. Not because it's not awesome, but that so many people seem to have been unaware of this feature. It makes me wonder how many things I know that I take for granted. How many simple things that I do, that I use, that others would find amazing. Like CTRL-A in bash (I'd mentioned it in passing, and someone was excited to find out about it); ESC-. in bash as well to insert the last argument, incredibly handy for quickly injecting long paths. I did a talk on tmux at work, and it went over extremely well with those who attended, much beter then expected. I guess the reason I think this way is I imagine I'm the dumbest person around, so I assume if I know something, everyone else must. And if I mention it, a part of me feels like I'll be exposing some weakness. It's stupid of me to think that way. It's a personal failing, I know. Even knowing it though won't change my way of thinking. Sorry for hijacking.

kyrra 14y ago

Brackets takes advantage of this already, right? http://brackets.io/ http://brackets.io/

haydenchambers 14y ago

is there any reason why this wouldn’t work for me? Versión 24.0.1312.57 mac

Uncompetative 14y ago

Pressing Control+S is not the immediate-update mechanism Bret Victor uses as a foundation to his sophisticated ideas about Learnable Programming: http://worrydream.com/LearnableProgramming/ http://worrydream.com/LearnableProgramming/ I don't understand how someone can link to his 'Inventing on Principle" video in the second paragraph of their web page and fail to comprehend the material it covers in just the first 6 minutes of its running time. Note, that Bret Victor despises the term 'live-coding' as a description of this work.