Chrome开发者工具

Chrome开发者工具

对于开发前端的同学与搞爬虫的同学，Chrome开发者工具是不可获取的。熟悉Chrome开发者工具可以更加方便的开发前端或者分析网站。对于开发者工具，可以右键鼠标按钮，然后点击检查；或者使用F12快捷键；或者在设置中找到开发者工具，然后点击。

如图，面板首行有6个按钮

这些按钮的功能点如下：

• Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
  Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
• Sources:断点调试JS。
• Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
• Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
• Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
  Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
• Security:判断当前网页是否安全。
• Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

Elements面板

element面板中可以实时编辑DOM节点和CSS样式，可以更好的调整前端UI。对于某个前端组件，也可快速定位至源码代码处。同样快速定位源代码这个功能可以让搞爬虫的伙伴快速的找到需要的数据节点位置，并利用解析HTML工具进行提取数据。

• 双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里面

• 点击右侧Style面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式，如下图：

• 点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。

• 查看网页的本地修改历史
• 点击Styles面板中修改过属性的文件名，会跳转到Source面板
• 在文件位置右击选择Local modifications,可以查看本地的所有修改记录
• 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容

Console面板

控制台可以使用JavaScript语言进行交互操作，对节点的查找支持css选择器、xpath路径查找等。同样可以编写Javascript函数进行操作dom节点。在使用控制台时，换行使用shift+enter。

• 控制台输出日志

  通过JS代码或者命令行console.log()、console.warn()
  和console.error()可以将日志信息输出到控制台

  console.log 显示一般的基本日志信息，当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
  
  console.warn 显示带有黄色小图标的警告信息
  
  console.error 显示带有红色小图标的红色的错误信息

注： 当需要换到下一行而不是回车的时候，请按Shift+Enter。

• 控制台交互

  • JS表达式计算
    在上一小节，我们已经看到可以在控制台输入JS表达式点击Enter即可得到表达式的值，当你在控制台输入命令时，会弹出相应的智能提示框，你可以用Tab自动完成当前的建议项

  • 选择元素

    • $() 返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector()
    • $$() 返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll()
    • $x() 返回与指定的XPath相匹配的所有元素的数组

    

Sources面板

• 添加断点

  在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。

  

• 中断调试

  添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的值

  

  • 也可以在右边的侧栏上查看

  

  • 在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

  

network面板

network面板是爬虫伙伴常常光顾的，因为network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等）。通过观察网络请求状况，自己动手模拟浏览器请求网络进行获取数据，有的是通过xhr传输json数据的，有的是跨域传输jsonp数据的，也有的是传输xml或html数据。

常用的功能有：

① 查看资源HTTP头信息

在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。

② 查看资源预览信息

在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。

③ 查看资源HTTP的Response信息

在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

④ 查看资源Cookies信息

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

⑤ 分析资源在请求的生命周期内各部分时间花费信息

在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：

Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（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请求时间和获得响应消息第一个字节的时间。
Content Download 获取Response响应数据的时间花费。

TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了，可以参见网络性能优化方案及里面的相关参考文档。