前言

本文主要介绍了前端开发在chrome devtools中的调试方式。

一、前端开发调试特点

调试，也叫Debug。有如下特点：

多平台：浏览器、NodeJS、小程序、桌面应用、Hybrid。
多环境：本地开发环境、线上环境。
多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...
多技巧：Console、BreakPoint、sourceMap、代理...

二、Chrome devTools

如何打开 Chrome devTools？

F12快捷键。
鼠标右键 -> 检查。

1. Elements

在Elements中选中元素 -> 鼠标右键 -> Force state -> 选择伪类。
在Elements中选中元素 -> 选中右侧Styles栏 -> 点击 :hov 选项，可选择伪类。
点击.cls 开启动态修改元素的class。
输入字符串可以动态的给元素添加类名。
勾选/取消类名可以动态的查看类名生效效果。
点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览。
Computed下点击样式里的箭头可以跳转到styles面板中的Css。

2. Console

console.log
console.warn
console.error
console.debug
console.info
console.table *这个用来打印数组非常方便。
console.dir 可以以文件树的方式展示dom元素。
console.time 作为测试代码开始的节点。
console.timeEnd 作为测试代码结束的节点。
console.count 获取一段代码执行的次数。

3. Source

区域1：页面资源文件目录树

区域2：代码预览区域

区域3：Debug工具栏，从左到右依次为

暂停(继续)
单步跳过
进入函数
跳出函数
单步执行
激活(关闭)所有断点
代码执行异常处自动

区域4：断点调试器

使用关键字debugger或代码预览区域的行号可以设置断点。
执行到断点处时代码暂停执行。
展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点。
暂停状态下，鼠标hover变量可以查看变量的值。
在调试器Watch右侧点击 +，可以添加对变量的监控，查看该变量的值。
展开Scope可以查看作用域列表(包含闭包)。
展开Call Stack可以查看当前javaScript代码的调用栈。

Source tag虽然可以进行调试，却需要阅读JavaScript的源码，那么通过webpack等工具打包压缩后的代码该如何调试呢？

可以使用一个工具 souce-map。SouceMap可以映射源码，通过如下配置将 souce-map 配置到项目中。

既然SourceMap 可以映射源码，那压缩后的代码不就又不安全了吗？

通常公司会先带上SourceMap打包项目，将含有SourceMap文件的项目上传到监控平台，然后将SourceMap文件删除，再将不带SourceMap文件的项目部署上线。

4. Network

区域1：控制面板
区域2：过滤面板
区域3：概览区域
区域4： Request Table面板
区域5：总结面板
区域6：请求详情面板

5. Application

Application面板展示与本地存储相关的信息。

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

6. Performance

区域1：控制面板。

区域2：概览面板。

FPS：每秒帧数。
CPU：处理各个任务花费的时间。
NET：各个请求花费时间。

区域3：线程面板。

Frames：帧线程。
Main：主线程，负责执行Javascript, 解析HTML /CSS,完成绘制。
Raster：Raster线程，负责完成某个layer或者某些块(tile)的绘制。

区域4：统计面板。

运用：

页面卡顿 -> 查看FPS指标 -> 寻找性能瓶颈 -> 优化代码。

示例：[官方示例地址](https://googlechrome.github.io/ devtools -samples/jank/)

7. Lighthouse

核心WEB指标：

Largest Contentful Paint (LCP) :最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID) :首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
Cumulative Layout Shift (CLS) :累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，面的CLS应保持在0.1.或更少。

总结

如果上述方法还不能解决你所遇到的问题，这里还有一份在江湖中颇负盛名的武林秘籍...

传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。

--《程序员修炼之道》

前端开发必备知识 — 调试工具

前言