Editing Javascript in Chrome real time, like Edit and Continue in Visual Studio

10,972

You may want to try Chrome Dev Tools for Java project. It is an Eclipse plugin for debugging JavaScript in Chrome that could be used together with a JavaScript IDE plugin. This way you edit and debug and live edit the very same file (see text).

Share:
10,972
GravityWell
Author by

GravityWell

Updated on June 07, 2022

Comments

  • GravityWell
    GravityWell almost 2 years

    Chrome can edit Javascript on the fly, without a full page refresh, similar to Visual Studio's edit and continue ability for code behind files. This helps when prototyping javascript functions or snippets.

    You have to hit a breakpoint, then hit the edit button. Then the current function will be unrolled, then you can step back into it with your changes in effect. Not nearly as nice as VS edit and continue, but at least it's something. Also it appears some things cannot be changed.

    Is there any other tool that can do live javascript edits, or is there a better way? Visual Studio 2010 does not as far as I can tell.

    function test1() {
    
        debugger;
    
        var data_array = [];
        var newvar1 = newfunc()+'dc'; // ok - can edit
        var newvar2 = "hey2"; // ok - can edit
        var newvar3 = 4; // ok can edit
    
        var someobj = {1:"hey2", 2:"string2"}; // no - can not edit values after executed once
        var word_array = ["hello", "goodbye", "adios"]; // no - can not edit values after executed once
    
        for (var counter = 0; counter < 500; counter++) {
            data_array[counter] = counter + word_array[Math.floor(Math.random() * (word_array.length))];
        }
    
    }
    
    
    function newfunc() {
         return "yes44";   
    }
    

    Similar questions:
    Using Google Chrome to debug and edit javascript embedded in HTML page
    Editing in the Chrome debugger

    Autosave plugin http://www.google.com/intl/cs-CZ/events/io/2010/sessions/chrome-developer-tools.html Googles presentation: https://github.com/NV/chrome-devtools-autosave

  • GravityWell
    GravityWell about 12 years
    Besides using straight Chrome, this is probably the only other way to get live edit functionality, although to be fair, this technique also uses Chrome.
  • beefeather
    beefeather about 12 years
    Technically it's V8 that provides live edit. So theoretically any V8-based application would give you such experience. Unfortunately, Node.JS (the only application I know of) has some tricks that prevents live edit.
  • wolfstevent
    wolfstevent about 10 years
    The Chrome Dev Tools for Java project page says: The project is no longer actively maintained code.google.com/p/chromedevtools