The current code that intercepts the click to make it inspect the clicked element works in most cases: it reliably prevents actions that would result from the click.
I think that if a site does not include JavaScript (or no click handlers) this reliably works in all cases.
Workaround
Using alt+click to inspect seems to work in all such cases I've seen, probably because it has specific browser behavior by default: download the underlying resource, but can still be overridden.
Unwanted navigation inside frame
It often occurs that within a site links do still result in a navigation of the frame, which currently can break the editor even when you can navigate back.
This can result in 2 things:
JS scope is preserved, but most of page content is updated. While this doesn't break the editor, it's not a consistent experience with most other sites. It can also prevent you from inspecting certain menus.
It does an actual navigation in the frame. This breaks the editor by destroying the state of inspected elements, which has to be in sync with the main window. This is possibly because link handling is overwritten to work with an earlier event than mouse up.
Unwanted modification of DOM
For example, the accordion in Bootstrap will toggle on an inspection click, whereas a very similar accordion in CoreUI doesn't.
For this Bootstrap accordion, you do get an inspection matching the latest state. But there's also instances where your inspection is not on the new state (rarer so can't think of an example atm).
How to make this more robust?
Since this depends on many possible variations of markup and scripts of the inspected page, it's probably not possible to make the behavior consistent in 100% of cases. But perhaps more could be done to handle some common cases.
Some instances of this issue are probably caused by anti-patterns, such as using mousedown instead of mouseup.
The current code that intercepts the click to make it inspect the clicked element works in most cases: it reliably prevents actions that would result from the click.
I think that if a site does not include JavaScript (or no click handlers) this reliably works in all cases.
Workaround
Using
alt+clickto inspect seems to work in all such cases I've seen, probably because it has specific browser behavior by default: download the underlying resource, but can still be overridden.Unwanted navigation inside frame
It often occurs that within a site links do still result in a navigation of the frame, which currently can break the editor even when you can navigate back.
This can result in 2 things:
Unwanted modification of DOM
For example, the accordion in Bootstrap will toggle on an inspection click, whereas a very similar accordion in CoreUI doesn't.
For this Bootstrap accordion, you do get an inspection matching the latest state. But there's also instances where your inspection is not on the new state (rarer so can't think of an example atm).
How to make this more robust?
Since this depends on many possible variations of markup and scripts of the inspected page, it's probably not possible to make the behavior consistent in 100% of cases. But perhaps more could be done to handle some common cases.
Some instances of this issue are probably caused by anti-patterns, such as using
mousedowninstead ofmouseup.