Chrome 开发工具、Elements标签与Network标签及豆瓣电影网页分析

Chrome 开发工具、Elements标签与Network标签及豆瓣电影网页分析

1.以分析豆瓣电影为例https://movie.douban.com/
打开Chrome 开发者工具快捷键F12，或空白处单击右键选择“检查”，下图所示。
左边为网页原页面，右边为开发者工具界面。

2.熟悉Elements标签与Network标签
（1）Elements标签
在上图的右图中，找到Elements标签，右图点击出现两个部分，中间图显示整个网页的HTML信息，单击选中某行，右图部分styles标签会显示当前点击选中内容的CSS样式，并可对元素的CSS进行查看与编辑修改。

用鼠标放到中间图的某行，此行会“高亮”，同时左图相应的部分也“高亮”，表明自动显示并选中该元素在HTML里的位置。

（2）Network标签
Network标签可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。

操作：依次点击Network、键盘按键ctrl+R、点击下图all。

选中下图左图中第一行，

出现右图，右图有5项，表明查看具体资源的详情
　　通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：
Headers 该资源的HTTP头信息。
Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
Response 显示HTTP的Response信息。
Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

对于爬虫，核心部分是下图：用户的请求头

这里就不再解释每部分的意思，网上非常多。