1. 打开开发者工具
- 在Chrome浏览器中，按`Ctrl+Shift+I`（Windows）或`Cmd+Option+I`（Mac）直接打开开发者工具。
- 也可以右键点击页面→选择“检查”或点击浏览器右上角的三个点图标→“更多工具”→“开发者工具”。
2. 查看HTML结构
- 在开发者工具中，默认显示“Elements”（元素）面板。
- 鼠标悬停在页面元素上，对应的HTML代码会高亮显示。点击元素可快速定位到具体标签，修改属性（如`style`、`class`）后实时预览效果。
3. 调试CSS样式
- 在“Elements”面板右侧的“Styles”区域，查看当前元素的CSS规则。
- 双击任意样式规则可直接编辑，勾选或取消勾选属性前的复选框可临时启用/禁用该样式，观察页面变化。
4. 监控网络请求
- 切换到“Network”（网络）面板，刷新页面后查看所有资源加载情况。
- 点击具体请求可查看详细信息（如状态码、响应头、传输时间），右键点击可复制链接或保存资源到本地。
5. 执行JavaScript代码
- 在“Console”（
控制台）面板中直接输入`console.log(document.title)`等代码，测试脚本执行情况。
- 若页面报错，错误信息会显示在控制台中，点击错误行可跳转到对应源码位置。
6. 模拟移动设备调试
- 点击开发者工具左上角的“切换设备模式”图标（手机+平板图标），进入移动端调试视图。
- 在“Elements”面板中修改`meta`标签的`viewport`属性，或直接调整窗口
分辨率，测试响应式布局效果。
7. 捕获屏幕截图
- 在开发者工具中按`Ctrl+P`（Windows）或`Cmd+P`（Mac）打开截图工具。
- 选择需要截取的区域（支持精确选取元素），点击“保存”将截图下载为PNG或JPEG格式。
8. 分析性能瓶颈
- 在“Performance”（性能）面板中点击“录制”按钮，操作页面后停止录制。
- 查看“Flame Chart”和“Summary”部分，找出加载时间过长的脚本或渲染任务，优化关键资源。
9. 使用Source面板调试源码
- 在“Sources”（资源）面板中加载页面源码，设置断点（点击行号左侧）后刷新页面。
- 当代码执行到断点时，会自动暂停，可逐步执行（单步调试）并观察变量值变化。
