Chrome Devtools 高级调试指南（新）总结

系统管理员 2023-06-07 05:46 28阅读 0赞

# 1. `Chrome Devtools` 的用处 #

*  前端开发：开发预览、远程调试、性能调优、`bug`跟踪、断点调试等
 *  后端开发：网络抓包、开发调试`Response`
 *  测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试
 *  其他：安装扩展插件，如`AdBlock`、`Gliffy`、`Axure`等

# 2. 菜单面板拆解 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]

*  `Elements` \- 页面`dom`元素
 *  `Console` \- 控制台
 *  `Sources` \- 页面静态资源
 *  `Network` \- 网络
 *  `Performance` \- 设备加载性能分析
 *  `Application` \- 应用信息，`PWA/Storage/Cache/Frames`
 *  `Security` \- 安全分析
 *  `Audits` \- 审计，自动化测试工具

# 3. 常用命令和调试 #

## 1. 呼出快捷指令面板：`cmd + shift + p` ##

在`Devtools`打开的情况下，键入`cmd + shift + p`将其激活，然后开始在栏中键入要查找的命令或输入`"?"`号以查看所有可用命令。  
![在这里插入图片描述][20191013101713497.jpg]

*  `…`: 打开文件
 *  `:`: 前往文件
 *  `@`：前往标识符（函数，类名等）
 *  `!`: 运行脚本文件
 *  `>`: 打开某菜单功能  
    ![在这里插入图片描述][20191013101849193.gif]

### 1.性能监视器：`> performance monitor` ###

![在这里插入图片描述][20191013101932750.gif]  
将显示性能监视器以及相关信息，例如CPU，JS堆大小和DOM节点。

### 2.FPS实时监控性能：`> FPS`选择第一项 ###

![在这里插入图片描述][2019101310202726.gif]

### 3.截图单个元素：`> screen` 选择 `Capture node screenhot` ###

![在这里插入图片描述][20191013102148129.jpg]  
![在这里插入图片描述][20191013102101263.gif]

## 2. `DOM` 断点调试 ##

当你要调试特定元素的DOM中的更改时，可以使用此选项。这些是DOM更改断点的类型：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

*  `Subtree modifications`: 子节点删除或添加时
 *  `Attributes modifications`: 属性修改时
 *  `Node Removal`: 节点删除时  
    ![在这里插入图片描述][20191013102501831.gif]  
    如上图：监听`form`标签，在`input`框获得焦点时，触发断点调试

## 3. 黑盒脚本：`Blackbox Script` ##

剔除多余脚本断点。

例如第三方（`Javascript`框架和库，广告等的堆栈跟踪）。

为避免这种情况并集中精力处理核心代码，在`Sources`或网络选项卡中打开文件，右键单击并选择`Blackbox Script`  
![在这里插入图片描述][20191013102625142.gif]

## 4. 事件监听器：`Event Listener Breakpoints` ##

1.  点击`Sources`面板
2.  展开`Event Listener Breakpoints`
3.  选择监听事件类别，触发事件启用断点  
    ![在这里插入图片描述][20191013102807759.gif]  
    如上图：监听了键盘输入事件，就会跳到断点处。

## 5. 本地覆盖：`Local overrides` ##

使用我们自己的本地资源覆盖网页所使用的资源。

类似的，使用`DevTools`的工作区设置持久化，将本地的文件夹映射到网络，在`chrome`开发者功能里面对`css`样式的修改，都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。

*  创建一个文件夹以在本地添加替代内容；
 *  打开`Sources >`; `Overrides >`; `Enable local Overrides`，选择本地文件夹  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]
 *  打开`Elements`，编辑样式，自动生成本地文件。
 *  返回`Sources`，检查文件，编辑更改。  
    ![在这里插入图片描述][20191013103122397.gif]

## 6. 扩展：`Local overrides` 模拟 `Mock` 数据 ##

