Unable to edit javascript in Chrome dev tools

Question

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 common feature. But it has been over a year since I have done a lot of javascript.

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