Chrome DevTools 使用

DevTools

公共区域与通用操作

Chrome DevTools 使用

[1]:可用来在页面中使用鼠标选择元素

[2]:在移动端和 pc 端效果间切换,切换至移动端后还可在页面上方调整窗口尺寸

[3]:进入 DevTool 的设置界面

[4]:姑且叫做“更多”,其中内容下文会陆续提到

使用Commend + [Commend + ]直接进行标签间的切换

调整布局

右击条目名称可在上下两部分间移动

Chrome DevTools 使用

Run command

快捷键: shift + command + p

截屏

输入 capture full 即可看到 capture full size screenshot 执行它,你就可以得到一张当前页面的截图

暗黑主题

将 DevTool切换至暗黑色:switch to dark theme

Element

左侧为DOM结构,节点上右击可进行操作,这里着重列出较重要或不明显的功能,下文列表同

  • 选定节点上按h可隐藏
  • 右击 => Break on,可针对 DOM 设置断点
  • Capture node screenshot 获得节点截图

右侧为选中节点的详细属性。

  • Style 显示应用其上的所有 css,右上方 :hov.cls 可展开,分别为控制伪类效果和 class 应用
  • Computed 可按 css 属性名查看生效属性
  • DOM Breakpoints DOM 断点列表

Console

Live expression

上方 Filter 左侧可以看到一个眼睛图标(Live expression),可实时显示键入表达式的值,适合需要持续查看的变量。

console.table

以一个更优雅的方式来打印数组或对象,大概率你会喜欢上它

Chrome DevTools 使用

进一步,你不妨在需要同时打印多个原始类型变量时使用 console.table,例如 console.table({a, e, b}) 而不是 console.log(a, b, e)

Console.dir

以对象形式打印 DOM 节点的所有信息

Chrome DevTools 使用

Sources

对于这部分内容我不认为我可以讲得比这篇文章更好:使用断点暂停代码,推荐直接参考这篇文章,而下面则是我认为在这文章基础上再值得一提的内容

Chrome DevTools 使用

Sources 面板界面的 3 个部分

  1. File Navigator 窗格。 此处列出页面请求的每个文件。
  2. Code Editor 窗格。 在 File Navigator 窗格中选择文件后,此处会显示该文件的内容。
  3. JavaScript Debugging 窗格。 检查页面 JavaScript 的各种工具。 如果 DevTools 窗口布局较宽,此窗格会显示在 Code Editor 窗格右侧。

https://developers.google.cn/web/tools/chrome-devtools/javascript?hl=zh-cn

watch

位于 JavaScript Debugging 中,具有和上文提到的 Live expression 同样的功能

snippets

可以存储一段 js 代码,在任何任何时候执行,这项功能一个应用场景是你需要在一个共同开发项目中,每次进行一些每个人个性化的操作,你便可以将这段代码保存在 snippets 中,在以后快速执行

在上文提到的 File Navigator 区域选择 snippets,选择 New snippets 创建一份代码片段并命名

以后你就可以在任何时候先使用 command + p 唤出 command menu,再键入一个 ! 即可看到所有代码片段,选则或键入代码片段名称执行即可

在 command menu 中键入 > 即是 Run command 状态,你可以在 command menu 中键入 ? 查看所有功能

XHR/fetch Breakpoints

JavaScript Debugging 内,通过添加的关键字匹配,当请求 URL 中包含关键字时,断点生效

Conditional breakpoints

条件断点:在对应行号右击 => add conditional breakpoints,再输入一个表达式。当表达式为真,断点会是生效状态,反之断点不生效

使用 Webstorm 调试 React/Vue 项目

Run => Edit Configurations,新建一个 Javascript Debug 配置项

Chrome DevTools 使用

针对当前项目配置调试地址和调试用浏览器,保存

在代码中设置断点

接着先按原方式 start 起来,再 Run => Debug 'xxxx(配置项名称)'

这时 Webstorm 会启动一个运行在新进程上的 Chrome,当程序运行至断点代码处时,就可开始正常调试了

Network

隐藏时间轴

点击右侧小齿轮 Show overview 可以决定时间轴的显示和隐藏,如果你不需要它,大可以隐藏掉它

自定义显示属性

在列表头部右击可以选择显示属性

Chrome DevTools 使用

显示调用栈

将鼠标悬停于请求的 Initiator 属性上,即可显示请求的调用栈,以此定位请求发起位置

Chrome DevTools 使用

Filter

使用类似 method:POST-method:POST 命令进行正反过滤

filter 右侧可选择类别进行筛选

模拟慢网络

filter 上方可进行不同网络状态的模拟

Chrome DevTools 使用

Performance

用来详细记录页面活动,分析性能

首先附一个 Performance 的简述:Chrome Devtool — Performance

Overview

以 overview 中 FPS 项为例说明图像:FPS 对应的绿色曲线,高度越高,代表帧率越高。在帧率持续低部分,有可能出现红色条块,红色条块长度与卡顿程度正相关。

火焰图

下方火焰图部分,我们以 Main 为例。Main 表示的是页面的主线程,以一个倒置的火焰图呈现,每一个 Task 的宽度,对应其运行时间,纵向为其调用树。对于占时较长的 Task,右上角会有一红三角标识,代表 Long task

如何读懂火焰图? - 阮一峰的网络日志

Memory

Heap snapshot

创建堆快照

选中 heap snapshot 状态下点击 Take snapshot 创建一份内存快照。

快照内容

Shallow Size:浅层大小,就是对象本身的大小(不包括它内部引用的对象),这个我们通常不太关注

Retained Size:保留大小,就是如果GC回收这个对象后,可以释放多少内存,这个我们非常关注

https://www.cnblogs.com/amiezhang/p/11324900.html

Distance 为对象到 GC root 的距离

我们可以从下面的堆分析器记录中看到一些引人注目的参数,例如距离:距离是指与 GC 根之间的距离。如果相同类型的几乎所有对象的距离都相同,只有少数对象的距离偏大,则有必要进行调查。

https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101

Application

Storage

常用存储的查看和操作

Frames

* top 下展开就是当前页面的字体、图片等资源,同样包括 iframe 内容

参考

Chrome 开发者工具  |  Chrome DevTools  |  Google Developers【推荐一读】

你不知道的 Chrome 调试技巧 - dendoink - 掘金小册

以及上文中已出现的所有链接

上一篇:[devtools]my using


下一篇:vue-devtools的安装