快捷键

ctrl + shift + c : 快速查看元素
ctrl + shift + J (cmd + alt + J): 打开开发者工具并把焦点放在控制台上
H: elments 面板中，隐藏/显示元素
ctrl + M: 找到匹配的括号

console

console 命令

console.log()

console.log 是支持像 C 里的 sprintf 那种 format 方式的。

  1. // Syntax
  2. console.log(msg, values)
  3. // Demo
  4. const a = { x: { xx: '123', yy: '4545' }, y: { zz: '6543'} };
  5. console.log("test hhh %o", a)

chrome devtool - 图3

占位符可以有 %s、%o（对象）、%d 等等。

还有一种比较骚的是 %c，它事实上是 css 的占位符：

chrome devtool - 图4

如果是用来做点 log，其实还蛮炫的，不过用法在细节上有些 weird。

  • %o / %O - 代表 objects;
  • %d / %i - 代表 integers;
  • %s - 代表 strings;
  • %f - 代表 floating-point numbers;
  • 样式应用于 %c 指令后面的所有内容。通过使用另一个 %c 指令来闭合样式的使用。如果要使用普通的，无格式的日志内容，则需要为 %c 传递一个为空的字符串。需要注意的是，提供给 ％c指令以及其他替代字符串的参数需要以正确的顺序添加
  1. console.log("Object value: %o with string substitution",
  2.     {string: "str", number: 10});
  4. console.log("Example %cCSS-styled%c %clog!",
  5.     "color: red; font-family: monoscope;",
  6.     "", "color: green; font-size: large; font-weight: bold");

console.dir()

一般情况下，它的结果和 console.log 是一样的。也可以直接使用dir()
但是当传入的是一个 DOM 时，就有如下区别：

chrome devtool - 图5

chrome devtool - 图6

可以看出，当你想看一个 DOM 元素细节的时候，console.dir 打印出来的可能更符合我们的期待。

console.warn()

它和 console.log 唯一的区别就是会变黄，但也不止于此，你可以在下图所示的地方做 filter，这样 log 就会变得更清晰：

chrome devtool - 图7

console.table()

这个东西是极其骚的，但是以前没关注过。如果我们有下面这种数组数据：

  1. const data = [{
  2.   id: "7cb1-e041b126-f3b8",
  3.   seller: "WAL0412",
  4.   buyer: "WAL3023",
  5.   price: 203450,
  6.   time: 1539688433
  7. },
  8. {
  9.   id: "1d4c-31f8f14b-1571",
  10.   seller: "WAL0452",
  11.   buyer: "WAL3023",
  12.   price: 348299,
  13.   time: 1539688433
  14. },
  15. {
  16.   id: "b12c-b3adf58f-809f",
  17.   seller: "WAL0012",
  18.   buyer: "WAL2025",
  19.   price: 59240,
  20.   time: 1539688433
  21. }];

console.table 和 console.log 的对比如下：

chrome devtool - 图8

还可以通过第二个参数指定打印出的列：

  1. console.table(data, ["id", "price"])

效果如下：

chrome devtool - 图9

需要指出的是，console.table 方法最多打印 1000 行。

console.group()

  1. // 分组打印
  2. console.group();
  3. console.log("Inside 1st group");
  4. console.group();
  5. console.log("Inside 2nd group");
  6. console.groupEnd();
  7. console.groupEnd();
  8. console.log("Outer scope");

console 面板

jQuery 方式获取元素

比如修改标签中的内容，直接在Elements中修改比较不方便，这时可以在console面板中将需要修改的部分直接拿出来改
image.png

进入检查元素模式

  1. inspect(document.body)

image.png

异步console

console 默认就被 async 包裹，可以直接使用 await

  1. await navigator.storage.estimate() # Storage 系统的 占用数 和 空闲数
  2. console.table(await navigator.getBattery()) # 设备的 电池信息
  3. query={type: 'file', audio:{contentType: 'audio/ogg'}}
  4. console.table(await navigator.mediaCapabilities.decodingInfo(query))# 媒体能力
  5. await caches.keys() # 一般用来对 request 和 response 进行缓存

