How to modify javascript code at run time?

Question

Is there a way to modify JavaScript code while debugging? Visual Studio has "Edit and Continue", and similar hot swapping of code can be done in Java and other languages. Can this be done with JavaScript, and if so, how?

Solution 1

Chrome, Safari, and some other WebKit-based browsers contain a feature in the Web Inspector known as Live Edit. If you go to the Scripts panel and are stopped on a breakpoint (or maybe even if not stopped on a breakpoint — I'm not sure), you can double click on a line and start editing that line. The changes you make will take effect on the script.

Solution 2

With Chrome Developer tools, this is super easy.

Just pop open inspector, click on the scripts tab, select which one you want from the dropdown menu and then you are free to edit the script and add in breakpoints. If you refresh the page, your breakpoints will stay there.

If you watch this talk but Paul Irish, he shows how you can edit a script on the fly

http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/

also good:

http://blip.tv/jsconf/jsconf2011-paul-irish-5382827

Solution 3

If you're talking about while debugging, it's very easy to modify the running code. In your debugging console, you can enter in Javascript expressions and it will run in the context of the window, which contains all the objects and functions of your code, so you can swap them out by redefining them.

Solution 4

Because JavaScript can modify the DOM the you essentially have to change the JavaScript file, save it and reload. For me, I like IE so I run the webpage in a browser NOT IN DEBUG mode. Then you can change the script files, SAVE them. switch back to the browser and reload (F5) to see your changes. Supposedly IE 11 has this ability (probably like Chrome which is essentially what I am doing, changing saving reloading from what I can tell) but I can't get it to find, let alone open a js file. Super poor UI. I'm guessing the browser to open the file icon is but it is always grayed out.

View more solutions

Comments

[theninjagreg]

Ok I didn't watch the video but I know how to use the console to execute javascript on the fly and change a function definition on the fly. But this is not what I desire. I'd like to be able to edit the script from within the debugger console, just like I might in my favorite javascript editor. Is that possible?

[puchu]

Are you sure? Live edit is broken in google chrome for about 2 years!

[icktoofay]

@puchu: You’re right, it doesn’t seem to work any more. It worked when I posted the answer four years ago…