Warn before refreshing the page if I've made changes in DevTools

[ststimac]

If I make edits in the Elements and Styles pane and refresh the page, I lose all my edits. A prompt somewhere to remind me that I've made edits would be beneficial.

Based on this tweet: https://twitter.com/ckirknielsen/status/1502410499299938313?s=20&t=RjOeCI-W07MtnAEfZ-QNrw

AB#38516969

[captainbrosset]

Thanks Stephanie. I'm sure this is a common source of frustration for users of DevTools, and would be good to have some safety net in place, as you suggested.

As an alternative to the prompt idea, how about this: storing edit sessions locally, in a queue, with each stored session being labeled with the date and url of the site. This way devtools wouldn't block page navigation (which could be intentional), but instead offer a way to salvage your previous work.
The queue could have a length of 1 too, meaning that you'd only ever be able to recover the last editing session. But we could also store more sessions, and also store them per url, if we wanted. But best to start simple.
I imagine the editing session would start as soon as the first edit takes place, and ends as soon as: either devtools gets closed, or a navigation event happens (going to another site, or refreshing the page).

[hxlnt]

I guess for me, it can be hard to keep track of whether I changed something from its authored value in the first place, which is how I interpreted @ststimac's proposal.

For example, I open a page, I nudge the font up, I nudge it back down, I nudge the padding here and there... it can be hard to keep track of whether there's a diff at all. Sometimes I'll think I put everything back the way it was or copy-and-pasted what I needed to, hit refresh, and realize that there must have been one crucial CSS change which is now lost. Whoops.

Regarding blocking navigation, it seems like use cases where you'd be refreshing the page (to capture network activity, etc.) would have little overlap with style editing. If the prompt only occurred when there are changes in Elements or in the Styles subpanel, that might capture the "don't let me lose my changes" use case without interfering with the "I need to refresh the page without being annoyed by a popup" use case?