如何与 google-chrome-devtools 中无法通过 css/xpath 检查的元素交互

How to interact with elements those cannot be inspected through css/xpath within google-chrome-devtools

我经常遇到无法右键单击以检查其 xpath 或 css 的元素。

我想问一下还有什么其他方法可以点击这些元素？

如果您想获取元素定位器但右键单击不起作用，请尝试以下操作。

首先，按 Ctrl+Shift+I 打开开发工具 window。 如果这不起作用，请先打开开发工具，然后加载页面。

打开开发工具后点击"select element"工具，开发工具左边的打印机图标。您可以通过按 Ctrl+Shift+C.

直接获取此工具

然后将鼠标悬停在您想要获取定位器的元素上。该元素将在元素选项卡的 DOM 中被选中。右键单击 DOM 中的元素。 然后从上下文菜单转到复制 -> 为 CSS 选择器复制选择器或为 XPath 复制 XPath。 现在您已经在剪贴板中获得了该元素的定位符。

您可以使用 Ctrl + Shift + C，它会打开开发者工具并选择要检查的元素已启用。只需将鼠标光标移动到该元素并单击，它就会将 devtools 中的 html 视图滚动到正确的位置。

或者，您可以按 F12 并切换选择要检查的元素按钮（devtools 的左上角）。

Control + Shift + C 或 F12 将为您打开开发工具，然后您可以在浏览器上单击光标模式。

有很多 elements/controls 无法位于 HTML DOM 内，即您无法右键单击该元素以通过 google-chrome-devtools 检查其 xpath。遇到这种elements/controls最多的三个如下：

  • Alert: Alerts are created through JavaScript and you can't find them within the DOM Tree. You can find a detailed discussion in
  • 通知（PasswordRemember/GeoLocation/Microphone/Camera）：

无法在 DOM Tree. Here you will find a relevant discussion on

中跟踪这些通知
  • 您确定要离开此页面吗？ 弹出窗口：

此邮件也无法在 DOM Tree. Here you will find a detailed discussion on

中找到