CODEWITHSUNDEEP
windowsfirefoxfirefox-developer-tools
Daniel Kaplan
Daniel Kaplan

Reputation: 67310

How do you see your html edits after you reload (Firefox DevTools)?

I feel like this should be really easy to find if it exists, but I've been googling for 10 minutes. I don't see it mentioned in the official documentation.

I'm trying to troubleshoot a solution to a problem. The solution requires rearranging the order the head child elements.

It's trivial to make that change with Firefox devtools, but I don't know how to view the page with those changes; if I reload (ctrl+r), the HTML goes back to the server version. Does this feature exist?

FWIW, I can find ways of doing this for CSS and JS changes.

Upvotes: 1

Views: 1562

Answers (1)

Sebastian Zartner
Sebastian Zartner

Reputation: 20085

There is currently (as of Firefox 92) no such feature of re-applying HTML changes.

What I found is a feature request in Mozilla's bug tracker.

At the moment, the only workaround for this is to directly transfer the changes on the server side script creating the HTML output once you've done them in the Inspector.

Note: It requires some heuristics to re-apply changes to HTML in the browser because the resources served over the network could change in the meantime. For CSS, the simple DevTools solution is to replace a file entirely by the saved one. For JavaScript, they have some heuristics to recognize where a line moved when code has changed between two reloads. Though those solutions cannot be transferred to HTML easily, as it is generated dynamically most of the time.

Upvotes: 2

Related Questions