CODEWITHSUNDEEP
google-chrome-devtools
guettli
guettli

Reputation: 27816

Bookmark element in Chrome devtools

I am debugging a big DOM with devtools:

bookmark-div-in-devtools

I would like to "boomark" this div, so I can jump to it again easily.

It would be great if this bookmark would survive a page reload.

Is there a way to do this?

Upvotes: 2

Views: 985

Answers (3)

Alexander Nied
Alexander Nied

Reputation: 13623

The other answers here as I write this will work. Yet another option (sorry the screenshots are so large):

  1. Right click the element in the Elements panel
  2. Select "Store as global variable" Screenshot of Chrome devtools, element right-click menu, "Store as global variable" highlighted
  3. The console will slide open, revealing the automatic name assigned to the element (temp1, temp2, etc)
  4. Whenever you want, you may now type that variable name into the console to have it log the element
  5. Right click the logged element, and click "Reveal in Elements Panel" to have the elements pane open with that element selected Screenshot of Chrome devtools, console-logged element right-click menu, "Reveal in Elements Panel" selected

Upvotes: 2

Roei Tabak
Roei Tabak

Reputation: 106

I'm not sure it qualifies as "Bookmark", but you can use the "Break on" mark, which survives reload and guides you to the right line, even when the elements are folded.

Break on mark

Break on DOM changes from google

Upvotes: 4

Rikhil Arora
Rikhil Arora

Reputation: 118

With Bookmark no until and unless there is an href to your selector(which is not there in your case). If you can add then this link can help you How to scroll an HTML page to a given anchor

If you can not use href then though scripting in your dev tools you can do everytime you want to scroll like below

document.querySelector('.panel-heading').scrollIntoView();

Upvotes: 1

Related Questions