Chrome: Inspect element tree position lost after page reload

Question

during localhost developing I inspenct element and add some css rule, when it's ok I write changes in css file, after this I reload page to see if all is in the exact position, but tree position of elements are lost during refresh! Every time I inspect element to find my last position in the code again.

In the past other chrome version save the tree structure and after page reload it returns to last element clicked by me in inspect element section. How can do it?

Use the extension "DomFlags". – aderchox Jul 09 '21 at 18:19 — aderchox, Jul 09 '21 at 18:19

score 0 · Answer 1 · answered Sep 15 '21 at 14:37

I agree sometimes it's annoying to move down the tree at every refresh. One workaround is to use ctrl + shift + c shortcut and target the element with your mouse.

On top of that, I've made a AutoHotkey script (windows) to trigger this shortcut when I double right-click on my mouse. This way, I just target the element with my mouse and double right-click it to open the DOM tree where I want. It's very effective unless there's some z-index properties that prevents you to go straight to a nested element.

This plugin does the job:

#IfWinActive ahk_class Chrome_WidgetWin_1 ; Chrome browser
$RButton::
SetTimer , Fast, 200
Fast_Count+=1
return 
Fast:
if (Fast_Count>=2){
  Send, ^+c
  Fast_Count = 0
} else if (Fast_Count=1) {
  MouseClick, right
  Fast_Count = 0
} else {
  Fast_Count = 0
}
return

score -1 · Answer 2 · answered Oct 06 '16 at 07:34

-1

Use the little arrow in a square (red square on picture below) and click on the element you need. Navigating to it should be trivial that way.

answered Oct 06 '16 at 07:34

Rick van Lieshout

2,276
2
22
39

1

thanks Rick, I tested it, it's not so fast, I always click on arrow and select item every time... arrow doesn't remain fired! Do you have other suggestion? – Cristian Oct 06 '16 at 13:10

Chrome: Inspect element tree position lost after page reload

2 Answers2