Chrome DevTools 官方文档实践 --持续更新

就没有认真实践过 Chrome 的很多东西,所以很有必要实践下,尤其最近调试工具的需求越来越大。文中出现的在很多文章中也出现,因为都是看文档来的。但大部分是集中于 console、elements、network;我需要对性能比较详细的分析,所以需要认真看下性能分析方面的内容,代码不仅仅是能跑就可以了。 文中也只会记录我不常用的,不知道的一些东西。

Chrome DevTools

  • Device Mode 设备模式,直接忽略了

Console

这个就没有哪次不用的。

  1. 以抽屉形式打开 console ,这样就可以分为上下两栏,一般下面是 console 方便调试。F12 => ESC 快速设置到此模式。
  2. F1 打开 console 的选项设置。可以设置 chrome 的主题,可以看到快捷键, Console、 网络等有详细设置。对于 console 重要的一点就是可以显示 console 信息的时间点。

详细使用

  • console.time console.timeEnd 函数执行用时
  • console.trace 函数执行追踪
  • console.warn
  • console.info
  • console.group
  • console.assert() 用于判断表达式,满足表达式时才输出语句;
  • console.debug() 用于输出输出debug的信息;
  • console.dir() 用于展开输出一个dom元素的JavaScript对象;
  • console.profile() 用于记录代码消耗CPU的信息;
  • console.timeStamp() 用于标记运行时的timeline信息;
  • console.count() 用于记录代码执行的次数;
  • console.memory 用于显示此刻使用的内存信息(这是一个属性而不是方法);
  • console.table() 用表格的形式来输出信息;
  • console.clear() 清空控制台的内容(当然你可以用快捷键ctrl+L);

NETWORK

  • 详细的时间加载数据
  • http 的请求和响应头
  • cookie等

面板使用

https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading

  • 面板2区按住 ctrl 进行多选查看 xhr、js等进行多选查看网络信息
  • 面板4区在 name method 表格的title上面右键可以选择查看不同的信息:

    • Name. The name of the resource.
    • Status. The HTTP status code.
    • Type. The MIME type of the requested resource.
    • Initiator. The object or process that initiated the request. It can have one of the following values: 哪个对象或者进程发起的这个请求:
      • Parser. Chrome's HTML parser initiated the request.
      • Redirect. An HTTP redirect initiated the request.
      • Script. A script initiated the request.
      • Other. Some other process or action initiated the request, such as the user navigating to a page via a link, or by entering a URL in the address bar.
    • Size. The combined size of the response headers (usually a few hundred bytes) plus the response body, as delivered by the server.
    • Time. The total duration, from the start of the request to the receipt of the final byte in the response.
    • Timeline. The Timeline column displays a visual waterfall of all network requests. Clicking the header of this column reveals a menu of additional sorting fields.
  • 记录加载时的图片:可以通过此来查看随着时间的加载,网页状况是怎么样的,主要是记录DOM的变化,分析哪块的DOM 影响了加载, 最终知道如何去优化加载。

  • 页面加载计时分为: DOMContentLoaded 和 load ,前者指HTML渲染完成,后者就是所有资源加载完毕
  • 可以 View WebSocket frames

理解资源时序

原文:understanding-resource-timing

文章就是为上图的各项进行详细的说明。

  • Queued or Stalled series 队列和失速系列:

区分 HTTP1.1 和 HTTP2: 在http1.1/1.0, 对同一个域名的最大并发请求是6;注意这里指的是请求,所以可以使用子域名加载数据,用来加快加载速度。 但在 HTTP2 协议来说,这是不可取的。 In HTTP 2, there is a single TCP connection to the server that acts as a multiplexed connection. This gets rid of the six connection limit of HTTP 1 and multiple resources can be transferred over the single connection simultaneously.

Sources

使用源面板中的断点调试 JavaScript 或者通过工作区连接本地文件以使用 DevTools 实时编辑器。对于普通的 JS 断点调试倒是没什么问题。99% 都是使用 console 来做调试。Workspaces 也基本没用,因为并没有感觉很方便。

不熟悉的就是: 对 DOM 的改变进行断点调试,还有属性和元素节点的移除进行断点调试。

  • Subtree modifications
  • attribute modification
  • node removal

还有 XHR, Event 的断点调试:

Timeline

使用时间轴通过记录和探索网站生命周期中发生的各种事件来提高网页的运行时性能。这个用的少,一般来说先把功能实现全吧,基本上到不了这一步。只有自己研究一些问题时才会开来看看。

4个部分:

  • 控制: 开始录制,停止录制,并配置在录制过程中捕获的信息
  • 概述:页面性能的高级摘要。更多关于这一点下面
  • 火焰图: CPU堆栈跟踪的可视化
  • Details. When an event is selected, this pane shows more information about that event. When no event is selected, this pane shows information about the selected time frame.

概述面板

  • FPS: 每秒帧数。 绿色条越高,FPS越高。 FPS图上方的红色块表示长帧,这可能是jank的候选。
  • CPU: CPU资源。 此区域图表指示哪些类型的事件消耗CPU资源。
  • NET:每个彩色条代表一个资源。 栏越长,检索资源所需的时间越长。 每个条的较亮部分表示等待时间(从请求资源到下载第一个字节的时间之间的时间)。 较暗的部分表示传输时间(从下载第一个和最后一个字节之间的时间)。
    • HTML files are blue.
    • Scripts are yellow.
    • Stylesheets are purple.
    • Media files are green.
    • Miscellaneous resources are grey.

记录

简单说几条:

  • Keep recordings as short as possible
  • Avoid unnecessary action
  • Disable the browser cache
  • Disable extensions

查看记录详情

这里比较复杂,涉及的东西还是比较多的。下面链接即在记录的时间线里可能发生的所有的事件。

Elements

基本的对于 HTML 和 CSS 的修改就不说了,但是 sourcemap 就值得一说了。

下面是一些简单的操作:

Using your mouse:

  • Click once to highlight a node.
  • To expand a node, double-click anywhere on it or click on the arrow next to it.
  • To collapse a node, click on the arrow next to it.

Using your keyboard:

  • Press the Up Arrow key to select the node above the current one.
  • Press the Down Arrow to select the node below the current one.
  • Press the Right Arrow key to expand a collapsed node. Press it again to move to the first child of the (now-expanded) node. You can use this technique to quickly navigate deeply-nested nodes.

Click, hold, and drag a node to move it. 移动元素节点。

Profiles

配置文件面板提供比时间轴更加丰富的信息。不做细节的探讨了。

Application

使用“资源”面板来检查所有加载的资源,包括IndexedDB或Web SQL数据库,本地和会话存储,Cookie,应用程序缓存,图像,字体和样式表。

Security

这里好像没啥讲的了。