命令行API

注意: 如果你使用的库，如jQuery使用$，那么这个功能将被覆盖，并且$将对应用该库的实现

  • $_返回最近一次计算的表达式的值。
  • $0, $1, $2, $3 和 $4 命令用作对Elements(元素)面板中检查的最后五个DOM元素或在Profiles(分析)面板中选择的最后五个JavaScript对象的历史引用。
  • Reveal in Elements Panel(在元素面板中显示)在DOM中找到它
  • 或选择Scroll in to View(滚动到视图)

    Elements

    styles

    在styles中，单击您修改过的文件，将跳到Sources面板中：
    image.png

右击该文件，选择 Local modifications（本地修改）：

  • 粉红色背景的表示移除；
  • 绿色背景的表示添加；
  • 左下角的revert可以撤销对文件进行的所有本地修改

image.png

点击.cls 按钮查看与当前选定元素相关联的所有CSS类，这里可以：

  • 启用或禁用当前与元素相关联的类
  • 向元素添加新的类

image.png

在样式规则的右下角，将鼠标悬停在样式上，可以看到一个添加颜色等声明的快捷方式：
image.png
颜色选择器(color picker):

  1. Eyedropper(吸管)
  2. Current color(当前颜色) - 当前值的可视化显示。
  3. Current value(当前值) - 十六进制，, RGBA, 或用 HSL 表示Current color(当前颜色) 。
  4. Color palette(调色板)
  5. Tint and shade selector(色调和色调选择器)。
  6. Hue selector(色相选择器)。
  7. Opacity selector(不透明度选择器)。
  8. Color value selector(颜色值选择器) - 单击可在RGBA，HSL和十六进制之间切换。
  9. Color palette selector(调色板选择器) - 单击以选择不同的模板。

image.png

CSS 自定义属性(css变量)

CSS 变量通常定义在 :root 选择器上(不必须)，挂载在 html 元素上。
image.png

使用css变量时形如：
image.png

Event Listeners

  • 使用monitorEvents()监听某一类型的事件。
  • 使用unmonitorEvents()停止监听。
  • 使用getEventListeners()获取DOM元素的监听器。
  • 使用Event Listeners Inspector(事件监听检查器)面板获取有关事件监听器的信息。
  1. monitorEvents(document.body, "click");
  2. unmonitorEvents(document.body);
  3. getEventListeners(document);
事件类型 对应的映射事件
mouse mousedown, mouseup, click, dbclick, mousemove, mouseover, mouseout, mousewheel
key keydown, keyup, keypress, textInput
touch touchstart, touchmove, touchend, touchcancel
control resize, scroll, zoom, focus, blur, select, change, submit, reset

NetWork

Filter

image.png
支持关键字：

  • domain(域) : 仅显示来自指定域的资源。您可以使用通配符（*）来包括多个域。例如，*.com显示以.com结尾的所有域名中的资源。 DevTools会在自动完成下拉菜单中自动填充它遇到的所有域。
  • has-response-header(响应头信息) : 显示包含指定HTTP响应头信息的资源。 DevTools会在自动完成下拉菜单中自动填充它遇到的所有响应头。
  • is : 使用is:running过滤出WebSocket资源。
  • larger-than(大于) : 显示大于指定大小的资源（以字节为单位）。设置值1000等效于设置值1k。
  • method(方法) : 显示通过指定的HTTP方法类型检索的资源。DevTools使用它遇到的所有HTTP方法填充下拉列表。
  • mime-type(mime类型) : 显示指定MIME类型的资源。 DevTools使用它遇到的所有MIME类型填充下拉列表。
  • mixed-content(混合内容) : 显示所有混合内容资源（mixed-content:all）或仅显示当前显示的内容（mixed-content:displayed）。
  • scheme(协议) : 显示通过不受保护的HTTP（scheme:http）或受保护的HTTPS（scheme:https）检索的资源。
  • set-cookie-domain(cookie域) : 显示具有Set-Cookie头,并且其Domain属性与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有Cookie域。
  • set-cookie-name(cookie名) : 显示具有Set-Cookie头,并且名称与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有Cookie名。
  • set-cookie-value(cookie值) : 显示具有Set-Cookie头,并且值与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有cookie值。

  • status-code(状态码) : 仅显示其HTTP状态代码与指定代码匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有状态码。

    Timing

  • Queuing(排队)

  • Stalled(停滞)
  • DNS lookup(DNS查找)
  • initial connection(初始连接)
  • SSL handshake(SSL握手)
  • Request sent(请求发送)：通常是几分之一毫秒。
  • Waiting(等待)（到开始下载第一个字节的时间（TTFB））

