1. 打开方式：按下`F12`键，或`Ctrl+Shift+I`（Windows/Linux）/`Command+Option+I`（Mac），或在页面上右键点击选择“检查”，也可通过浏览器右上角的三个点菜单进入“更多工具”选择“开发者工具”。
2. 元素面板：左侧显示DOM结构，右侧展示选中节点的样式和盒模型。可双击修改HTML标签、属性或CSS样式，实时预览效果。支持右键操作，如删除节点、复制XPath/CSS选择器、隐藏元素等。还能设置DOM断点，监控元素属性或子树变化。
3. 控制台面板：用于输出日志、错误信息及执行JavaScript代码。输入`console.log()`可打印调试信息，按`Shift+Enter`换行续写代码。支持定义变量、调用函数，甚至直接操作页面元素（如`document.querySelector().innerText`）。勾选“Preserve log”可在页面刷新后保留日志。
4. 源代码面板：左侧列出页面资源（JS/CSS文件、图片等），中间为代码编辑器，右侧为调试工具。点击行号可设置断点，刷新页面后代码会在断点处暂停，支持单步执行（`Step over/into/out`）、查看变量值、调用堆栈等。还可通过“Snippets”编写代码片段，提升重复操作效率。
5. 网络面板：记录所有网络请求（XHR/Fetch、CSS/JS文件、图片等），显示状态码、加载时间、请求头/响应体。可筛选请求类型（如XHR）、禁用缓存（`Disable cache`）强制刷新资源，或模拟不同网络环境（如3G慢速）。右键请求可复制为cURL命令，便于爬虫开发。
6. 应用面板：管理网站的本地存储（Local/Session Storage）、Cookies、IndexedDB等数据。可编辑存储值、删除条目，或模拟登录状态（修改Cookie）。支持查看Service Worker脚本及缓存内容，调试离线应用。
7. 性能面板：录制页面操作（如滚动、点击）生成性能报告，分析卡顿原因。火焰图（Flame Chart）显示任务执行时间，黄色块代表JS脚本，紫色块为渲染布局。通过优化长任务（如减少DOM操作、压缩JS）提升流畅度。
8. 设备模式：模拟不同设备的屏幕尺寸、分辨率及触摸事件。在“Toggle device toolbar”中选择预设设备（如iPhone 14），或自定义宽度/高度，测试响应式布局。支持模拟移动网络（如Slow 3G）观察加载性能。
