前端开发必看：高效调试技巧大揭秘

调试前端代码就像在黑暗中摸索一样，有时候你会发现自己被卡在一个看似无法解决的问题中。

但是，不要担心！

上篇文章我们介绍了关于控制台console 和断点breakpoint 的调试方法

想了解的同学这里指路：前端调试入门

在这篇文章中，我将展示一些前端浏览器调试技巧

就算你的代码出了什么问题，这些技巧也能让你笑傲调试界，不再手忙脚乱！

控制面板介绍

先来简单介绍一下浏览器调试控制面板：

在这里插入图片描述

按下 F12 可以看到多个面板标签，如 Elements、Console、Sources 等，这就是开发者工具的一个个面板，功能丰富而又强大，先对面板作下简单的介绍：

Elements：元素面板，用于查看或修改当前网页 HTML 节点的属性、CSS 属性、监听事件等等，HTML 和 CSS 都可以即时修改和即时显示。
Console：控制台面板，用于查看调试日志或异常信息。另外我们还可以在控制台输入 JavaScript 代码，方便调试。
Sources：源代码面板，用于查看页面的 HTML 文件源代码、JavaScript 源代码、CSS 源代码，还可以在此面板对 JavaScript 代码进行调试，比如添加和修改 JavaScript 断点，观察 JavaScript 变量变化等。
Network：网络面板，用于查看页面加载过程中的各个网络请求，包括请求、响应等各个详情。
Performance：性能面板，用于记录和分析页面在运行时的所有活动，比如 CPU 占用情况，呈现页面性能分析结果，
Memory：内存面板，用于记录和分析页面占用内存情况，如查看内存占用变化，查看 JavaScript 对象和 HTML 节点的内存分配。
Application：应用面板，用于记录网站加载的所有资源信息，如存储、缓存、字体、图片等，同时也可以对一些资源进行修改和删除。
Lighthouse：审核面板，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。

Command面板

按下 Command + Shift + P （windows: [Ctrl] + [Shift] + [P]）可以打开运行命令面板

类似 VSCode 的命令面板，有大量的隐藏功能，可以在这里搜索使用

在这里插入图片描述

例如：输入 screenshot ，选中 full size screenshot 可以进行全屏截图

在这里插入图片描述

启用设计模式

浏览器设计模式默认为关闭：document.designMode = "off"（默认）

我们可以在控制台输入：document.designMode = "on"

将整个文档设置为设计模式，可以快速直接修改网页文案，非常方便

在这里插入图片描述

移除事件监听

element 面板选中元素可以看到这个元素和它的父元素的所有事件监听器：

比如你想看下拉菜单的样式，但是鼠标一移开就消失了

在这里插入图片描述

这时候你可以删掉这个按钮的 mouseleave 事件的监听器

删除后移开鼠标也不会消失了

在这里插入图片描述

快速隐藏元素

在element 面板选中元素，按下 h 快速隐藏、显示该元素

在这里插入图片描述

控制台log增强

我们经常会输出一些变量值，如果直接输出值，则不知道值对应的变量

这时可以用字面量对象，输出的可读性立马就提升了

const x = 1, y = 2;
console.log(x, y); // 1 2
console.log({
    
     x, y }); // {x: 1, y: 2}

自定义 log 样式

console.log('%c Welcome to CSDN! ','color:red;font-size:20px;background:#fff;padding:8px;');

在这里插入图片描述

禁用缓存

在网络面板中，可以模拟缓存行为，以便测试页面在不同缓存条件下的加载性能

可以禁用缓存、强制重新加载或模拟特定缓存策略，以确保页面在各种情况下都能正常运行

在这里插入图片描述

勾选此选项后，浏览器将禁用缓存，每次请求都会重新获取最新的资源

强制重新加载：在网络面板中，选择要重新加载的请求，并右键单击该请求

在右键菜单中，选择重放XHR

在这里插入图片描述

模拟弱网

这个应该很多人都有使用过，在控制面板的Network界面即可找到

选择不同的网速用于分析程序在不同网速环境下的资源加载情况

在这里插入图片描述

Lighthouse

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

在这里插入图片描述

代码美化

Chrome现在可以在"Sources" 选项卡中美化和格式化JavaScript、HTML和CSS代码

在"Network"（网络）中，也可以在"Response"（响应）或"Preview"（预览）面板中美化和格式化JSON响应数据这些功能使得代码和数据更易于阅读和调试

JSON 美化插件，对不起，这次真的要和你 Say goodbye 了！

在这里插入图片描述

JS代码块

打开调试面板的 sources 中的 snippets 新建一个 js 脚本然后保存

在这里插入图片描述

然后到 console 里按下 ctrl+p 后输入！就可以选择到我们的脚本来运行

在这里插入图片描述

调试线上代码

如果是线上的环境，能不能直接修改源代码（JS、CSS）调试呢？—— 可以的。

思路就是创建本地的 JS 副本，页面加载本地的 JS 文件，就可以在本地 JS 文件上修改了。

在这里插入图片描述

在Network里我们同样可以调试代码

右键单击请求，然后选择 Override content，覆盖网页内容

在这里插入图片描述

选择要调试修改的部分，按下 Ctrl + S 保存，刷新网页，即可看到效果

在这里插入图片描述