使用chrome console检查css selector/xpath的有效性

本文主要是介绍使用chrome console检查css selector/xpath的有效性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

定位元素时，一般用xpath或css selector来定位，定位时可以借助chrome浏览器或firefox浏览器的firebug来直接copy selector或copy xpath。此文介绍使用chrome怎样去验证css selector或xpath的有效性。

步骤
1. 按F12打开chrome的开发者工具；
2. 再按Esc键调出console
经过这俩步骤，chrome的Elements和Console展示在同一个窗口，便于查看。

$(selector)和$$(selector)

可见：前者会列出与selector匹配的所有元素，而后者则是把这些匹配到的元素组成了数组。（点击返回的每个元素，则会定位到页面中的img元素及html中的具体位置）
另外还有两种方法与上面类似：

document.querySelector()会返回DOM中匹配的第一个元素（只返回一个元素）；
document.querySelectorAll()等同于$$(selector)
综上：使用$(selector)即可满足验证css selector是否有效的需求

$x(path)

$x(path)返回的是一个数组，数组中即为与xpath匹配的所有元素。
References：
https://developers.google.cn/web/tools/chrome-devtools/console/command-line-reference?hl=zh-cn
https://getfirebug.com/wiki/index.php/Command_Line_API

这篇关于使用chrome console检查css selector/xpath的有效性的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---