国思软件 - 技术文章 - 你必知道的 Chrome 前端调试技巧

## 前言

Chrome浏览器，作为前端开发者最亲密的伙伴，相信你一定不陌生。我们可以用它来查看网络请求、分析网页性能、调试最新的 JavaScript 功能……

除了这些，它还提供了很多强大但不常见的功能，可以大大提高我们的开发效率。我们来看一下。

Chrome浏览器调试工具的核心功能：

![Chrome浏览器调试工具的核心功能](http://doc.rdiframework.net/rdiblog/20230712172207.png)

------

# 00、基础操作汇总

**Store as global（存储为全局变量）**：类似copy方法，将一个对象保存为全局变量，变量命名依次为`temp1`、`temp2`。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172244.png)

**保存堆栈信息( Stack trace )**：错误堆栈信息另存为文件，保存完整堆栈信息。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172249.png)

**Command面板**：同VSCode的命令面板，可以找到调试工具的所有的（隐藏）功能。`Ctrl] + [Shift] + [P]` （Mac：`[⌘] + [Shift]+ [P]`）

![image.png](http://doc.rdiframework.net/rdiblog/20230712172309.png)

- **设置主题**：打开Command面板，搜索“主题”，可以切换多种主题

![image.png](http://doc.rdiframework.net/rdiblog/20230712172314.png)

- **分析代码的覆盖率**：打开Command面板，如下图搜索“覆盖”，分析首次页面加载过程中哪些代码执行了，那些没有执行，输出一个报告。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172318.png)

选择文件可进一步查看代码的使用分析，红色 = 尚未执行，青蓝色 = 至少执行了一次。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172322.png)

**元素截图**：输出指定元素的截图，包含隐藏滚动的内容，这个功能挺好用的。

- 通过Command面板：搜索“截图”，全屏截图、指定节点截图。
- 元素面板中，选中元素》右键菜单》“捕获节点屏幕截图”。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172331.png)

------

# 01、元素面板（Element）

可以自由调试DOM、CSS样式，使用评率级高。

- **DOM树**：左侧为DOM元素树，支持多种操作，如编辑、删除、新增、复制DOM元素，更多可查看右键菜单。
- **样式**：选中元素的样式，可编辑、添加CSS样式，实时预览。
- **已计算**：选中元素计算的样式值。
- **布局**：grid布局、flex布局调试。

![元素面板](http://doc.rdiframework.net/rdiblog/20230712172335.png)

## 1.1、CSS可视化编辑器

可视化的颜色、贝塞尔曲线、阴影编辑器，所见即所得，挺好用！

- **颜色编辑器**：只要是颜色属性，都可以点击色块按钮可视化编辑颜色，支持拖动设置颜色、取色、设置对比度。
- **Grid、Flex布局编辑器**：当使用弹性布局Grid、Flex时，支持可视化编辑布局对齐方式。
- **阴影编辑器**：阴影`shadow`属性上，会出现编辑器按钮，可视化编辑阴影效果。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172341.png)

- **贝塞尔曲线编辑器**：在动画`transition`、`animation`中会用到贝塞尔曲线函数（缓动函数）。

![贝塞尔曲线编辑器](http://doc.rdiframework.net/rdiblog/20230712172345.png)

## 1.2、强制激活伪类

强制激活元素的伪类效果。

- 选择Dom节点右键“强制状态”。
- 如下图CSS样式中“切换元素状态”。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172349.png)

## 1.3、DOM断点

选中DOM元素，右键设置中断点，可以在元素更改（JS代码修改DOM）时触发断点。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172352.png)

添加后可以在源代码中查看到已添加的DOM断点，或者元素面板中的“DOM断点”。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172358.png)

------

# 02、控制台面板（Console）

主要功能就是调试JavaScript代码，是比较常用的调试工具，使用评率很高。

- **运行代码**：可执行任意JS代码，包括调用页面已有的JS对象、函数。
- **console输出**：代码中的Console、异常错误都会在这里输出。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172405.png)

## 2.1、console函数

用console函数输出变量，是比较常用的调试技巧，console的常用函数：

```javascript
console.log('log');
console.info('info');
console.warn('warn');
console.error('error');
console.table(["sam", "egan", "kettle"])
throw new Error('出错了！！！')
```

控制台输出效果，右侧链接为对应JS代码的链接。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172411.png)

用`console.time()`来计算代码的耗时，参数为计时器命名。

