使用`inspect an element`工具制作全局Javascript变量

Question

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

你可以在这里做大量有用的事情，我需要做的一件事是使用Javascript（在console标签中）操纵/与特定元素交互。

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

理想情况下，我想要做的是右键单击元素并选择make JS variable之类的选项，以便在console中我可以使用名为bob的变量，

Answer 1

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

• 右键单击DOM Inspector选项卡中的元素
• 从上下文菜单中选择Copy XPath
• 将选择器粘贴到控制台
• 将选择器用单引号括起来
• 将选择器包含在控制台API的$x()方法中
• 追加选择器匹配的数组索引

• 附加所需的属性/方法参考

  $x('//*[@id="header"]')[0].innerText
  

Answer 2

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

https://developer.chrome.com/devtools/docs/commandline-api#0-4

_{NB 这也适用于Firefox！}