使用Chrome开发者工具精确定位网页元素位置

在学习使用python爬虫时，本人需要编写正则表达式，为精确找到所需要爬取数据的元素位置，学习使用Chrome开发者调试工具精确定位网页元素位置。

1. 使用Chrome开发者工具

• ① 找到需要精确定位的网页，F12键直接打开开发者模式；或者找到Chrome浏览器的“更多工具”中的“开发者工具”，如下图所示（这里以百度界面为例）：
  
  进入需要的网站（这里以电影天堂网站为例），成功打开之后，界面如下：
  
• ②进入“元素选项”，之后点击谷歌开发者工具左上角的箭头，即可选定自己所需要的元素位置。这里本人目的是找到每个电影的“a”的位置，效果如下：
  
• ③选中所需元素位置，鼠标右键复制XPATH路径：
  
• ④ctrl + F 快捷键打开Chrome的查询框，将复制的XPATH信息复制进搜索框，检索成功之后会进行高亮显示（如下图的右下角所示）。
  这里复制的XPATH为：//*[@id=“header”]/div/div[3]/div[3]/div[2]/div[2]/div[2]/ul/table[1]/tbody/tr[2]/td[2]/b/a

2. 适当修改XPATH

可以看出，上图显示只可以定位到一个元素，这样并不能满足我们查找全部的要求的，所以我们需要适当修改XPATH。

• ① 在修改XPATH之前需要先简单熟悉一下XPATH语法（具体需要自己查资料），XPath 是一门在 XML 文档中查找信息的语言，这里只展示它的简单语法：
  
• ② 总结网页规律，修改XPATH
  原XPATH：//[@id=“header”]/div/div[3]/div[3]/div[2]/div[2]/div[2]/ul/table[1]/tbody/tr[2]/td[2]/b/a
  修改后XPATH：//[@id=“header”]/div/div[3]/div[3]/div[2]/div[2]/div[2]/ul/table/tbody/tr[2]/td[2]/b/a
  可以看出这里我仅仅把“table[1]”改成了“table”，意思是定位“ul”标签下的所有table标签。之后将修改后的XPATH复制到查询框，即可快速定位到“a”元素位置，可以看到共查询到25个：
  

总结

    本文主要介绍了Chrome开发者工具的元素定位功能和根据需要修改XPATH路径信息。
    这里使用 Chrome 开发者调试工具来精准定位要抓取信息的元素结构。之所以这样做，是因为这能避免正则表达式的冗余，提高编写正则表达式的速度和精确性。