> 来自：chrome 开发者工具 - local overrides

对于返回json 数据的接口，可以利用该功能，简单模拟返回数据。

比如：

*  api 为: `http://www.xxx.com/api/v1/list`
 *  在根目录下，新建文件`www.xxx.com/api/v1/list`，`list`文件中的内容，与正常接口返回格式相同  
    ![在这里插入图片描述][20191013103326635.jpg]  
    对象或者数组类型，从而覆盖掉原接口请求

# 4. 控制台内置指令 #

可以执行常见任务的功能，例如选择`DOM`元素，触发事件，监视事件，在`DOM`中添加和删除元素等。

这像是`Chrome`自身实现的`jquery`加强版。

## 1. `$(selector, [startNode])`：单选择器 ##

`document.querySelector`的简写  
语法：

$('a').href;
    $('[test-id="logo-img"]').src;
    $('#movie_player').click();

![在这里插入图片描述][20191013103450424.gif]  
控制台还会预先查询对应的标签，十分贴心。  
还可以触发事件，如暂停播放：  
![在这里插入图片描述][20191013103519512.gif]  
此函数还支持第二个参数`startNode`，该参数指定从中搜索元素的“元素”或`Node`。此参数的默认值为`document`

## 2. `$$(选择器，[startNode])`：全选择器 ##

`document.querySelectorAll`的简写，返回一个数组标签元素  
语法：

$$('.button')

![在这里插入图片描述][20191013103723228.gif]  
可以用过循环实现切换全选  
![在这里插入图片描述][2019101310374820.gif]  
或者打印属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]  
此函数还支持第二个参数`startNode`，该参数指定从中搜索元素的“元素”或`Node`。此参数的默认值为`document`  
用法：

var images = $$('img', document.querySelector('.devsite-header-background'));
       for (each in images) {
           console.log(images[each].src);
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]

## 3. `$x(path, [startNode])`：xpath选择器 ##

`$x(path)`返回与给定`xpath`表达式匹配的`DOM`元素数组。

例如，以下代码返回`<p>`页面上的所有元素：

$x("//p")

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]  
以下代码返回`<p>`包含`<a>`元素的所有元素：

$x("//p[a]")

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6]  
`xpath`多用于爬虫抓取，前端的同学可能不熟悉。

## 4. `getEventListeners(object)`：获取指定对象的绑定事件 ##

`getEventListeners(object)`返回在指定对象上注册的事件侦听器。返回值是一个对象，其中包含每个已注册事件类型（例如，`click`或`keydown`）的数组。每个数组的成员是描述为每种类型注册的侦听器的对象。  
用法:

getEventListeners(document);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7]  
相对于到监听面板里查事件，这个API便捷多了。

# 5. 花式`console` #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 8]  
除了不同等级的`warn`和`error`打印外  
![在这里插入图片描述][20191013104602128.jpg]  
还有其它非常实用的打印。

## 1. 变量打印：`%s`、`%o`、`%d`、和`%c` ##

const text = "文本1"
    console.log(`打印${text}`)

除了标准的`ES6`语法，实际上还支持四种字符串输出。  
分别是：

console.log("打印 %s", text)

*  `%s`：字符串
 *  `%o`：对象
 *  `%d`：数字或小数

还有比较特殊的`%c`，可用于改写输出样式。