```javascript
function sum(n) {
  let sum = 0;
  for (i = 1; i <= n; i++) {
    let u = { name: 'sam', age: i }
    sum += i;
  }
  return sum
}
// 计算一个函数的耗时
console.time('sum') // 开始计时
const total = sum(100000);
console.timeLog('sum');  // 计时：sum: 4.43994140625 ms
const total2 = sum(1000);
console.timeEnd('sum');  // 计时：sum: 5.0419921875 ms
console.log({ total });  //{total: 5000050000}
```

## 2.2、增强log：真实用！

```javascript
const x = 100, y = 200;
console.log(x, y); // 100 200
console.log({ x, y }); // {x: 100, y: 200}
console.table({ x, y }); 
```

如上代码，经常我们会输出一些变量值，如果直接输出值，则不知道值对应的变量。这时可以用字面量对象，输出的可读性立马就提升了，再加上`console.table`就更完美了。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172421.png)

## 2.3、自定义log样式：占位符

`console`函数支持的占位符：

| 占位符       | 描述                                                         |
| :----------- | :----------------------------------------------------------- |
| `%c`         | CSS样式占位符，值就是CSS样式，如下示例，可用来自定义log的样式 |
| `%o` or `%O` | 打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。 |
| `%d` or `%i` | 打印整数。支持数字格式化。例如，console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字：Foo 01。 |
| `%s`         | 打印字符串。                                                 |
| `%f`         | 打印浮点数。支持格式化，比如 console.log("Foo %.2f", 1.1) 会输出两位小数：Foo 1.10 |

