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

1
votes

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.

1
javascriptfirefoxfirefox-developer-tools
Please edit your question to provide a link to the website and the exact steps you do to get the error. – Sebastian Zartner
What's actually the reason you want to edit the whole page's HTML output within the browser? On the next page reload the changes are gone again, anyway. You still need to make those changes in the server-side script to save them permanently. – Sebastian Zartner

1 Answers

2
votes

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.