使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

鳄鱼君

发表文章数:642

热门标签

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » Python » 使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

浏览器是从事编程开发人员必备的开发工具。世界上五大主流浏览器分别是:IE、Opera、Google Chrome、Safari和Firefox,其中Chrome和Firefox是编程开发人员的首选,主要是两者运行速度、扩展性和用户体验都符合开发人员所需。

鳄鱼君Ba选择Chrome作为分析网站的工具,因为其简洁、速度快(无论是启动速度、页面解析速度还是JavaScript执行速度),对HTML5和CSS3的支持也比较完善。

百度网页为例,在Chrome中打开百度的首页,按下快捷键F12,还可以通过在网页上右击,选择“检查”,或者按Ctrl+Shift+I组合键,打开开发者工具界面。

使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

开发者工具的界面共有9个标签页,分别是:Elements、Console、Sources、Network、Performance、Memory、Application、Security和Audits。Chrome开发者工具以Web调试为主,如果用于爬虫分析,熟练掌握Elements(查看器)Network(网络)标签就能满足大部分的爬虫需求。其中,Network是核心部分。

Elements(查看器)

在Elements标签中允许从浏览器的角度看页面,也就是说可以看到Chrome渲染页面所需要的HTMLCSSDOM(Document Object Model)对象。此外,还可以编辑内容更改页面显示效果。

Elements标签最左边的,用于快速查找网页元素,单击该按钮后,在网页上某一处单击,就会自动显示并选中该元素在HTML里的位置。

使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

Elements标签分成两部分,左边右边。左边显示整个网页的HTML信息,单击选中某一行内容的时候,右边的Styles标签会显示当前单击选中内容的CSS样式,并可对元素的CSS进行查看与编辑修改。Computed显示当前选中的边距属性、边框属性,用图像显示一个整体效果。Event Listeners是整个网页事件触发的JavaScript。

使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

通过单击Event Listeners下的某个JavaScript会自动跳转到Sources标签,显示当前JavaScript的源码,这个功能可快速找到JavaScript代码所在的位置,对分析JavaScript起到快速定位作用。

Network(网络)

在Network标签中可以看到页面向服务器请求的信息、请求的大小以及加载请求花费的时间。从发起网页页面请求Request后分析HTTP请求得到各个请求信息(包括状态、类型、大小、所用时间、Request和Response等)。Network标签的结构组成如图:

使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

Network标签主要包括以下5个区域:
● Controls:控制Network的外观和功能。
● Filters:控制Requests Table具体显示哪些内容。
———— All:返回当前页面全部加载的信息,就是一个网页全部所需要的代码、图片等请求。
———— XHR:筛选Ajax的请求链接信息,前面讲过Ajax核心对象XMLHTTPRequest, XHR取于XMLHTTPRequest的缩写。
———— JS:主要筛选JavaScript文件。
———— CSS:主要是CSS样式内容。
———— Img:是网页加载的图片,爬取图片的URL都可以在这里找到。
———— Media:是网页加载的媒体文件,如MP3、RMVB等音频视频文件资源。
———— Doc:是HTML文件,主要用于响应当前URL的网页内容。
● Overview:显示获取到请求的时间轴信息,主要是对每个请求信息在服务器的响应时间进行记录。这个主要是为网站开发优化方面提供数据参考,这里不做详细介绍。
● Requests Table:按前后顺序显示所有捕捉的请求信息,单击请求信息可以查看该详细信息。
● Summary:显示总的请求数、数据传输量、加载时间信息。

5个区域中,Requests Table是核心部分,主要作用是记录每个请求信息。但每次网站出现刷新时,请求列表都会清空并记录最新的请求信息,如用户登录后发生304跳转,就会清空跳转之前的请求信息并捕捉跳转后的请求信息。

对于每条请求信息,可以单击查看该请求的详细信息:

使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

每条请求信息划分为以下5个标签:
● Headers:该请求的HTTP头信息。
● Preview:根据所选择的请求类型(JSON、图片、文本)显示相应的预览。
● Response:显示HTTP的Response信息。
● Cookies:显示HTTP的Request和Response过程中的Cookies信息。
● Timing:显示请求在整个生命周期中各部分花费的时间。

某些数据可能不会存在查看器或者Elements显示的html文件中,我们就需要查看浏览器发送的每一个请求,知道如何缩小请求的数量,是一个很好的习惯,当然也可以对每一个请求都进行查看。

常用的标签有Headers、Preview和Response。Headers用于获取请求链接、请求头和请求参数;Preview和Response用于显示服务器返回的响应内容。

