调试
移动端调试工具
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script><script src="https://cdn.staticfile.org/eruda/2.4.1/eruda.min.js"></script>
<script>
eruda.init()
</script><script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
new VConsole()
</script>配置 auto-attach
VSCode 调试 JS 的方法有很多，目前比较推荐的就是无需配置的 auto-attach。默认无需配置，超级好用。
按 ctrl + shift + p，打开输入 >auto attach。默认是智能（smart）。如果不是，可以查看设置成智能，或者根据场景自行设置成其他的。
再然后通过快捷键 ctrl + ` 反引号 打开终端。在终端进入到目录。执行相应的脚本。VSCode 则会自动进入到调试模式。
参考：https://code.visualstudio.com/docs/nodejs/nodejs-debugging
package.json 的调试操作方式
在 package.json 找到相应的 scripts。
鼠标悬浮在相应的命令上，会出现 Run Script 和 Debug Script 两个选项，选择 Debug Script 即可进入调试模式。或者点击 scripts 上方的 Debug，再选择相应的命令。也可以进入调试模式。
基础操作
| 操作 | 说明 |
|---|---|
| 切换浏览器标签页（选项卡） | ctr + 1 ~ 9：切换到第 1 ~ 9 个选项卡。ctr + Pg Up/Pg On：切换到左/右边一个标签页 |
| 浏览器全屏 | F11 |
| 打开调试模式 | F12，ctr + shift + i，或则鼠标右键菜单选择开发者工具 |
| 控制调试工具窗口停靠在浏览器屏幕里的位置 | ctr + shift + d，在右边和下边之间切换 |
| 切换调试工具的标签页（又叫选项卡或面板） | ctr + [、ctr + ] |
| 在控制台搜索 | ctr + f |
| 调出 commond 命令面板 | ctr + shift + p，调出集合了所有命令的面板 |
| 复制元素 | 1. 在 Elements 面板中选中元素并 ctr + c，会复制元素的整个标签结构，包括其子元素。 右键选中 copy 选项，调出如下 copy 命令： 2. Copy element：效果同第 1 点。3. Copy outerHTML：只复制元素的最外层标签结构，不包括其子元素。4. Copy selector：复制能精确查找出该元素的选择器，比如 #app > div > aside。5. Copy JS path：将第 4 点的结果放入 document.querySelector() 中。6. Copy styles：复制应用在该元素上的所有 css 样式。有可能复制出来的东西非常多。7. Copy XPath、Copy full XPath：用于 XML 文档，具体有什么用这里就不赘述了。 8. 在控制台中使用 window.copy() 方法，可以复制接入 copy 的参数。 |
| 控制台快速访问元素 | $('selector')、$$('selector') 或 $0、$1、$n。$(0) 代表当前选择的元素，默认为 body 标签。 $$ 等效 querySelectAll |
| 控制台复制数据到剪切板 | copy(anyValue) |
| 返回参数构造出来的所有实例化对象 queryObjects(Constructor) |  因为 queryObjects 没有返回值，所以可以在控制台右键选择 Store object as global variable，自动保存到变量 temp1 中。利用这个 api 可以调试生产项目，如果是一个 Vue 项目，进行以下操作：queryObjects(Object) -> temp1 -> temp1.filter(a => a.name && a._isVue)。 |
| 控制台保存堆栈信息（Stack trace） | 报错信息可以右键另存为文件 |
| Store as global（存储为全局变量） | 🔸 控制台（右键）：把一个对象设置为全局变量，自动命名为 temp* 🔸 元素面板（右键）：把一个元素设置全局变量并自动在控制台中打印 |
| 快速隐藏或重新显示元素 | 选中元素，按下 h 键 |
| 移动元素 | 🔸 鼠标拖动到任意位置 🔸 上下移动，[ctrl] + [⬆] / [ctrl] + [⬇] |
- 🔸 Command 面板：同 VSCode 的命令面板，可以找到调试工具的所有的（隐藏）功能。
Ctrl] + [Shift] + [P]- 设置主题：打开 Command 面板，搜索 theme（主题），可以切换多种主题。
- 分析代码的覆盖率：打开 Command 面板，搜索 coverage（覆盖），分析首次页面加载过程中哪些代码执行了，那些没有执行，输出一个报告。选择文件可进一步查看代码的使用分析，红色 = 尚未执行，青蓝色 = 至少执行了一次。
- 元素截图：搜索 capture（截图），输出指定元素的截图，包含隐藏滚动的内容，这个功能挺好用的。
元素面板（Element）
可视化编辑 CSS
可视化的颜色、贝塞尔曲线、阴影编辑器，所见即所得，挺好用！
- 颜色编辑器：只要是颜色属性，都可以点击色块按钮可视化编辑颜色，支持拖动设置颜色、取色、设置对比度。
- Grid、Flex 布局编辑器：当使用弹性布局 Grid、Flex 时，支持可视化编辑布局对齐方式。
- 阴影编辑器：阴影 shadow 属性上，会出现编辑器按钮，可视化编辑阴影效果。
- 贝塞尔曲线编辑器：在动画 transition、animation 中会用到贝塞尔曲线函数（缓动函数）。
强制激活伪类
强制激活元素的伪类效果。
- 选择 Dom 节点右键“强制状态”。
- 如下图 CSS 样式中“切换元素状态”。
DOM 断点
选中 DOM 元素，右键选中断点，可以在元素更改（JS 代码修改 DOM）时触发断点。
然后你就可以在 Sources 面板中看到 dom 断点：
控制台面板（Console）
console 函数
常用 console 函数：
| console 函数 | 说明 |
|---|---|
| console.log(str) | 输出一条信息 |
| console.error(str); | 输出一条带有红颜色的信息 |
| console.table(data [, columns]) | 以表格的形式打印 data。如果 data 是基本数据类型，那么和 console.log 没什么区别。如果 data 是数组，那么表格第一列是索引（index），第二列是索引对应的元素；如果元素是数组或对象，那么第二列为空，第三列及后面的列为该数组的索引或该对象的属性。第二个参数只有在元素或属性也是一个数组或对象时有用，作用是选择显示哪些属性（索引） |
| console.assert(false, 'false') | 断言输出。如果断言为 false，则将一个错误消息写入控制台。如果断言是 true，没有任何反应。 |
| console.trace() | 输出当前位置的执行堆栈。 |
| console.time(label) | 计时器，可用来计算耗时（毫秒），三个函数配合使用：time('a') > timeLog('a') > timeEnd('a') |
| console.clear() | 清空控制台，并输出 Console was cleared。 |
console.log 的占位符
| 占位符 | 描述 |
|---|---|
| %c | CSS 样式占位符，值就是 CSS 样式。比如 console.log('%c%s','color:red','红色的文字') 会打印红色的文字。%s 字符串占位符。 |
| %o 或 %O | 打印 js 对象，其可以点击展开查看属性。这时候用 %c 设置样式就不起效果了。 |
| %d 或 %i | 打印整数。例如，console.log("Foo %d", 1.1) 会输出 Foo 1 |
| %s | 打印字符串。 |
| %f | 打印浮点数（小数）。比如 console.log("asfd%f",11.21)，输出 asfd11.21 |
监听函数
通过如下（调试工具）的全局函数可监听一个函数、事件的执行。
| 函数 | 说明 |
|---|---|
| monitor(函数) | 监听一个函数，当被监听函数执行的时候，会打印被调用信息 |
| monitorEvents(event) | 监听一个事件，当事件被触发时打印触发事件日志 |
只有调试工具的命令行能使用，感觉没多大意义！
监听变量
点击图标为小眼睛的按钮，实时监听某个变量的值。
源代码面板（Sources）
断点调试
- 添加断点（Add breakpoint）：在代码的那一行右键添加断点，或则在代码所在行的行号处点击添加断点。
- 添加条件断点（Add conditional breakpoint）：添加一个条件断点，符合条件断点才会生效，条件可使用当前代码上下文中的变量。如下所示，当数组的长度大于 5 时，该断点就会起作用。
- 添加记录点（Add logpoint）：添加一个日志打印，打印当前代码环境的变量，非常方便，不用在源码下添加 console 了。
调试线上代码
如果是线上的环境，能不能直接修改源代码（JS、CSS）调试呢？—— 可以的。思路就是创建本地的 JS 副本，页面加载本地的 JS 文件，就可以在本地 JS 文件上修改了。
① 创建本地工作目录：
在源代码（Sources）面板下找到覆写（Overrides）选项：
点击 Select folder for overrides（选择文件夹用户覆写），选择一个空的文件夹，用于存放 js 副本。
需要同意授权：
② 创建源代码的本地副本：
选择需要修改的源代码右键“保存以备替代”，就会在本地目录创建副本文件，网页使用本地的 JS 文件。
创建的本地副本，可以在“覆盖”下看到，也可以在本地文件夹下看到。
③ 编辑代码：
该 JS 文件就可以直接在源代码中编辑修改了，实时生效。
- CSS、HTML、JavaScript 都支持。
- 可以在浏览器的源代码中修改，也可以本地其他工具中打开编辑。
网络面板（Network）
可以重新发送请求：
性能面板（Performance）
先录制，后分析，分析网络、CPU、内存、渲染 FPS 帧率，用于定位、解决页面性能问题。
点这里先录制，然后点停止，分析这段时间内的性能。 
🚩特别提示：调试性能建议在无恒模式下进行，尽量避浏览器插件的影响。
Lighthouse
对页面进行综合分析，包括性能、PWA（Progressive Web App，渐进式 Web 应用）、SEO、无障碍访问等，分析完后产出报告，给出得分，还给出了页面改进建议。