是否有可以在 Firefox 中测试 css 选择器的插件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2208790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there an addon which you can test css selectors in firefox?
提问by user223871
I was wondering if there is such an addon in firefox where you can test out css paths to check if they are finding the correct element? I was looking for something similar to xpather for xpath locations.
我想知道 firefox 中是否有这样的插件，您可以在其中测试 css 路径以检查它们是否找到了正确的元素？我正在为 xpath 位置寻找类似于 xpather 的东西。
采纳答案by K. Norbert
Edit 2019-12-04:
编辑 2019-12-04：
The firefinder addon no longer exists, but you can use the developer console (press F12), and the $$ function to get elements matching a selector, eg. to select all divs: $$('div')
firefinder 插件不再存在，但您可以使用开发者控制台（按 F12）和 $$ 函数来获取与选择器匹配的元素，例如。选择所有 div：$$('div')
Old answer:
旧答案：
FireFinderdoes exactly what you are looking for. You can evaluate either CSS, or XPath expressions, it will list the matching elements, and also draw a red border around them.
FireFinder完全符合您的要求。您可以评估 CSS 或 XPath 表达式，它将列出匹配的元素，并在它们周围绘制红色边框。
回答by Sarfraz
Yes you can go for FireBug, a versatile Firefox web development add-on.
是的，您可以选择FireBug，这是一个多功能的 Firefox Web 开发插件。
To test a CSS selector, go to the "Console" tab and enter a command in the bottom form (more infoon how to find the command line).
要测试 CSS 选择器，请转到“控制台”选项卡并在底部表单中输入命令（有关如何查找命令行的更多信息）。
Inside the command line use the $$("your CSS selector")syntax to test CSS selectors, explained in more detail here. For example use this command to select everything:
在命令行中使用$$("your CSS selector")语法来测试 CSS 选择器，这里有更详细的解释。例如，使用此命令选择所有内容：
$$("body")
回答by Droogans
Here's how to use the built in CSS query selector in Firefox:
以下是在 Firefox 中使用内置 CSS 查询选择器的方法：
Go to Tools > Web Developer > Web Console
转到工具 > Web 开发人员 > Web 控制台
Also, you could press ctrlshiftiin Windows/Linux, or cmdoptiin Mac.
此外，您可以ctrlshifti在 Windows/Linux 或cmdoptiMac 中按下。
Type in your CSS selector (using traditional $$()syntax) at the very bottom left corner.
在$$()左下角输入您的 CSS 选择器（使用传统语法）。
The object node list will appear on the right hand panel of the console.
对象节点列表将出现在控制台的右侧面板上。
$$('div')
[object NodeList]
$$('div').length
42
This is handy for Selenium Webdriver instances of Firefox, where having an extension isn't feasible.
这对于 Firefox 的 Selenium Webdriver 实例非常方便，因为在这些实例中无法进行扩展。
回答by David
FireFinder is good, but I started with and prefer FirePath for Firebug. It works similarly, but can give you an expanded view of the HTML around the matching elements w/o need to click inspect, FriendlyFire, etc.
FireFinder 很好，但我开始时更喜欢 FirePath for Firebug。它的工作原理类似，但可以为您提供围绕匹配元素的 HTML 扩展视图，无需单击检查、FriendlyFire 等。
The field where you test the locator also has syntax checker where field turns red if syntax is bad. Just click eval to test the locator and matches show below with additional HTML around the matching elements.
您测试定位器的字段也有语法检查器，如果语法错误，该字段会变为红色。只需单击 eval 即可测试定位器，并在下方显示匹配元素周围的附加 HTML。
But for testing CSS locator, you'd want the drop down option of "Sizzle" rather than CSS in FirePath. The CSS option only works for simple CSS selectors, complex ones only work under Sizzle (l mode, such as:
但是为了测试 CSS 定位器，您需要“Sizzle”的下拉选项而不是 FirePath 中的 CSS。CSS 选项仅适用于简单的 CSS 选择器，复杂的仅适用于 Sizzle（l 模式，例如：
div.namedService.photoService > div.photoBrowserContainer:nth-child(3) > div.albumName:contains('someName')
div.namedService.photoService > div.photoBrowserContainer:nth-child(3) > div.albumName:contains('someName')
回答by Mikezx6r
Not sure if this helps. Try Firebug. Allows you to select an item, and see what it's css path is, as well as the css currently being applied.
不确定这是否有帮助。试试萤火虫。允许您选择一个项目，并查看它的 css 路径是什么，以及当前正在应用的 css。
Can do some experimentation in the html/css right in the browser.
可以在浏览器中的 html/css 中做一些实验。
回答by rui
Try firebug. http://getfirebug.com/
试试萤火虫。http://getfirebug.com/
回答by muzuiget
The DOM standard function document.querySelectorAllis what you want, modern browser all support it. See the document
DOM标准功能document.querySelectorAll就是你想要的，现代浏览器都支持。查看文档
https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
You can call it in built-in web console. In console there is a shortcut $$, call it like $$('div a').
您可以在内置的 Web 控制台中调用它。在控制台中有一个快捷方式$$，像$$('div a').
I like firebug because it can click to scroll to view the element. It also can test in 'CSS' panel.
我喜欢萤火虫，因为它可以点击滚动来查看元素。它还可以在“CSS”面板中进行测试。
回答by chirag
Selenium IDE 1.0.11 released has inbuilt CSS locator builder
Selenium IDE 1.0.11 发布，内置 CSS 定位器构建器
回答by Dave Hunt
The 'Find' button in Selenium IDE is very useful for this. It uses the same method to locate elements as your tests will, so can be used to locate elements using any of the supported strategies.
Selenium IDE 中的“查找”按钮对此非常有用。它使用与您的测试相同的方法来定位元素，因此可用于使用任何受支持的策略来定位元素。
回答by Tom
Firebug(https://addons.mozilla.org/en-US/firefox/addon/1843) or Web Developer Toolbar(https://addons.mozilla.org/en-US/firefox/addon/60). Both show path.
Firebug( https://addons.mozilla.org/en-US/firefox/addon/1843) 或Web 开发者工具栏( https://addons.mozilla.org/en-US/firefox/addon/60)。两者都显示路径。
