google-chrome - 使用“检查元素”工具制作全局 Javascript 变量

Question

在现代浏览器（和 Firefox + firebug）中，您可以打开您的开发人员工具并转到HTML/Elements选项卡，或者您inspect an element可以获得交互式 DOM 显示。

你可以在这里做很多有用的东西，而我经常需要做的一件事是使用 Javascript（在选项卡中）操作/与特定元素交互console。

我一直在做的是使用交互式 DOM 添加一个像“bob”这样的 id 属性，然后在控制台中使用document.getElementById('bob')（或$('#bob')）做我需要做的任何事情。

理想情况下，我想做的是右键单击元素并make JS variable在console我可以使用一个名为的变量中选择一个选项bob，有
没有人知道任何这样的隐藏功能/插件/更快的方法？

score 2 · Accepted Answer

使用内置的 XPath 上下文菜单作为快捷方式。这是过程：

score 2 · Accepted Answer

您现在可以使用 devtools 中的变量来获取对您在窗格$0中选择的最后一个元素的 DoM 引用。Elements

_{注意这也适用于 Firefox！}

2 回答 2