教程详情
1. 打开与关闭：右键检查，在页面任意位置点击鼠标右键，选择“检查”（Inspect）。快捷键操作，Windows/Linux系统按F12或Ctrl+Shift+I；macOS系统按Cmd+Opt+I。浏览器菜单，点击浏览器右上角的三个点菜单，选择“更多工具”，然后点击“开发者工具”。
2. 核心面板功能：元素（Elements）面板，可实时查看和编辑页面的HTML结构与CSS样式，左侧是动态生成的HTML DOM树，右侧是对应元素的CSS样式窗格，能在此修改HTML或CSS并立即在页面上看到效果，适合快速验证布局和样式调整。控制台（Console）面板，用于查看日志信息和执行JavaScript代码，所有console.log的输出、代码运行的警告和致命错误都会在此显示，同时也是功能完备的JavaScript运行环境，可在此执行代码、查询变量、操作页面元素。网络（Network）面板，监视页面加载过程中所有的网络请求和响应，记录页面加载的所有资源，包括HTML、CSS、JS、图片以及与服务器交互的API请求，可筛选请求、查看状态码、检查请求头和响应体，还能模拟不同网络条件来测试页面性能。应用（Application）面板，查看和管理浏览器为网站存储的所有本地数据，如Local Storage、Session Storage和Cookie等，可在此查看、编辑甚至清除这些数据，方便调试与本地存储相关的功能。
3. 高级调试与性能分析：源代码（Sources）面板，是JavaScript的终极调试中心，可设置断点、单步执行代码、检查变量，还能替换线上文件。性能（Performance）面板，通过录制和分析，找到导致页面卡顿、掉帧的性能瓶颈，使用时打开面板点击录制按钮开始录制，在页面上执行想要分析的操作后停止录制，分析报告时可关注概览、主线程火焰图、摘要等部分，根据火焰图定位耗时较长的任务进行优化。
4. 其他实用技巧：在元素面板中，勾选Styles面板下方的Show all可显示所有CSS属性，开启Layout中的Show paint flashing可高亮元素渲染区域。在控制台面板中，debugger语句可在代码中插入断点，右键控制台选择Save as global variable可将选中的元素或对象保存为全局变量。在源代码面板中，可使用条件断点，仅当条件满足时触发断点，还可利用本地覆盖功能，用本地修改过的文件替换线上网站正在加载的JS或CSS。
