R爬虫必备基础—Chrome开发者工具(F12)

上一期介绍了SelectorGadget的使用,当时提及需要搭配浏览器开发者工具使用。今天呢,就来介绍浏览器开发者工具,这里以Chrome浏览器为例。Chrome开发者工具中,主要功能页面是:元素(ELements)、控制台(Console)、源代码(Sources)和网络(Network)。在爬虫实践中,**ELements **和 Network面板比较常用。

  • 元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
  • 控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。
  • 源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
  • 网络(Network):网络页面主要用于查看header等与网络连接相关的信息。
  • Performance 对网页进行性能的分析。
  • Memory 进行内存的分析。
  • Application 当前页面上的所有用到的资源信息。
  • Security 调试当前网页的安全和认证等问题。
  • Audits 对网页优化给出的建议。

1、元素(Elements)

查看元素代码:点击箭头进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置 ,如下图,左侧即为网页源码。

image

右上部:

  1. Style css的预处理器,可见既可得。直接更改css样式在界面中可以直观的看到效果。点击具体位置之后,跳转到Sources位置,这个不影响源文件。如演示的样子,可以在Sources查看更改的历史。
  2. Computed 选中的元素盒子模型样式属性的具体计算值
  3. Event Listeners 元素绑定的事件
    4.** Properties **元素具有的属性与方法,比直接查api会更方便。

右下部:

当鼠标移到右下部界面上的时候,元素边框会有各种颜色,代表的其实是分别是盒子模型中的内容(content)、填充/内边距(padding)、边框(border)、边界/外边距(margin)。这是css中非常重要的思维模型。

2、控制台(Console)

控制台的作用:查看JS对象的及其属性;执行JS语句;查看控制台日志:当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉。

3、源代码(Sources)

主要功能介绍如下:

image

4、网络(Network)

Netwok面板总览

Network面板功能介绍(如下图):1. Controls控制Network的外观和功能; 2. Filters控制Requests Table具体显示哪些内容; 3. Overview 显示获取到资源的时间轴信息; 4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名就可以查看该资源的详细信息。

image

其中,各个功能区域中常见的功能键说明如下,请求URL可进行筛选和分类,选择不同分类,查看请求URL,方便查找。也可以直接Filter搜索查询相关URL,可以输入关键字或者正则表达式进行查询。

image
请求资源面板

如下图,Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,包括请求了哪些地址、每个URL的网络相关请求信息:URL,响应状态码,响应数据类型,响应数据大小,响应时间等。

  • Name:资源名称已经URL路径(main.css)
  • Status:Http状态码
  • Type:请求资源的MIME类型,MIME是Multipurpose Internet Mail Extensions (html,css,js等)
  • Initiator:标记请求是由哪个对象或者进程发起的(请求源)
  • Parser :请求是由页面的html解析时发送
  • Redirect:请求是由页面重定向发送
  • script :请求是由script脚本处理发送
  • other :请求是由其他过程发送的,比如页面里的Link链接点击
  • Size:从服务器下载的文件和请求的资源大小,若是从缓存中取得资源则该列会显示“from cache”
  • Time:请求或下载的时间,从发起Request到获取到Response所用的总时间
  • Waterfall:显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可查看该请求的详细信息
image
某一具体资源

如下图,查看具体某一资源的详情,点击某个资源的Name可查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样。

image

重点:请求文件具体说明, 一共分为四个模块( 爬虫发送请求参数):

  • Header(重点):****面板列出资源的请求url、HTTP请求方法、HTTP状态码、请求头和响应头及它们各自的值、请求参数等
  • Preview:预览面板,用于资源的预览。
  • Response:响应信息面板包含资源还未进行格式处理的内容
  • Cookies:显示资源HTTP的Request和Response过程中的Cookies信息
  • Timing:资源请求的详细信息花费时间

①Headers:查看资源HTTP头信息,列出资源的请求URLHTTP方法(GET/POST...)、HTTP状态码请求头响应头以及它们各自的值、请求参数等等。

  • General 中关键信息:
    • Request URL:请求网址;
    • Request Method:请求方法(GET/POST/HEAD/PUT/DELETE等);
    • Status Code:HTTP状态码(显示200表示响应正常,通过 Status 能判断发送请求是否得到后台服务正常响应)
  • Response headers(响应头)中关键信息:Content-Type:网页的解码方法
  • Request headers(请求头)中关键信息:都重要
  • Query String Parameters:都重要
image

②Preview:查看资源预览信息,可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应的预览信息。

image

Response:查看资源HTTP的Response信息, 可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应资源的Response相应内容。

image

④Cookies:查看资源Cookies信息,如果选择的资源在Request和Response过程中存在Cookies信息,则Cookies标签会自动显示出来,可查看所有的Cookies信息。

image

⑤Timing:分析资源在请求的生命周期内各部分时间花费信息,可显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况:

image

  • Queueing:排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)、服务器不可用、超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6)
  • Stalled:从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间,如果有已经建立好的连接,这个时间还包括等待已建立连接被复用的时间
  • Proxy Negotiation:与代理服务器连接的时间花费
  • DNS Lookup:执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话,则这个时间为0
  • Initial Connection / Connecting :建立连接的时间花费,包含了TCP握手及重试时间
  • SSL:完成SSL握手的时间花费
  • Request sent:发起请求的时间
  • Waiting (Time to first byte(TTFB)) :是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了
  • Content Download:获取Response响应数据的时间花费

更多内容可关注公共号“YJY技能修炼”~~~

往期回顾
R爬虫在工作中的一点妙用
R爬虫必备基础——HTML和CSS初识
R爬虫必备基础——静态网页+动态网页
R爬虫必备——rvest包的使用
R爬虫必备基础——CSS+SelectorGadget

你可能感兴趣的:(R爬虫必备基础—Chrome开发者工具(F12))