Search code examples
javascriptfirefoxfirefox-developer-tools

I can't click buttons in Firefox when I edit the <body> of a page

When I use Firefox developer tools to edit the body of a webpage, the page buttons either disappear or stop functioning like in the example below. This does not happen in Chrome and all the buttons work fine as they suppose to. here are the steps that lead to the problem:

I go to the webpage that I need to work with, then I need to edit a few things in the page so I press Ctrl+Shift+C to open the dev tools, right click on <body> then Edit As HTML and change what I need to change and apply it and it works just fine with Chrome but in Firefox and other browsers the buttons stops working or disappear.

Here's the link to the example page. (This is only an example not the real page I'm working with, because the real one is in Arabic and requires more steps.)

Two screenshots of the results section of an online code editor. The first screenshot shows a line of text with a 'Click me' button below it. In the second one, labeled 'After edit', both the text and the button are gone.

Solution

  • This is because the Firefox DevTools obviously do the same as when you copy the outer HTML and then execute this

    document.body.outerHTML = `*copied HTML*`;

    inside the DevTools' console.

    That's why all the event handlers as well as iframe contents are gone after you finish editing the HTML, e.g. in this case you can't edit the code at the left side and there is no output shown at the right anymore.

    The Chrome DevTools seem to do something smarter here and recognize what has changed and only update those parts when you save the HTML. Therefore the output on the example page is still visible afterwards and the code can still be edited.

    I've filed an enhancement request for that, so the behavior in this case can get improved.