1. 打开开发者工具
- 在Chrome浏览器中→按下`F12`键或右键点击页面→选择“检查”→即可打开开发者工具→默认显示“Elements”面板→展示当前网页的HTML结构。
2. 查看和编辑HTML元素
- 在“Elements”面板中→点击某个HTML标签→可直接修改其属性（如`style`、`class`）→实时预览效果→若需取消修改→按`Esc`键或刷新页面。
- 右键点击页面元素→选择“删除元素”→可移除指定标签→测试页面布局变化→适合调试样式冲突问题。
3. 使用控制台调试脚本
- 切换到“Console”面板→输入`document.querySelector("h1").innerText = "新标题"`→直接修改页面文字→验证JavaScript逻辑。
- 若需断点调试→进入“Sources”面板→找到对应脚本文件→点击行号设置断点→逐步执行代码→观察变量变化。
4. 网络请求与资源分析
- 切换到“Network”面板→刷新页面→查看所有加载资源（如JS、CSS、图片）→点击具体请求可查看响应头、耗时等信息→排查加载缓慢问题。
- 在“Application”面板中→查看本地存储（如`localStorage`、`Cookies`）→手动修改或清除数据→测试页面行为。
5. 移动端模拟与适配测试
- 按`Ctrl+Shift+M`（Windows）或`Cmd+Option+M`（Mac）→切换至手机视图→调整分辨率→测试响应式布局→检查元素是否错位或遮挡。
- 在“Elements”面板中→勾选“Toggle device toolbar”→自定义设备型号→模拟不同屏幕尺寸下的显示效果。
6. 保存调试结果与截图
- 右键点击页面元素→选择“Capture node screenshot”→自动保存选中部分的图片→方便分享或记录问题。
- 在开发者工具左上角→点击菜单图标→选择“Run Command...”→输入`screenshot --format=jpeg`→将当前页面保存为JPG图片。