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 显示资源在整个请求生命周期过程中各部分花费的时间。

对于爬虫,核心部分是下图:用户的请求头
在这里插入图片描述
这里就不再解释每部分的意思,网上非常多。

发布了55 篇原创文章 · 获赞 80 · 访问量 3775

猜你喜欢

转载自blog.csdn.net/wjyxld/article/details/105406378
今日推荐