1. 快速打开开发者工具
- 按`F12`或`Ctrl+Shift+I`→直接调出调试面板（支持键盘快捷键操作）。
- 在页面上右键点击元素→选择“检查”→自动定位到对应HTML代码（精准查找节点）。
2. 实时修改页面内容
- 在“Elements”面板→双击HTML标签→直接编辑文字或属性（如修改按钮文本、图片路径）。
- 在“Styles”区域→双击CSS样式→即时调整颜色、字体、间距（如将`color: black`改为`red`）。
3. 调试JavaScript代码
- 在“Console”面板→输入`alert('测试')`→立即弹出提示框（验证脚本执行环境）。
- 点击“Sources”标签→找到JS文件→在行号处设置断点→使用`Step Over`逐行调试（排查逻辑错误）。
4. 分析网络请求
- 在“Network”面板→按`Ctrl+R`刷新页面→查看所有资源加载状态（如JS、图片、API请求）。
- 点击某个请求→在右侧栏查看“Headers”“Payload”“Response”→确认返回数据是否正确（如检查JSON格式）。
5. 模拟移动设备调试
- 在“Viewport”选项卡→选择“iPhone X”或其他机型→实时预览移动端效果（适配响应式设计）。
- 在“Network”面板→勾选“Disable Cache”→模拟首次加载（测试缓存逻辑问题）。
6. 捕获屏幕截图和录制视频
- 在“Elements”或“Console”面板→按`Ctrl+P`→直接截取当前页面（含元素高亮标记）。
- 点击右上角摄像头图标→开始录制视频→保存为MP4文件（用于演示BUG复现过程）。