![image.png](http://doc.rdiframework.net/rdiblog/20230712172425.png)

## 2.4、监听函数

通过如下（调试工具）的全局函数可监听一个函数、事件的执行。

| 函数                        | 说明                                                   |
| :-------------------------- | :----------------------------------------------------- |
| **monitor**( function )     | 监听一个函数，当被监听函数执行的时候，会打印被调用信息 |
| **monitorEvents** ( event ) | 监听一个事件，当事件被触发时打印触发事件日志           |

![image.png](http://doc.rdiframework.net/rdiblog/20230712172432.png)

## 2.5、监听变量：活动表达式

一个不错的小功能，点击下图中的眼睛图标，相当于添加了一个动态表达式，然后实时监控（显示）该表达式的值。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172434.png)

![img](http://doc.rdiframework.net/rdiblog/20230712172437.webp)

------

# 03、源代码面板（Sources）

顾名思义，管理网页所有的源代码文件，包括JS、CSS、图片等资源，经常就是在这里断点调试JS代码，使用评率中。

在调试模式下可以查看（鼠标悬浮在变量上）变量值、上下文作用域、函数调用堆栈信息。

![源代码面板](http://doc.rdiframework.net/rdiblog/20230712172444.png)

- **① 页面资源目录**：页面涉及的所有资源（树）。
- **② 源代码**：文件源代码，可以在这里添加断点调试JS代码，如果想编辑在线JS代码，也是可以的，详见后文。
- **③ Debug工具栏**：断点调试的操作工具，可以控制暂停、继续、单步...执行代码。
- **④ 断点调试器**：这里包含多个断点调试器：

> - **监视（Watch）**：可添加对变量的监视。
> - **断点（Breakpoints）**：所有添加的断点，可在这里编辑、删除管理。
> - **作用域（Scope）**：当前代码上下文的作用域，含闭包。
> - **调用堆栈（Call Stack**）：当前函数的调用堆栈。
> - **XHR/提取断点**：可以在这里添加对AJAX请求（XHR、Fetch）的断点，添加URL地址即可。
> - **DOM断点**：在元素页面添加的DOM断点会在这里显示。

## 3.1、断点调试

如下图，在源代码行号位置添加断点。

![断点调试](http://doc.rdiframework.net/rdiblog/20230712172449.png)

- **添加断点（Add breakpoint）**：添加一个普通断点，最左侧行号处，点击添加断点，或者右键菜单。

也可以在JS代码中设置断点，关键字：`debugger`

```javascript
debugger // 会在这里断点
console.log('debugger')
```

- **添加条件断点（Add conditional breakpoint）**：添加一个条件断点，符合条件断点才会生效，条件可使用当前代码上下文中的变量。

![添加条件断点](http://doc.rdiframework.net/rdiblog/20230712172452.png)

- **添加记录点（Add logpoint）**：添加一个日志打印，打印当前代码环境的变量，非常方便，不用在源码下添加`console`了。

![添加记录点](http://doc.rdiframework.net/rdiblog/20230712172457.png)

## 3.2、调试线上代码：本地工作区

如果是线上的环境，能不能直接修改源代码（JS、CSS）调试呢？—— 可以的。思路就是创建本地的JS副本，页面加载本地的JS文件，就可以在本地JS文件上修改了。

**① 创建本地工作目录**：

- 如下图，源代码下面找到“覆盖（Override）”。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172500.png)

- 然后点击“选择替代文件夹”，添加一个本地空的文件夹，作为本地工作目录。
- 添加后要注意要确认授权。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172503.png)

**② 创建源代码的本地副本**：选择需要修改的源代码右键“保存以备替代”，就会在本地目录创建副本文件，网页使用本地的JS文件。

- 创建的本地副本，可以在“覆盖”下看到，也可以在本地文件夹下看到。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172506.png)

![image.png](http://doc.rdiframework.net/rdiblog/20230712172509.png)

**③ 编辑代码**：该JS文件就可以直接在源代码中编辑修改了，实时生效。

- CSS、HTML、JavaScript都支持。
- 可以在浏览器的源代码中修改，也可以本地其他工具中打开编辑。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172513.png)

------

# 04、网络面板（Network）

![网络面板](http://doc.rdiframework.net/rdiblog/20230712172521.png)

工具栏中两个比较实用的小功能：禁用缓存、模拟弱网环境。

![image.png](http://doc.rdiframework.net/rdiblog/20230712172524.png)

点击请求的资源项，可以查看详细的请求、响应数据，常用于服务端接口的联调。

还可以编辑参数，重新发起请求

![image.png](http://doc.rdiframework.net/rdiblog/20230712172549.png)

------

# 05、性能面板（Performance）

先录制，后分析，分析网络、CPU、内存、渲染FPS帧率，用于定位、解决页面性能问题。

![image](http://doc.rdiframework.net/rdiblog/20230712172603.png)

> **特别提示**：调试性能建议在**无恒模式**下进行，尽量避浏览器插件的影响。包括其他异常Bug的调试，也要考虑浏览器插件问题，之前就遇到过类似问题，页面上一个Bug怎么也复现不了，几经波折才发现是测试机上的油猴插件的影响。

**性能监视器**（Performance monitor）面板可以**实时**的监控页面性能参数。

![性能监视器](http://doc.rdiframework.net/rdiblog/20230712172612.png)

**Lighthouse**，这个就很厉害了，对页面进行综合分析，包括性能、PWA（Progressive Web App，渐进式Web应用）、SEO、无障碍访问等，分析完后产出报告，给出得分，还给出了页面改进建议。

![Lighthouse](http://doc.rdiframework.net/rdiblog/20230712172620.png)

------

## 参考资料：

[【保姆级教程】Vue项目调试技巧](http://www.guosisoft.com/article/detail/430312211521605)

[干货|工作中要使用Git，看这篇文章就够了](http://www.guosisoft.com/article/detail/410508049313861)

[Vue 前端开发团队风格指南（史上最全）](http://www.guosisoft.com/article/detail/415491255230533)

[企业数字化转型如何做？看过来](http://www.guosisoft.com/article/detail/408745545576517)

前往了解**国思RDIF**低代码开发平台：[www.guosisoft.com](http://www.guosisoft.com)

![国思RDIF.vNext低代码快速开发框架](http://doc.rdiframework.net/rdiblog/20230409220406.png)

-----

一路走来数个年头，感谢RDIF框架的支持者与使用者，大家可以通过下面的地址了解详情。

官方网站：[http://www.guosisoft.com/](http://www.guosisoft.com/)    [http://www.rdiframework.net/](http://www.rdiframework.net/)

特别说明，框架相关的技术文章请以官方网站为准，欢迎大家收藏！

**国思RDIF低代码快速开发框架**由海南国思软件科技有限公司专业团队长期打造、一直在更新、一直在升级，请放心使用！

欢迎关注国思RDI低代码快速开发框架官方公众微信（微信号：guosisoft），及时了解最新动态。

使用微信扫描二维码立即关注

![微信扫描二维码](http://doc.rdiframework.net/weixin.png )

正文到此结束

所属分类：前端技术

本文标签： 挨踢业界其他 Web前端
版权声明： 本站原创文章，由guosisoft.com发布，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

该篇文章的评论功能暂时被站长关闭

你必知道的 Chrome 前端调试技巧

热门推荐

相关文章

说给你听

本文目录

文章标签

网站信息

我们的产品

相关链接

关于我们

联系我们