前端调试实践
前言在一样平常调试问题中，相信我们许多人都是用 console 去排查相关的问题，虽然问题也可以排查出来，但是有时它的服从并不高。这篇文章重要讲解关于断点和一些一样平常调试技巧的内容，方便你在日后调试问题中，能在不同的前端场景应用不同的调试方式，翻倍进步你办理问题的服从
1 sources 面板概览
source 面板是我们断点调试常常用的到的地方，我们可以先大概认识一下它长什么样子，大概有什么功能
左侧区块：包罗了 Page、Overrides、Snippets 等 5 个功能块，其中 Page 可以查看该网页已加载的全部资源
中心区块：可查看、编辑资源文件，也可查看图片范例的文件；同时可在其文件左侧进行断点等相关操作
右侧区块：断点调试时的区域，可以开始、下一步等断点操作，同时可以查看断点调试时的变量值、调用栈等信息
https://img-blog.csdnimg.cn/img_convert/43dbc61e0ea3041c05325cad6d6bc588.png
当展示开辟者工具的区域过小时，它会自顺应调整布局
https://img-blog.csdnimg.cn/img_convert/b1294435c1c9f37861cfb3de69f2ad7e.png
2 常用的断点方式
我们平常最常常用的可能就是代码行断点了，但是有时用它调试问题并不是服从最高的。chrome 中还包罗了其他的断点方式，我们可以在不同的场景应用不同的断点进行高效调试。
2.1 代码行断点
代码行断点，当代码运行到当前行之前，代码会暂停实行
2.2.1 点击 Sources 面板中的源代码的行号
当行号列对应行出现蓝色图标，即为打断点成功。在右侧的 Breakpoints 中，会出现你有打断点的信息，展示了对应的行号，也可以让你取消、勾选、编辑、删除断点
https://img-blog.csdnimg.cn/img_convert/fd4d93f3425d9e94a40869c49b54dd81.png
2.2.2 断点操作按钮含义
我们可以在右上角看到 6 个控制断点的操作按钮，分别对应着不同的操作
https://img-blog.csdnimg.cn/img_convert/a26befdab2a2db44cc13855bd0c634f0.png
https://img-blog.csdnimg.cn/img_convert/6a97f3f89d4da508a3d6842c70bcd224.png
恢复实行
https://img-blog.csdnimg.cn/img_convert/d482245a1b45759c03f22d2143b54773.png
单步实行
https://img-blog.csdnimg.cn/img_convert/caef853cdc449bdca585712b1919a741.png
进入函数调用
https://img-blog.csdnimg.cn/img_convert/8f26ea04857dda9ee09abddae3ed440b.png
跳出函数调用
https://img-blog.csdnimg.cn/img_convert/3e59cad69b025917e8e4320994575a3e.png
让该断点失效
2.2.3 行断点实战
在开辟过程中，用例列表刚开始还可以加载出用例，怎么突然没有数据返回了。查看接口发现 moduleIds 参数出现了问题
https://img-blog.csdnimg.cn/img_convert/bdaef22b1a52caf7097816b0dc57c469.png
于是对相关代码行设置了断点，当实行到 149 行的时候 moduleIds 的值是
https://img-blog.csdnimg.cn/img_convert/4b9c449fdec05c510f630b1f6602a3af.png
可当实行到 152 行的时候，moduleIds 的值却是
https://img-blog.csdnimg.cn/img_convert/1b53df6ab9e92cb0c56bce69f0f2f4ca.png
原来是这两处逻辑冲突了，后面的逻辑覆盖了前面的逻辑
https://img-blog.csdnimg.cn/img_convert/d78c13ffe2a9c66d6ebe53c198f4c4da.png
问题很快排查出来。如果用 console.log 的话，可能要在代码中写好几个 console，保存后，刷新浏览器打印，排查完，可能还必要去删除掉，所以碰到一些问题排查服从就进步了许多
2.2 Logpoint 日志点
有时候，我们并不必要像代码行断点一样，把我们的代码暂停。我们只必要像 console 打印一下相关的信息，不要中断我们的代码实行。这个时候我们 logpoint 就派上用场了，它的语法跟 console.log 一样，我们可以快速得写好我们的调试信息，而且不用像 console.log 一样干扰我们的代码，也不用事后还得惦记取去删除它
比如下面的 logpoint，其会显示粉红色的图标，代码实行到它的时候，它会在 console 面板中打印
https://img-blog.csdnimg.cn/img_convert/685401797013c93f27f3653879e711f4.png
注意，我们可以利用点击 esc 快捷键，快速得调起我们的 console 面板查看信息
https://img-blog.csdnimg.cn/img_convert/ed8dcb89cee83904af637ad4921f7583.gif
2.3 非常断点
当我们的代码有错误，引发对应的非常报错时，我们有时会比力难快速定位到是在哪里出现了问题。我们可以利用非常断点，在发生非常的时候立即进行断点，从而快速找到发生问题的代码，并且可查看相关的变量、调用栈来资助我们排盘问题。
非常断点分为两种，可分别在在未捕获和已捕获的非常处进行断点
2.3.1 Pause on uncaught exceptions
比如下方代码中，aa 要访问一个不存在的变量，这里是有问题的。这也是我们在代码中常常会碰到的问题
const handleClick = () => {
复制代码
我们可以在 Breakpoints 中勾选 Pause on uncaught exceptions，当代码实行到这些有非常的代码时，天然会暂停
https://img-blog.csdnimg.cn/img_convert/37c6bc206ac02ee0170dfb57d1ae0898.png
https://img-blog.csdnimg.cn/img_convert/d434e75503c9d1358ab6f873c8f14f64.gif
2.3.2 Pause on caught exceptions
下方代码已经非常进行了捕获，这种情况可以勾选 Pause on caught exceptions 来对捕获到非常代码行暂停进行处理
const handleClick = () => {
复制代码
https://img-blog.csdnimg.cn/img_convert/a317d0b2ae2be8b630462e759242c461.gif
2.4 变乱监听器断点
当用户发生交互时出现问题，这时我们就可以添加变乱监听器添加断点来捕获这些变乱以检查交互时的问题。可以在 Source 面板右侧的 Event Listener Breakpoints 中勾选相应的变乱
https://img-blog.csdnimg.cn/img_convert/cb8a5b6f997ce2b49f15ced28f694ccb.png
2.5 DOM 更改断点
利用频率不高，研究如何操作 dom 的特定场景才有有用
https://img-blog.csdnimg.cn/img_convert/eb5048a951c2ee1e7f4764110e4eae33.png
3 调用栈
当我们在查看、调试一段比力复杂的代码时，我们有时很难快速得从代码文件理清其调用关系。此时，我们可以利用调用栈来资助我们快速理清逻辑，快速排盘问题
3.1 栈
栈是一种数据结构，其内部的的元素满意后进先出的特点，我们可以对其进行入栈、出栈的操作
https://img-blog.csdnimg.cn/img_convert/c7452cbd8a6f301d2c46a3ed1e12ef67.png
3.2 调用栈的应用
比如我在 caseReviewListTable 文件的第 206 行代码中打了一个断点，当代码实行到这部门逻辑的时候，他就天然会暂停
https://img-blog.csdnimg.cn/img_convert/e8a0df35fe2eed3ff478f2045153d46b.png
我们此时可以看到右侧的 Call Stack 中从上到下排列着函数调用栈信息，如下图我们可以查看到，在实行到该断点的时候，我们已经先在其他文件的 handleRefreshCaseReviewList、handleSearchCase 函数中实行过相关代码了。我们可以点击函数名右侧的文件地址，快速查看对应的代码，这样子，我们对其调用逻辑清楚了许多，排盘问题的服从天然会进步
https://img-blog.csdnimg.cn/img_convert/22ed173056b7088e32fed7b9ec37bdc1.png
3.3 anonymous 匿名的
我们在看上面的代码中，发现有一个 anonymous 栈帧，他代表了是一个匿名函数，即没著名称的函数
https://img-blog.csdnimg.cn/img_convert/8b7e199fc6d9ea0a5ec3ef950c1defff.png
比如下面代码我们加个 setTimeout，也会在调用栈生成一个 anonymous 的栈帧
https://img-blog.csdnimg.cn/img_convert/f3da3e9e1b0bc9e64a74a1e25a1b7dbd.png
3.4 console.trace()
除了通过断点来查看调用栈，有时我们也利用 console.trace() 来输出当前的函数调用关系，比如我们在下面代码对应的位置加上 console.trace()，我们就可以看到其当前位置的调用栈信息
https://img-blog.csdnimg.cn/img_convert/6753a77d1631caea9d974fa08345cc51.png
4 Snippets
在浏览器中，如果你在调试中，有一些公共的逻辑必要常常用到，你可以把其代码片段保存在 Snippets 中。当你在任何一个页面必要运行它的时候，可以直接运行它
比如我们想要获取当前页面的全部图片链接，我们可以将这段代码存储起来
https://img-blog.csdnimg.cn/img_convert/8277abceacc7521c1b3ecad48ada5898.png
必要用的时候，我们直接快捷键 Command+P，输入!字符，搜刮你要实行的代码片段名称，选择以后即可实行
https://img-blog.csdnimg.cn/img_convert/d318e3110b42d61af0c57d4401506179.gif
5 Overrides
5.1 替换响应内容
如果有些非常数据导致页面发生问题，我们可以直接利用那份非常数据，在当地进行调试。当然，如果后端接口还没好，我们知道结构也可以 mock 数据
比如我们现在有一个/api/v2/review/list/getCaseReviewList 接口
https://img-blog.csdnimg.cn/img_convert/078a383fa2fec76945275f2c071c2bac.png
我们右键，选择 Override content 替换接口内容
https://img-blog.csdnimg.cn/img_convert/5d80698ed23d3f3741ac00a464accbf7.png
选择以后，会必要你选择一个存储这些替换文件的文件夹
https://img-blog.csdnimg.cn/img_convert/d1a129b4837ab4077052858ece812f64.png
授权
https://img-blog.csdnimg.cn/img_convert/abcead7b8ffe32610ccd3d5d9608a046.png
我们将我们的模仿数据填充在这里，即可在页面中调试我们的 UI 和相关逻辑了
https://img-blog.csdnimg.cn/img_convert/0da2c2064b0535c9815fe52de3b39d9c.png
其中，被覆盖的接口会显示紫色的标识
https://img-blog.csdnimg.cn/img_convert/1b05668d16cb21d4daac601170aeac99.png
如果我们不必要了，根据情况禁止、删除、清空都可以
https://img-blog.csdnimg.cn/img_convert/47c2257fe833a7c5bab0c0866bcb1c79.png
5.2 替换响应头
如果有些场景，必要添加或者修改响应头，也可以进行自定义修改
https://img-blog.csdnimg.cn/img_convert/d382d3d86fc698c6ae9fe340ddf27d1a.png
选择 Add header，然后自己添加修改对应的响应头数据
https://img-blog.csdnimg.cn/img_convert/ead931b624b3e2d029384e04993c360b.png
6 其他调试技巧
6.1 复制、粘贴、拖拽元素
当产物必要对已经开辟好的页面进行一些位置的移动调整的时候，我们可能对代码有一个比力大的改动才可以给她看到结果，但是事后我们又得把代码改归去。这时，我们可以利用 chrome 提供给我们的能力，复制元素、粘贴以及拖拽元素，来实现快速的页面布局调整，给产物看到结果，又不必要改代码
比如我们复制本日工作这个区块，然后粘贴在你必要放置的位置容器下进行粘贴
https://img-blog.csdnimg.cn/img_convert/e1b60385cd4ae7f351beb90fdc150beb.png
粘贴以后，我们长按元素，进行拖拽调整位置即可
https://img-blog.csdnimg.cn/img_convert/8954fc591228484466f03ce884ef63bd.png
6.2 全局搜刮
6.2.1 全局搜刮文件/目录
当我们要快速调试一个文件的代码的时候，直接按 Command+P 快捷键调起搜刮浮层，输入文件名或者文件路径名，即可快速找到对应的文件，选择点击以后会到达 sources 面板打开对应的文件
https://img-blog.csdnimg.cn/img_convert/180a1128db0ca9724515849d29800957.png
6.2.2 全局搜刮代码
当我们有对应的代码关键词，想打开它对应的文件。chrome 提拱了一个全局搜刮代码的功能，我们可以打开对应的 search 面板
https://img-blog.csdnimg.cn/img_convert/b119fc85de969ec818a5d8c1de418417.png
比如我输入“name: ‘计划列表’,”这个关键词，它会在这个页面已经引入的资源搜刮对应的代码关键词，然后把匹配的文件展示在下方，我们就可以立即选择然后打开对应的代码文件了
https://img-blog.csdnimg.cn/img_convert/80745a6449f7d840ba63f0ab6272e8e2.png
6.3 网站样式风格概览 CSS Overview
当我们看到一些优秀的网站的时候，我们想快速查看鉴戒该网站样式信息的时候，我们可以借助 CSS Overview 这个功能快速得到相关信息，非常好用风趣
比如我们拿花瓣这个网站做例子，我们打开开辟者工具，开启 CSS Overview 面板
https://img-blog.csdnimg.cn/img_convert/19123675c6eeb02c64e9de3c054bac6c.png
然后按“Capture overview”开始网络信息
https://img-blog.csdnimg.cn/img_convert/5e3d15f499c5224572a0ff299ec0385a.png
网络好以后，我们便可以从颜色、字体等维度获取到该网站的样式信息
https://img-blog.csdnimg.cn/img_convert/99a5c6ba4e33cbbb8be5c5bbd860e7d1.png
别的，当我们点击对应的色块的时候，它也会列出用到的地方，点击对应的元素也会快速定位过去
https://img-blog.csdnimg.cn/img_convert/def6e3a54e1d555572ccf73544f1b4bf.png
6.4 折叠屏手机适配
如果我们的开辟场景中，必要适配折叠屏手机，比如像下面的三星 Galaxy Z Fold5，那么我们的 chrome 也可以派上用场
https://img-blog.csdnimg.cn/img_convert/fa9c9cff96c9ac867aa58dd573189c60.gif
我们必要进入对应的移动端调试模式，选择对应的移动端设备
https://img-blog.csdnimg.cn/img_convert/1f214ea0ebdcca4f870b3066230073dc.png
选择折叠场景，然后我们即可进行调试了
https://img-blog.csdnimg.cn/img_convert/72293993f6ba420c5eadab4c4ee7aa5c.png
调试 Surface Duo 设备
https://img-blog.csdnimg.cn/img_convert/8d7cc8bd92bea2862614877aaa61f32e.png
https://img-blog.csdnimg.cn/img_convert/5480f0addb9dffa714787a76d7ecf569.png
7 学习资源分享
前面讲了这么多，实在只是抛砖引玉，另有许多东西是我们没有讲到的，我们可以通过下面的渠道进一步的了解、应用相关的知识和工具
7.1 Chrome DevTools?
包罗了 Chrome 开辟者工具相关功能的具体介绍另有相关的实践应用场景
7.2 Google Chrome Developers - YouTube?
Google Chrome Developers 的 YouTube 频道，视频展示了相关的新功能以及最佳实践
7.3 浏览器工作原理与实践?
极客时间这门课从浏览器的渲染、javascript 实行机制、V8 工作原理、安全等相关视角去讲解浏览器的相关内容，从而让我们对前端的体系有一个更全的明确
8 总结
本文介绍了断点调试、sources 面板和一样平常利用到的一些调试技巧，资助我们在后续的开辟中，提供一些新角度、新方式来办理问题，翻倍进步我们的开辟服从
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]