使用场景

有的同学属于频繁使用到网页中元素定位技能的角色，例如编写UI自动化测试用例，或者定位网页问题的人，此时选择使用第三方插件会提供更加强大、完善的功能。但是对于偶然使用，例如到其他人机器上定位问题的时候，大张旗鼓安装新插件，显然不划算，也不适合装B。这种时候，使用Chrome自带的调试工具更加方便

复制XPath

• 进入方式：网页上目标元素右键-检查，或者直接F12，选中第1个tab“元素”，英文是Elements，通过左上角的定位器选中元素。

  
  image.png

• 下一步在F12工具框中，对应高亮的代码行右键，弹出窗口中选择-复制-复制XPath，英文是Copy-Copy element。例如这个图片示例中复制出来的XPath长这样//*[@id="1"]/div/div[1]/div[1]/div[2]/div[2]/div[1]/div/div/div[3]

• 我承认XPath样式比较丑，可读性比较差
  

  image.png

验证XPath和CSS

由于直接复制出来的XPath非常丑，实际使用时都会进行修饰美化提高其可读性和可维护性。那么对于改完后的Xpath，也可以继续在这个工具中验证，

• 使用Ctrl+f调出查询框

  
  image.png
• 将XPath字符串复制回车后，即可搜索
• 分析搜索结果。如果搜索结果是0，说明页面上并没有搜索到这个XPath对应的元素，也就是XPath写错了，回去再改。如果搜索结果是非0的数字，代表有1个或者多个命中。如果有多个命中时，对于元素定位而言，一般都还需要再修改一下XPath使其命中数量为1