Editing in the Chrome debugger
You can use the built-in JavaScript debugger in Chrome Developer Tools under the "Scripts" tab (in later versions it's the "Sources" tab), but changes you apply to the code are expressed only at the time when execution passes through them. That means changes to the code that is not running after the page loads will not have an effect. Unlike e.g. changes to the code residing in the mouseover handlers, which you can test on the fly.
There is a video from Google I/O 2010 event introducing other capabilities of Chrome Developer Tools.
Editing Javascript using Chrome Developer Tools
I know this question is stale, but I just had a similar problem and found the solution.
If you have the file prettified, Chrome will not allow edits. I turned it off and was able to edit. Willing to bet this is/was your problem.
Chrome Dev Tools - Modify javascript and reload
This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate.
Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code.
But as everyone has said, next reload the changes will be gone - at least it lets you run some slightly modified JS client side.
Editing the Google Chrome Developer Tools Itself
Hi the link below contains all information for someone who would want to hack,debug or modify the Chrome developer tools. The document quotes quite nicely somewhere "You can inspect the inspector.".
I believe this document does not have the ultimate latest data but it's relevant to the question above. I tried out the initial steps mentioned above and they worked fine.
https://docs.google.com/document/d/1WNF-KqRSzPLUUfZqQG5AFeU_Ll8TfWYcJasa_XGf7ro
Using Google Chrome to debug and edit javascript embedded in HTML page
Actually chrome allows to do that, choose HTML files in Sources tab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <script>
tags. Also you can add debugger;
command to script what you want to debug. For example:
<script>
// some code
debugger; // This is your breakpoint
// other code you will able to debugg
</script>
Don't forget to remove debugger;
's when you want to release your website.
Editing Javascript in Chrome real time, like Edit and Continue in Visual Studio
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).
Related Topics
Contain Form Within a Bootstrap Popover
Changing the Default Title of Confirm() in JavaScript
React - Getting a Component from a Dom Element for Debugging
Angularjs: How to Run Additional Code After Angularjs Has Rendered a Template
Using Lodash .Groupby. How to Add Your Own Keys for Grouped Output
Script Tag in Angular2 Template/Hook When Template Dom Is Loaded
How to Import a CSS File in a React Component
How to Make a JSON Call to an Url
Jquery - Create Hidden Form Element on the Fly
How to Register Event with Useeffect Hooks
Firebase Callable Function + Cors
Thickness of Lines Using Three.Linebasicmaterial
Background-Color Hex to JavaScript Variable
Share Variables Between Files in Node.Js
Access Microphone from a Browser - JavaScript
How to Round Numbers into a Reader Friendly Format? (E.G. $1.1K)