TTFB 就是等待第一个响应字节的时间，建议在200ms以下，以下情况可能会导致高TTFB:

  1. 客户端和服务器之间的网络条件差，
  2. 服务器端程序响应很慢。
    • Content Download(内容下载)
  • 提高服务响应速度、并行下载等优化措施帮助都不大。 主要的解决方案是发送更少的字节,优化下载资源

image.png

实例

绿色表示开始发送请求，蓝色表示请求发送结束：
image.png

Cookies

此标签页仅在传输Cookie时可用
Cookie列表中每个列的说明：

  • Name(名称) : Cookie的名称。
  • Value(值) : Cookie的值。
  • Domain(域) : Cookie所属的域。
  • Path(路径) : Cookie来自的网址路径。
  • Expires / Max-Age(到期/最大可用时间) : Cookie的有效期或max-age属性的值。
  • Size(尺寸) : Cookie的大小（以字节为单位）。
  • HTTP : 表示Cookie只能由浏览器在HTTP请求中设置，且无法使用JavaScript访问。

  • Secure(安全) : 此属性的存在表示Cookie只能通过安全连接传输(愚人码头注：HTTPS协议传输)。

    Frames

    查看WebSocket连接信息,仅在所选资源由WebSocket连接发起时可见.Frames(帧)列表只保留最近的100条WebSocket消息。

  • Data(数据): 消息承载的内容。如果消息是纯文本，则会显示在此处。 如果是二进制操作码，这个字段显示操作码的名称和代码。支持以下操作码：

    • Continuation Frame
    • Binary Frame
    • Connection Close Frame
    • Ping Frame
    • Pong Frame
  • Length(长度) :消息承载内容的长度（以字节为单位）。
  • Time(时间) :创建消息时的时间戳。

消息根据其类型进行颜色编码：

  • 发出的文本消息是浅绿色的。
  • 收到的文本消息是白色的。
  • WebSocket操作码是浅黄色。
  • 错误是浅红色的。

source

设置条件断点

image.png
可以给断点设置进入条件，比如 i=5，就代表只有当i=5的时候才会进入断点

performance

Controls： 开始录制，停止录制，并配置在录制过程中捕获的信息。

录制注意事项

  • 保持录制尽可能短。 较短的录制通常使分析更容易。
  • 避免不必要的操作。避免与您要录制和分析的活动无关的操作（鼠标点击，网络加载等）。 例如，如果要录制点击登录按钮后发生的事件，不要滚动页面，加载图像等。
  • 禁用浏览器缓存。当录制网络操作时，最好从DevTools Settings(设置)面板或Network conditions(网络条件)抽屉式窗格中禁用浏览器的缓存。

  • 禁用扩展程序。Chrome扩展程序可能会对应用程序的时间轴录制产生一些不相关的干扰。请在隐身模式中打开Chrome窗口，或创建新的Chrome用户配置文件，以确保您的环境没有扩展程序。

    Overview

    页面性能的高级摘要。

  • FPS： 每秒帧数。绿色条越高，FPS越高。FPS曲线图上方的红色块表示长帧，这可能是jank的候选。

  • CPU： CPU资源。此区域图表指示哪些类型的事件消耗CPU资源。
  • NET：每个彩色条代表一个资源。条越长，表示检索该资源所花费的时间越长。每个条的较亮部分表示等待时间（从请求资源到下载第一个字节之间的时间）。较暗的部分表示加载时间（下载第一个到最后一个字节之间的时间）。

