I was looking for a way to edit JavaScript in a browser, such as Firefox, on the fly and execute it. Firebug allows us to edit HTML and CSS on the fly but JavaScript is a pain. I have to go back to the source and modify that.
I don’t understand why the browser developer tools don’t allow editing. Is there a way to do it?
[Update]: Marked a new answer in 2015
Quick pointers:
- IE now provides one of the best dev/debugging experience
- Chrome provides IntelliSense while writing javaScript, which is cool
- FF works the same way as 2010..!
One can use all three (Firefox, Internet Explorer, and Chrome) browser consoles to update an existing function: say I had a function a() which used to do console.log(‘a’), I can go to console, redefine the function a() as alert('a') and execute it again to see an alert box.
When I had asked this question in 2010, browsers were not so great at debugging JavaScript and also I was probably unaware that a function can be replaced on the fly.
Advertisement
Answer
In Chrome: Open Chrome DevTools -> Sources panel, browse in left navigation, or press Ctrl+O to open files included in the page.
Then you can edit the file and press Ctrl+S to save the change, and see what happens with the new codes. I usually do it with the help of break points.
If you are debugging and want to save the changes to your local file system, you could right click on the navigation, and select Add folder to workspace:
In such case, if you save your changes in DevTools, the relevant file in your file system will be updated as well.
For example I add a folder to workspace, in it there is a 1.js:
Then I edit the JS file in DevTools, the change is updated in local file system immediately:
