前端 Chrome 调试技巧最全汇总

主要观点总结

本文主要介绍了浏览器内核调试工具的使用技巧，包括快捷键操作、各种面板功能以及性能分析等。

关键观点总结

关键观点1: 浏览器内核调试工具的基本操作

包括切换浏览器标签、全屏、打开调试模式、搜索查找、使用命令面板等常用操作的快捷键和使用方法。

关键观点2: 元素面板（Element）

介绍元素面板的自由调试DOM、CSS样式，以及颜色、阴影等可视化编辑器的使用方法。

关键观点3: 控制台面板（Console）

主要功能是调试JavaScript代码，包括运行代码、console输出、增强log、监听函数和变量等实用技巧。

关键观点4: 源代码面板（Sources）

管理网页所有的源代码文件，包括JS、CSS、图片等资源，经常在这里断点调试JS代码。

关键观点5: 网络面板（Network）和性能面板（Performance）

网络面板可以分析请求的资源，性能面板可以录制并分析页面性能，包括网络、CPU、内存、渲染FPS帧率等。

文章预览

作者：安木夕 https://juejin.cn/post/7248118049584316472 注：本文测试、截图均为Edge浏览器（内核是Chromium），浏览器内核可了解《 有哪些浏览器/内核？ [1] 》 00、基础操作汇总 操作类型 快捷键/说明 切换浏览器标签 🔸  Ctrl+1到8 切换到对应序号的浏览器标签 🔸  Ctrl+PgUp/PgDn 标签页左右切换 浏览器全屏 F11  ( ⌘ + shift + F  Mac) 打开调试模式 🔸  F12 ， Ctrl + Shift + I  (Windows) 或  Cmd + Opt + I  (Mac) 🔸 页面右键菜单“检查”，浏览器菜单“开发者工具” 切换调试工具位置（下面、右边） ctrl + shift + D  ( ⌘ + shift + D  Mac) 切换 DevTools 的面板标签 ctrl + [  和  ctrl + ] 左右切换调试工具面板 内容搜索查找 Ctrl+F ：元素、控制台、源代码、网络都支持搜索查找 使用命令Command面板 Ctrl] + [Shift] + [P]  （Mac：  [⌘] + [Shift]+ [P] ） 类似VSCode的命令面板，有大量的隐藏功能 ………………………………