Can the Firefox DevTools Inspector highlight be made sticky?

Question

I'm spending some time writing HTML and CSS, and am using the developer tools in Firefox 53. Specifically, the "HTML/DOM/CSS Inspector".

When you move the mouse over a chunk of HTML in the Inspector window, the corresponding rendered HTML element on the page is highlighted. Plus, there are some helpful grid lines and color overlays and whatnot also drawn over the page, all of which was a good decision on the part of the Mozilla developers. It shows how random divs and other elements might be overlapping, is great for showing where margins are collapsing, etc.

However, when I move the mouse off the HTML tree, all that useful highlighting and overlays vanish. Is there a way to get that highlighting/overlay to "stick"? For example, until I click on another HTML element, or reload the page, or... actively take some action other than simply moving my mouse?

Note that right-clicking the Inspector and selecting the ":hover" menu entry is most emphatically not what I'm looking for. I want to change the mouseover behavior of the Inspector, not that of the page.

(Now I'm going to pour another shot of whiskey and resume fighting with the Rules/Computed-versus-"browser styles" controls. Those were... not as well designed.)

Answer 1

The general highlighter can't be toggled to stay on the page, it only reacts on hovering the nodes.

Only some other highlighters are sticky, like the one for elements matching a specific CSS selector or the CSS grid highlighter, both located within the Rules side panel:

The CSS selector matching highlighter is currently (as of Firefox 53) the one that comes nearest to what you're looking for, though it's missing the grid lines.

Furthermore, there is already a request for adding a sticky element highlighter in Mozilla's bug tracker.