彩色条代表的含义如下：

  • HTML文件: blue (蓝色)
  • 脚本: yellow (黄色)
  • 样式表: purple (紫色)
  • 媒体文件: green (绿色)
  • 其他杂项资源: grey (灰色)

Flame Chart

CPU 栈跟踪的可视化。
你可能会在你的火焰图表看到一到三个点和垂直线。 蓝线代表DOMContentLoaded事件。 绿线表示第一次绘制的时间。 红线代表load事件。

Details

选择事件时，此窗格显示有关该事件的更多信息。 当未选择任何事件时，此窗格显示有关所选时间范围的信息。
image.png

事件属性

通用事件属性

属性 属性 显示详情
Aggregated time 聚合时间 对于具有嵌套事件的事件，每个事件类别所花费的时间
Call Stack 访问栈 对于具有子事件的事件，每个事件类别所花费的时间
CPU time CPU 时间 录制的事件占用了多少CPU时间
Details 详细信息 关于事件的其他详细信息
Duration (at time-stamp) 持续时间
 事件和子事件完成所花费的时间，时间戳是事件发生的开始时间，相对于录制开始的时间
Self time 自身时间 事件本身完成所花费的时间，不包括子事件
Used Heap Size 使用的堆大小 当录制事件时，应用程序所耗内存，和上次采用以来使用堆大小的增量变化

loading事件

事件 事件 显示详情
Parse HTML 解析 HTML chrome 执行其 HTML 解析语法
Finish Loading 结束加载 一个网络请求完成
Receive Data 接收数据 收到请求的数据，将有一个或多个接收数据事件
Receive Response 接收响应 来自一个请求的HTTP响应
Send Request 发送请求 网络请求已发送

loading 事件属性

