网络爬虫摘文-Chrome分析网站-2·1- Chrome开发工具 / Elements标签

Chrome开发工具

浏览器是从事编程开发人员必备的开发工具。世界上五大浏览器是：IE、Opera、Google Chrome、Safari、Firefox，其中Chrome和Firefox是编程开发人员的首选，主要是两者的运行速度、扩展性和用户体验都符合开发人员的需要。
我们选择Chrome作为分析网站的工具，主要是因为Chrome简洁、速度快（无论是启动速度、页面解析速度还是JavaScript执行速度），对HTML5和CSS3的支持也比较完善。

以豆瓣电影为例，先打开Chrome浏览器–进入豆瓣电影网页–单击Chrome的开发者工具（快捷键：F12）

还可以在网页右键点击，选择“检查”，（或者按ctrl+shift+i 组合键），即可打开开发者工具页面。

·
开发者工具的界面共有9个标签，分别是Elements、Console、Sources、Network、Performance、Memory、Application、Security、Audits（Lighthouse）。

Chrome开发者工具以Web调试为主，如果用于爬虫分析，熟练掌握Elements和Network标签就能满足大部分的爬虫需求。其中，Neywork是核心部分。

·

·

Elements标签

在Elements标签中允许从浏览器的角度看页面，也就是说可以看到Chrome渲染页面所需要的HTML，CSS和DOM（Documentary Object Model）对象。此外，还可以编辑内容更改页面显示效果，如图：

上图中 按钮用于快速查找网页元素，单击该按钮后，在网页上某一处单击，就会自动显示并选中该元素在HTML中的位置。

Element标签分为两个区域，左边的区域一，右边的区域二，两个区域相辅相成。

区域一显示整个网页的HTML信息，单击选中某一行的内容的时候，区域2的Styles标签会显示当前单击选中内容的CSS样式，并可对元素的CSS进行查看与编辑修改。

Computed显示当前选中的边距属性、边框属性，用图像显示一个整体效果。

Event Listeners是整个网页事件触发的JavaScript
通过单击Event Listeners下的某一个JavaScript会自动跳转至Sources标签，显示当前JavaScript的源码，这个功能可以快速找到JavaScript代码所在的位置，对分析JavaScript起到快速定位作用

·
·
·
·

·文章摘选自《实战Python网络爬虫》，仅用于个人学习笔记。