使用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 开发者调试工具来精准定位要抓取信息的元素结构。之所以这样做，是因为这能避免正则表达式的冗余，提高编写正则表达式的速度和精确性。

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

SAP UI5 应用开发教程之三十七 - 使用 Chrome 开发者工具 Console 面板进行元素审查试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
HTML开发者工具抓取所有图片,利用Chrome开发者工具功能进行网页整页截图的方法...
说起要截取整个网站页面,很多朋友第一时间想到的都是用哪款chrome扩展,确实,我们网站之前也有介绍过一些截图插件比如: 但其实现在不少浏览器都自带截屏功能了.尤其是像chrome如此强大的浏览器,比 ...
使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
请参阅：Chrome开发者工具中的悬停状态
我希望看到:hover我在Chrome中徘徊的锚点的:hover样式. 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态. 我似乎无法在Chrome中找到类似内容. 我错过了什么吗? ...
小技巧：Chrome开发者工具里的Alt+单击
在Chrome开发者工具里单击一个元素左边的小三角符号,只会展开其继承结构的第一层直接子节点: 而Alt+Click,可以将该元素第一个子节点,以及该子节点原型链上的节点全部展开.将下图和上图进行比较 ...
Chrome 开发者工具审查元素快捷键
打开DEVTOOLS 你可以通过以下任何一种方式来访问DevTools: 打开浏览器右上角的Chrome菜单 ,然后选择"更多工具"–"开发者工具". 在页面任 ...
Chrome开发者工具中Elements(元素）断点的用途
2019独角兽企业重金招聘Python工程师标准>>> SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行J ...
使用Chrome开发者工具调试Android端内网页(微信，QQ，UC，App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 传送门转载于:https://www.cnblogs.com/momozjm/p/9389912.html
精确定位网页中各个元素的位置
精确定位网页中各个元素的位置有两种方法:使用表格或层.使用表格是目前比较通用的做法,具体方法是:先在网页中建立一个表格,注意表格的边框宽度应为0.然后再把各个元素按照你的要求放在各个表格单元之中.仔细 ...

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

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

1. 使用Chrome开发者工具

2. 适当修改XPATH

总结

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

最新文章

热门文章