Chrome开发者工具面板

面板上包含了Elements面板、Console面板、Sources面板、Network面板、

Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。

这些按钮的功能点如下：

  • 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文件等。

Network面板

概述

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

我把Google官方网站上介绍Network面板的图贴到这里，该面板主要包括5大块窗格(Pane)：

  2. Controls 控制Network的外观和功能。
  3. Filters 控制Requests Table具体显示哪些内容。
  4. Overview 显示获取到资源的时间轴信息。
  5. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
  6. Summary 显示总的请求数、数据传输量、加载时间信息。

其中 Requests Table 显示如下信息列：

  • Name 资源名称，点击名称可以查看资源的详情情况，包括​​Headers​​、​​Preview​​、​​Response​​、​​Cookies​​、​​Timing​​。
  • Status HTTP状态码。
  • Type 请求的资源MIME类型。
  • Initiator 标记请求是由哪个对象或进程发起的（请求源）。
  • Parser： 请求由Chrome的HTML解析器时发起的。
  • Redirect：请求是由HTTP页面重定向发起的。
  • Script：请求是由Script脚本发起的。
  • Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
  • Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
  • Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
  • Timeline 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。

 

捕获屏幕

​​Controls​​窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器，视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

以捕获屏幕为例，点击摄像机按钮（捕获屏幕），重新加载页面即可捕获屏幕。

双击其中的截屏可以放大显示，在放大的图下方可以点击跳转到上一帧或者下一帧。

单击则可以查看该帧被捕获时的网络请求信息，并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

查看DOMContentLoaded和load事件信息

​​DOMContentLoaded​​和​​load​​这两个事件会高亮显示。

DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。
load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

​​DOMContentLoaded​​事件在Overview上用一条蓝色竖线标记，并且在Summary以蓝色文字显示确切的时间。

​​load​​事件同样会在Overview和Requests Table上用一条红色竖线标记，在Summary也会以红色文字显示确切的时间。

Chrome开发者工具详解(2)-Network面板_网络请求

 

 

查看具体资源的详情

通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：

  • Headers 该资源的HTTP头信息。
  • Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
  • Response 显示HTTP的Response信息。
  • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
  • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

 使用小技巧

1.溯源某项资源是由哪个进程请求的，或者说在哪个页面或者js 中发起(Initiator 标记请求是由哪个对象或进程发起的（请求源）)

Chrome开发者工具详解(2)-Network面板_生命周期_02

 

 当资源请求失败时确定第一步是否开启 initiator 功能， 然后点击 第二部 index 进入 

 

 Chrome开发者工具详解(2)-Network面板_网络请求_03

 

 将鼠标放在 index 上提示这个资源是请求的路径，然后我们看到  js  是压缩的点击第三步的  {}  就能够格式化展开脚本