属性 属性 显示详情
Resource 资源 所请求资源的 URL
Preview 预览 预览所有请求的资源(仅限‘image’）
Request Method 请求方法 用于请求的 HTTP 方法(如‘GET’或‘POST’)
Status Code 状态码 HTTP 响应状态码
MIME Type MIME 类型 所请求资源的 MIME 类型
Encoded Data Length 编码数据长度 以字节为单位的请求资源的长度

scripting 属性

事件 事件 显示详情
Animation Frame Fired 动画帧发射 一个预定的动画帧被触发，并调用它的回调处理程序
Cancel Animation Frame 取消动画帧 动画帧被取消
GC Event GC 事件 垃圾回收时触发
DOMContentLoaded 浏览器触发DOMContentLoaded 当所有网页的DOM内容都已加载并解析时，会触发此事件
Evaluate Script 计算脚本 评估一个脚本
Event Event JS 事件
Function Call 函数调用 进行了顶级JS函数调用（仅在浏览器进入JS引擎时显示）
Install Timer 安装计时器 使用 setTimeout 或 setInterval 创建的一个定时器
Request Animation Frame 请求动画帧 requestAnimationFrame()调用一个预定的新帧
Remove Timer 移除计时器 先前创建的计时器被移除
Time 计时 调用console.time()
Time End 结束计时 调用console.timeEnd()
Timer Fired 计时器触发 调用先前定义的 setTimeout 或 setInterval 触发定时器
XHR Ready State Change XHR就绪状态更改 XMLHTTPReques的就绪状态发生变化
XHR Load 一个 XHR 完成加载

scripting 事件属性

属性 属性 显示详情
Timer ID 计时器 ID 计时器 ID
Timeout 超时 计时器指定的超时时间
Repeats 重复 布尔值，如果计时器重复
Function Call 函数调用 一个函数被调用

Rendering 事件

事件 事件 显示详情
invalidate layout 布局无效 通过DOM修改使页面无效
Layout 布局 执行了页面布局
Recalculate style 重新计算样式 Chrome 重新计算元素样式
Scroll 滚动 内嵌的视图内容已滚动

Rendering 事件属性

属性 属性 显示详情
Layout invalidated 布局无效 对于布局录制，代码的堆栈跟踪导致布局无效
Nodes that need layout 需要布局的节点 对于布局录制，在重新开始启动之前标记为需要布局的节点数。这些节点通常是由开发人员无效的节点代码，加上一个向上的 relayout 根的路径
Layout tree size 布局树大小 对于布局录制，继承根下的节点总数(chrome启动重新布局的节点)
Elements affected 受影响的元素 对于重新计算样式录制，受样式重新计算影响的元素数量
Styles invalidated 样式无效 对于重新计算样式录制，提供导致style无效的代码栈跟踪

Panting 事件

事件 事件 显示详情
Composite Layers 复合层 chrome 的渲染引擎合成图像图层
Image Decode 图像解码 图像资源被解码
Image Resize 图像调整大小 图片的原始尺寸已调整大小
Paint 绘制 复合层被绘制到显示器的一个区域。悬停在绘制录制上，突出显示已更新的显示区域

Panting 事件属性

属性 属性 显示详情
Location 位置 对于 paint 事件，绘制矩形的X和Y坐标
Dimensions 尺寸 对于 paint 事件，绘制矩形的高度和宽度

memory

内存问题

  • 网页的性能效果会随着时间的推移逐渐变差：内存泄露是指页面中的错误导致页面逐渐使用越来越多的内存。

如果你看到JS堆曲线(JS heap)或节点曲线(DOM nodes)逐渐增加，它可能意味着内存泄漏

  • 网页的效果始终不佳：内存膨胀是指当页面使用的内存比最佳页面速度所需的内存多出很多。
  • 网页的效果延迟或频繁暂停：由于垃圾回收期间，所有的脚本执行都将暂停。因此频繁的垃圾回收会导致频繁的被暂停。

    浏览器的任务管理器

    打开浏览器的任务管理器：这两个值频繁地上升和下降代表垃圾回收频繁
    Memory：本机内存。创建 DOM 节点会使这个值增加。
    JavaScript Memory：JS 堆。可获得对象的增加会使这个值增长。

面板

通过录制快照可以定位分配内存的位置和导致分配的函数。

Heap Snapshot（采集堆快照）：

detached(分离DOM树的节点)：当一个节点从DOM树中移除时，但是一些JavaScript仍然引用它。分离的DOM节点是内存泄漏的常见原因。
Shallow Size(浅尺寸)：对象本身持有的内存大小
Retained Size(保留尺寸)：对象本身与其依赖对象一起被删除后所释放的内存大小，并且 GC roots 无法到达该处。
image.png
黄色节点：JS 直接引用。重点关注，修复代码，使其不活动的时间比活动时间长，
红色节点：没有直接引用，依然存在于内存中，是因为是黄色节点的一部分。

image.png

Allocation Instrumentation on timeline(录制分配时间轴)

蓝色条：表示新的内存分配。这些新的内存分配可能就是内存泄漏点

image.png

Setting

启用实验性功能

  1. chrome://flags/#enable-devtools-experiments

image.png

这时打开setting，可以看到 experiments 页面：
image.png

保留CSS修改

默认情况下，CSS修改不是永久的，当重新加载页面时，修改的内容就会丢失。
如果想要在页面重新加载时保留您的修改，请设置持续创作 。

资源

Chrome 开发者工具中文文档-在线手册-html中文网
Full property table：显示了可以被继承的 CSS 属性