Headers标签划分为以下4部分:
● General:记录请求链接、请求方式和请求状态码。
● Response Headers:服务器端的响应头,其参数说明如下。
———— Cache-Control:指定缓存机制,优先级大于Last-Modified。
———— Connection:包含很多标签列表,其中最常见的是Keep-Alive和Close,分别用于向服务器请求保持TCP连接和断开TCP连接。
———— Content-Encoding:服务器通过这个头告诉浏览器数据的压缩格式。
———— Content-Length:服务器通过这个头告诉浏览器回送数据的长度。
———— Content-Type:服务器通过这个头告诉浏览器回送数据的类型。
———— Date:当前时间值。
———— Keep-Alive:在Connection为Keep-Alive时,该字段才有用,用来说明服务器估计保留连接的时间和允许后续几个请求复用这个保持着的连接。
———— Server:服务器通过这个头告诉浏览器服务器的类型。
———— Vary:明确告知缓存服务器按照Accept-Encoding字段的内容分别缓存不同的版本。
● Request Headers:用户的请求头。其参数说明如下。
———— Accept:告诉服务器客户端支持的数据类型。
———— Accept-Encoding:告诉服务器客户端支持的数据压缩格式。
———— Accept-Charset:可接受的内容编码UTF-8。
———— Cache-Control:缓存控制,服务器控制浏览器要不要缓存数据。
———— Connection:处理完这次请求后,是断开连接还是保持连接。
———— Cookie:客户可通过Cookie向服务器发送数据,让服务器识别不同的客户端。
———— Host:访问的主机名。
———— Referer:包含一个URL,用户从该URL代表的页面出发访问当前请求的页面,当浏览器向Web服务器发送请求的时候,一般会带上Referer,告诉服务器请求是从哪个页面URL过来的,服务器借此可以获得一些信息用于处理。
———— Query String Parameters:请求参数。主要是将参数按照一定的形式(GET和POST)传递给服务器,服务器通过接收其参数进行相应的响应,这是客户端和服务端进行数据交互的主要方式之一。


Headers标签的内容看起来很多,但在实际使用过程中,爬虫开发人员只需关心请求链接请求方式请求头请求参数的内容即可。而Preview和Response是服务器返回的结果,两者之间对不同类型的响应结果有不同的显示方式:

(1)如果返回的结果是图片,那么Preview表示可显示图片内容,Response表示无法显示。
(2)如果返回的是HTML或JSON,那么两者皆能显示,但在格式上可能会存在细微的差异。

网站数据来源

对于网页,从数据的角度考虑,网页上呈现出来的数据来源有以下三种:

  • 1.html文件—-60%
  • 2.ajax接口—-30%(json接口)
  • 3.javascript加载—-10%(js渲染)

ajax是什么?它可以理解为一步的javascript和xml,这个技术可以在页面不刷新的情况下,利用js和后端服务器进行交互,将内容显示在前端页面上,从用户的角度来说,可以大大提高网页的打开速度;从开发的角度可以做到前后端分离,提高开发速度。

你还需要知道ajax的工作步骤:

  • 发送请求:通过接口,js向服务器发送xml http请求(XHR)
  • 解析内容:js得到相应后,返回的内容可能是html,也可能是json数据。
  • 渲染网页:js通过操纵dom树,改变dom节点的内容,达到修改网页的目的。

知道了这些,我们在对目标网页进行爬取的时候,要做的就是分析网页的数据来源是使用哪种方式,这非常关键!

对于任何网站的分析,我们一般会在下图的位置分析,写代码:

使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

同时需要尽行核对,比方说你写一下提取的xpath或者select来提取你想要的数据,但是看了很多次,你的代码没有问题,但是提取的内容却返回的是空值!那么百分之百,你所选择的标签是不存在的。在选择标签的同时,你需要在下图的位置进行搜索检查,是否存在这样的标签或者属性,也就是需要在网页的源代码中核对信息,网页的源代码才是网站返回给我们的数据,而我们在上面的图片中进行对照分析写代码的时候,看到的是处理过的标签或者数据!即看到的不一定存在!

使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

那么对于ajax加载,或者js渲染后的页面,我们可以查看浏览器中的请求数据,通常你需要特别注意XHR,json请求,script类型的请求,不要过多关注css,图片一类的请求。

使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

我们分析网页,通常都是为了提取数据的,可以使用xpath,css选择器,css路径…在浏览器有一个很方便的功能:

使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程

我们对于想定位的标签,可以使用复制浏览器提供的代码,但这提取出来的数据通常是不完整的,你只能用做参考。其实网页标签的定位非常简单,我们不需要写太多的路径,就像浏览器提供的一样,过于繁琐,我们只需找到你需要提取的数据的上一个标签,如果它存在唯一的属性,那么直接定位它就可以,xpath通常都是这样定位的,就不需要从网页标签的开始一步一往下定位,最终效果都是一样的,何必那么复杂呐!

标签:

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《使用Chrome浏览器开发工具分析网站 浏览器开发工具抓包教程》 发布于2020-03-19

分享到:
赞(4) 赏杯咖啡

评论 抢沙发

3 + 1 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册