调试前端代码就像在黑暗中摸索一样,有时候你会发现自己被卡在一个看似无法解决的问题中。
但是,不要担心!
上篇文章我们介绍了关于控制台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 保存,刷新网页,即可看到效果