如何使用 chrome 开发工具根据 css 类或 id 查找元素？答案

【问题标题】：How to use chrome dev tools to find elements based on css class or id?如何使用 chrome 开发工具根据 css 类或 id 查找元素？
【发布时间】：2019-01-08 22:42:18
【问题描述】：

这里是长期自动化开发人员（仅用于上下文）。很长一段时间以来，chrome 中用于查找元素的开发工具似乎并没有像我预期的那样工作，这一直困扰着我。希望有人能指出我做错了什么。

查看，比如说，酱实验室页面：https://saucelabs.com/blog/selenium-tips-finding-elements-by-their-inner-text-using-contains-a-css-pseudo-class

现在该页面有 div 和锚点

我确实可以做到find ('a') 或find('div')

但是为什么我在使用类或 id 时会遇到问题？

【问题讨论】：

在 Chrome 开发工具控制台中，find() 是“在页面上查找”的别名。它只搜索可见文本。如果需要在 DOM 中查找元素，请使用 document.querySelectorAll();
太棒了！并且没有所有它找到第一个 - 如果唯一的是 obv 1 元素 - 并返回该单个元素

标签： html google-chrome css-selectors google-chrome-devtools

【解决方案1】：

find() 方法指的是window.find()，这是浏览器内置 Find 功能的非标准 API。它不像 Selenium 或 Capybara 那样查找 web 元素，因此它不会将输入解析为选择器。

您可以使用 document.querySelector() 或 document.querySelectorAll() 在 Chrome DevTools 中找到带有选择器的元素。 Chrome DevTools 中没有为此提供特殊方法，但它确实提供了 $() 和 $$() 别名（分别）以节省您的时间和击键次数。

【讨论】：

@TemaniAfif 你通常也可以在HTML/CSS 房间联系他，如果有他可以提供帮助的特定问题......不要养成习惯或任何事情，但是它确实有助于保持 cmets 清洁！
@TylerH 是的，当然，仍然不习惯聊天室，但我会的；）...不用担心 cmets，BoltClock 会清理它们：p。作为旁注，您对该问题的标题编辑不相关，您稍微改变了含义。

【解决方案2】：

您可以在 chrome 控制台中使用 jquery 代码，例如，如果您想查找 class 为 "foo" 的内容，您可以编写 $('.foo') 或 id “吧”你写$('#bar')

您可以阅读所有相关信息here

你也可以用谷歌搜索你想要的“Jquery 如何找到一个带有 id 的 div”

【讨论】：

Chrome 不会将 jQuery 捆绑或构建到其控制台中。 Chrome 使用的 $() 函数只是 document.querySelector() 的内置别名。如果你想使用 jQuery，你必须首先假设 jQuery 已经加载（这在 5 年前是合理的，但今天不是，考虑到像 GitHub 这样的网站正在积极地从它远离） .如果不是，您必须加载它，这对于本机已经可用的东西来说完全是太多的工作......