Chrome devtools 中的书签元素
Bookmark element in Chrome devtools
我正在使用 devtools 调试一个大 DOM：
我想“标记”这个 div，这样我就可以轻松地再次跳转到它。
如果此书签能够在页面重新加载后继续存在，那就太好了。
有办法吗？
我不确定它是否符合“书签”的条件，但您可以使用“Break on”标记，它会在重新加载后继续存在并引导您到正确的行，即使元素已折叠。
Break on mark
直到并且除非您的选择器有 href（在您的情况下不存在），否则不会使用书签。
如果你可以添加那么这个link可以帮助你How to scroll an HTML page to a given anchor
如果您不能使用 href，那么尽管在您的开发工具中编写脚本，但您每次想要滚动时都可以执行以下操作
document.querySelector('.panel-heading').scrollIntoView();
我写这篇文章时这里的其他答案会起作用。另一种选择（抱歉屏幕截图太大）：
- 右键单击“元素”面板中的元素
- Select "存储为全局变量"
- 控制台将滑动打开，显示分配给元素的自动名称（
temp1、temp2 等）
- 您现在可以随时在控制台中输入该变量名，让它记录元素
- 右键单击记录的元素，然后单击“在元素面板中显示”以打开元素窗格并选择该元素
我正在使用 devtools 调试一个大 DOM：
我想“标记”这个 div，这样我就可以轻松地再次跳转到它。
如果此书签能够在页面重新加载后继续存在，那就太好了。
有办法吗？
我不确定它是否符合“书签”的条件，但您可以使用“Break on”标记，它会在重新加载后继续存在并引导您到正确的行，即使元素已折叠。
Break on mark
直到并且除非您的选择器有 href（在您的情况下不存在），否则不会使用书签。 如果你可以添加那么这个link可以帮助你How to scroll an HTML page to a given anchor
如果您不能使用 href，那么尽管在您的开发工具中编写脚本，但您每次想要滚动时都可以执行以下操作
document.querySelector('.panel-heading').scrollIntoView();
我写这篇文章时这里的其他答案会起作用。另一种选择（抱歉屏幕截图太大）：
- 右键单击“元素”面板中的元素
- Select "存储为全局变量"
- 控制台将滑动打开，显示分配给元素的自动名称（
temp1、temp2等） - 您现在可以随时在控制台中输入该变量名，让它记录元素
- 右键单击记录的元素，然后单击“在元素面板中显示”以打开元素窗格并选择该元素