I am attempting to edit some javascript code that is in the html of the page (not an imported js file). I am able to set break points and step through them, but I can not edit the javascript during the execution or before/after execution. I prettified ({}) and un-prettified the files. The code piece is not minified in this section.

1. Can I do this?
2. Does it matter that the code is inside an attached event. Ie a click etc.
3. I am useing jquery obviously.

I could have sworn this used to be a mon feature. But it has been over a year since I have done a lot of javascript.

I am attempting to edit some javascript code that is in the html of the page (not an imported js file). I am able to set break points and step through them, but I can not edit the javascript during the execution or before/after execution. I prettified ({}) and un-prettified the files. The code piece is not minified in this section.

1. Can I do this?
2. Does it matter that the code is inside an attached event. Ie a click etc.
3. I am useing jquery obviously.

I could have sworn this used to be a mon feature. But it has been over a year since I have done a lot of javascript.

• javascript
• google-chrome
• google-chrome-devtools

• Is the javascript in existing html page , or only run at console ? – guest271314 Commented Feb 27, 2016 at 20:01
• The javascript is in the html of the page. – Dan Commented Feb 27, 2016 at 20:02
• See stackoverflow./questions/18077217/… , – guest271314 Commented Feb 27, 2016 at 20:43
• 1 The problem with that is all of them are creating full "workspaces" and doing a lot more then what I want. I know that I used to be able to make small changes to my javascript and see it work from the dev tools. Is this just not possible any more? do I have to create a full workspace just to do simple changes? – Dan Commented Feb 27, 2016 at 21:01
• 1 It does definitely still work. Try moving your code into a separate JavaScript file. After prettifying you won't be able to edit "script.js:formatted", but you can edit the minified "script.js" file. – Matt Zeunert Commented Feb 27, 2016 at 23:08

1 Answer 1

Using chromium / chrome there are several methods to modify the html of an existing document. At devtools

• Select Elements tab, right click on the element to modify, select Edit as HTML , make modifications in frame containing element, then click outside of editor frame

• Select Sources tab, select Snippets tab, right click and select New , write javascript, to execute in existing window press ▶ at right panel to run javascript in Snippets middle panel in existing window. For example if $("body").on("click", function() {alert(123)}) is added as a Snippet clicking body element should call alert(123). The event should also be listed in Event Listeners at right panel of devtools when inspecting element. Removing the listener may be somewhat more challenging; even if you click remove when hovering over the listener at right panel, as the event is already attached to the element. The simplest method would be to add a namespace to the event $("body").on("click.abcnamespace", handler), then call $("body").off("click.abcnamespace")

• Modifying text existing handlers will not automatically affect , or cancel the event handler previously attached to the element. The simplest approach would be to copy and save existing javascript containing event handler, select Elements tab , right click on element that has event listener, select Event Listeners at right panel, when hovering over the window, document or HTMLElement having event attached a button should be displayed that says Remove. Click that button to remove the event listener. You should then be able to modify the saved event listener and add it back to the existing document with modifications being applied