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