主要观点总结
本文主要介绍了浏览器内核调试工具的使用技巧，包括快捷键操作、各种面板功能以及性能分析等。
关键观点总结
关键观点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的命令面板，有大量的隐藏功能
………………………………
