如何使用Chrome开发者工具基于CSS类或ID查找元素？

Question

作为一名长期从事自动化开发的人（只是为了背景说明），我一直觉得 Chrome 中用于查找元素的开发工具并不像我预期的那样好用。希望有人可以指出我哪里做错了。

以 Sauce Labs 网站为例：https://saucelabs.com/blog/selenium-tips-finding-elements-by-their-inner-text-using-contains-a-css-pseudo-class

这个页面中有许多 div 和 a 元素。

的确，我可以使用 find('a') 或 find('div') 来查找元素。

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

- Michael Durrant

---

在Chrome开发工具的控制台中，find()是“在页面上查找”的别名。它仅搜索可见文本。如果您需要在DOM中查找元素，请使用document.querySelectorAll();。 - marekful

太好了！如果找到第一个元素是唯一的，它会返回该单个元素。 - Michael Durrant

Answer 1

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

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

- BoltClock

---

@TemaniAfif 如果有特定问题需要他的帮助，通常也可以在HTML/CSS房间里联系他...不要总是这样做，但这确实有助于保持评论的整洁！ - TylerH

@TylerH 好的，没问题。我还不太习惯聊天室，但我会努力的 ;) ... 还有，别担心评论，BoltClock 会清理它们 :p 。顺便说一下，你对那个问题的标题进行的编辑有些不相关，改变了一点意思。 - Temani Afif

Answer 2

您可以在Chrome控制台中使用jQuery代码。例如，如果您想查找具有"class"为"foo"的元素，可以编写$('.foo')，如果是具有"id"为"bar"的元素，可以编写$('#bar')。

您可以在此处了解更多相关信息。

另外，您也可以通过谷歌搜索 "Jquery如何查找具有id的div" 等关键词来获取相关信息。

- Duma

---

Chrome浏览器控制台中并未绑定或构建jQuery。Chrome使用的$()函数只是document.querySelector()内置别名。如果想要使用jQuery，你需要先确认jQuery已被加载（5年前这样做很合理，但今天不再是这样了，因为像GitHub这样的网站正在积极远离它）。如果没有加载，你需要加载它，这对于已经本地可用的内容来说是完全多余的工作... - BoltClock