Bookmark element in Chrome devtools

Question

I am debugging a big DOM with 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?

Roei Tabak · Accepted Answer · 2021-10-18T07:13:32.017

3

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

edited Oct 18 '21 at 07:13

answered Oct 18 '21 at 07:07

Roei Tabak

96
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 18 '21 at 07:10
This is useful, but note that it is not intended for this purpose, and depending on what you have selected to have it break on it may unexpectedly trigger the debugger. You could then opt to disable the debugger, but then if you have a case in which you need to debug something it could get to be a bit of a hassle. – Alexander Nied Oct 18 '21 at 18:13

score 1 · Answer 2 · answered Oct 18 '21 at 07:10

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();

score 1 · Answer 3 · answered Oct 18 '21 at 18:08

1

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

Right click the element in the Elements panel
Select "Store as global variable"
The console will slide open, revealing the automatic name assigned to the element (temp1, temp2, etc)
Whenever you want, you may now type that variable name into the console to have it log the element
Right click the logged element, and click "Reveal in Elements Panel" to have the elements pane open with that element selected

answered Oct 18 '21 at 18:08

Alexander Nied

12,804
4
25
45

Looks good. Does this survive a reload of the page? – guettli Oct 19 '21 at 13:30
1

Unfortunately no-- the Chrome console environment will be flushed at each refresh. [Roei's solution will persist over a refresh](https://stackoverflow.com/questions/69567630/bookmark-element-in-chrome-devtools/69620644#69612005) (under some circumstances, anyway), but the downside is that those breakpoints may trigger the debugger at any time. – Alexander Nied Oct 19 '21 at 14:13
You could combine [this answer](https://stackoverflow.com/questions/49929313/save-browser-console-variables-after-page-reload) with [Rikhil's answer](https://stackoverflow.com/questions/69567630/bookmark-element-in-chrome-devtools/69620644#69612046) and write a script to generate global vars at the load of the page, but that only works if you have a selector match you can leverage. – Alexander Nied Oct 19 '21 at 14:15

Bookmark element in Chrome devtools

3 Answers3