console.log('%c 文本1', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue')

![在这里插入图片描述][2019101310490532.jpg]  
当然，你也可以结合其它一起用(注意占位的顺序)。

const text = "文本1"
    console.log('%c %s', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue', text)

![在这里插入图片描述][20191013105022341.jpg]  
你还可以这么玩：

console.log('%c Auth ', 
                'color: white; background-color: #2274A5', 
                'Login page rendered');
    console.log('%c GraphQL ', 
                'color: white; background-color: #95B46A', 
                'Get user details');
    console.log('%c Error ', 
                'color: white; background-color: #D33F49', 
                'Error getting user details');

![在这里插入图片描述][2019101310512340.jpg]

## 2. 打印对象的小技巧 ##

当我们需要打印多个对象时，经常一个个输出。且看不到对象名称，不利于阅读：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9]  
以前我的做法是这么打印：

console.log('hello', hello);
    console.log('world', world);

这显然有点笨拙繁琐。其实，输出也支持对象解构：

console.log({hello, world});

![在这里插入图片描述][20191013105427724.gif]

## 3. 布尔断言打印：`console.assert()` ##

当你需要在特定条件判断时打印日志，这将非常有用。

*  如果断言为`false`，则将一个错误消息写入控制台。
 *  如果断言是`true`，没有任何反应。

语法

console.assert（assertion，obj）

用法

const value = 1001
    console.assert(value===1000,"value is not 1000")

![在这里插入图片描述][20191013105546133.jpg]

## 4. 给`console` 编组：`console.group()` ##

当你需要将详细信息分组或嵌套在一起以便能够轻松阅读日志时，可以使用此功能。

console.group('用户列表');
    console.log('name: 张三');
    console.log('job: ?前端');
    // 内层
    console.group('地址');
    console.log('Street: 123 街');
    console.log('City: 北京');
    console.log('State: 在职');
    console.groupEnd(); // 结束内层
    console.groupEnd(); // 结束外层

![在这里插入图片描述][20191013105636883.jpg]

## 5. 测试执行效率：`console.time()` ##

没有`Performance API`精准，但胜在使用简便。

let i = 0;
    console.time("While loop");
    while (i < 1000000) {
      i++;
    }
    console.timeEnd("While loop");
    console.time("For loop");
    for (i = 0; i < 1000000; i++) {
      // For Loop
    }
    console.timeEnd("For loop");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 10]

## 6. 输出表格：`console.table()` ##

这个适用于打印数组对象

let languages = [
        { name: "JavaScript", fileExtension: ".js" },
        { name: "TypeScript", fileExtension: ".ts" },
        { name: "CoffeeScript", fileExtension: ".coffee" }
    ];
    console.table(languages);

![在这里插入图片描述][20191013105845193.jpg]

## 7. 打印 `DOM` 对象节点：`console.dir()` ##

打印出该对象的所有属性和属性值.  
`console.dir()`和`console.log()`的作用区别并不明显。若用于打印字符串，则输出一摸一样。

console.log（"Why，hello!"）；
    console.dir（"Why，hello!"）;

![在这里插入图片描述][20191013105952205.jpg]  
在输出对象时也仅是显示不同（`log`识别为字符串输出，`dir`直接打印对象）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 11]  
唯一显著区别在于打印`dom`对象上：

console.log(document)
    console.dir(document)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 12]  
一个打印出纯标签，另一个则是输出`DOM`树对象。

# 6. 远程调试`WebView` #

使用`Chrome`开发者工具在原生`Android`应用中调试`WebView`。

1.  配置`WebViews`进行调试。  
    在 `WebView`类上调用静态方法`setWebContentsDebuggingEnabled`

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        WebView.setWebContentsDebuggingEnabled(true);
    }

1.  手机打开`usb`调试，插上电脑。
2.  在`Chrome`地址栏输入：`Chrome://inspect`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 13]
    
    正常的话在`App`中打开`WebView`时，`chrome`中会监听到并显示你的页面。
3.  点击页面下的`inspect`，就可以实时看到手机上`WebView`页面的显示状态了。（第一次使用可能会白屏，这是因为需要去`https://chrome-devtools-frontend.appspot.com`那边下载文件）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 14]  
    除了`inspect`标签，还有`Focus tab`:

它会自动触发`Android`设备上的相同操作

\[参考资料\]

