I don’t understand why the browser developer tools don’t allow editing. Is there a way to do it?
Marked a new answer in 2015
- IE now provides one of the best dev/debugging experience
- 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
alert('a') and execute it again to see an alert box.
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:
Sure, I found Execute JS (for firefox) to be helpful at times, and I think it’s what you’re looking for:
Chrome has a pretty strong feature for making changes to JS code. You basically set some breakpoints and once hit you edit JS at your will. More info and demo — where Paul Irish fixes a broken page.
In case of FF you can use Developer Edition:
Stop, step through, examine and modify the
step1: Launch the development tool
You can now jump straight in and edit your code. Chrome also offers a useful function list to help you locate the right line â€” press Ctrl+Shift+O / Cmd+Shift+O
Hit Ctrl+S / Cmd+S to save your changes. This updates the file in memory and applies the changes immediately. Note however, that code wonâ€™t start again so changes to initialization variables wonâ€™t be affected.
To save the changes to the original file, right-click the editor and select Save or Save Asâ€¦. Once done, you can refresh the page and the script will restart
Did your update cause problem? Right-click the editor and select Local modificationsâ€¦. The lower pane displays all recent changes and allows you to revert back.
setp1: Launch Scratchpad
Once you’ve written your code, select the code you want to run. If you don’t select anything, all the code in the window will be run. Then choose the way you want the code to run using the buttons along the top, using the Execute menu, or using the context menu. The code is executed in the scope of the currently selected tab. Any variables you declare outside of a function will be added to the global object for that tab.
There are four execution options available.
- Reload and Run
Since your bounty comment is asking to fix a broken website, I’d use the above tools to create a JS snippet that fixes your problem. After that I wouldn’t want to execute the code in the developer toolbar every time.
So… once you’ve created this JS snippet that fixes the site for you, you could use GreaseMonkey(plugin) to execute the site fixing script on each visit. That way you can use the site normally and don’t need to execute it manually every page load.
In Mozilla version 37.0.1 after open developer tool by click on console edit your java script code at right side of tool window and after finish editing click on run to test your java script code in browser.