>  *  Practical Chrome Devtools — Common commands & Debugging
>  *  Mobile web specialist — Remote Debugging
>  *  Console Utilities API Reference
>  *  Console API Reference

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20230601/c7eb49e3fefd4b42ae9a06b2e5a8b8be.png
[20191013101713497.jpg]: /images/20230601/5966fca146c046639eae7794eac78ef9.png
[20191013101849193.gif]: /images/20230601/8135ab9a5afd4a7aa1b06bee6ef9c2bc.png
[20191013101932750.gif]: /images/20230601/d88e1fb1d1164eae842de22769219694.png
[2019101310202726.gif]: /images/20230601/15ed36ec23f54991946acb272a0d1e91.png
[20191013102148129.jpg]: /images/20230601/ca55f2eb37d543c38c374f958b5d9e11.png
[20191013102101263.gif]: /images/20230601/18823845485e41759564fde65135da50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20230601/76261cbf79f84f6db88978964af9e5e8.png
[20191013102501831.gif]: /images/20230601/598995ff0f1542d3b062f17536aaefa9.png
[20191013102625142.gif]: /images/20230601/753c43057d2e4ab0a048106458dd2d51.png
[20191013102807759.gif]: /images/20230601/13c8750f03664fd3b31f66bf7b63c79e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20230601/09f67d6d52e9493e8f9f06fff281a5a2.png
[20191013103122397.gif]: /images/20230601/2d320fa534a0497e968826c55fafa701.png
[20191013103326635.jpg]: /images/20230601/d3e8d10e5fb44275a42f3b8de366026f.png
[20191013103450424.gif]: /images/20230601/7efab0551cda435e93665ef88dc3d1e1.png
[20191013103519512.gif]: /images/20230601/a1a279519bd247048b0cccd7e1a44006.png
[20191013103723228.gif]: /images/20230601/4fa829e9e84047a99156e674cd53aa63.png
[2019101310374820.gif]: /images/20230601/0957c03ef9d449f48bc20b8d7dcc359b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: /images/20230601/5c53cb89eae74e10a6b78f8ef0cc0a3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]: /images/20230601/f905dcbf7a904269bd8a68e1b9c499e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]: /images/20230601/665acfa1fe35408a8d5554e003bd92d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6]: /images/20230601/3a6b5640ad774b70a81723e0c3d93087.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7]: /images/20230601/08f5f38dd9ff4b80ae43afbd1b417b5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 8]: /images/20230601/4fdf4bec73b74737a0b3f143243cff94.png
[20191013104602128.jpg]: /images/20230601/1bafadfbb6544e6f9c5be32af0b98d36.png
[2019101310490532.jpg]: /images/20230601/ca4198841c1c421ea7a5a7764c22a9dc.png
[20191013105022341.jpg]: /images/20230601/74a3933873cf487f83e2aa0691b3aa0f.png
[2019101310512340.jpg]: /images/20230601/a528f3b9782547878300e91c1647eb1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9]: /images/20230601/3194ab8292774ae586d1983c13a89ad1.png
[20191013105427724.gif]: /images/20230601/19621d741def4132a7f5732c718d6fd7.png
[20191013105546133.jpg]: /images/20230601/49c8eebc7322417ba6e83c8430e7b8f2.png
[20191013105636883.jpg]: /images/20230601/da5d496126554a069321e070f1a7d7ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 10]: /images/20230601/c908d855f20d44ef860b6a08c5f78fbb.png
[20191013105845193.jpg]: /images/20230601/e106583d995e44278cebf9896a088e49.png
[20191013105952205.jpg]: /images/20230601/81ad04ec832c4a569a352ada0cf6242c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 11]: /images/20230601/333cb3fe7d304b95bfa3d9edeaae69bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 12]: /images/20230601/5aa100c6ec0e4322b9c72c3b76893ac8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 13]: /images/20230601/cc8e6373f2b9428abc25ba878309575f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 14]: /images/20230601/e084037e008d4ca1a6cde096ff7f079c.png