详情介绍
1. 快速打开开发者工具
- 按`F12`或右键点击页面→“检查”直接打开开发者工具，默认显示“Elements”标签页，可实时查看和修改HTML结构。
- 使用快捷键`Ctrl+Shift+I`（Windows）/`Cmd+Option+I`（Mac）强制进入调试模式，适用于无右键菜单的特殊页面。
2. 元素定位与样式修改
- 在“Elements”面板中，点击DOM元素后按`Enter`键展开子节点，双击属性值（如`color: 000`）可直接编辑样式。
- 右键点击页面元素→“Inspect”自动跳转到对应代码位置，修改CSS后按`Ctrl+S`保存临时更改（仅本次会话有效）。
3. 网络请求分析与优化
- 切换到“Network”标签页，刷新页面后查看所有资源加载状态（如HTML、CSS、JS、图片），红色表示加载失败的资源。
- 点击资源条目可查看响应头、传输时间及文件大小，右键导出HAR文件用于分析性能瓶颈（如过大的脚本文件）。
4. JavaScript断点调试
- 在“Sources”标签页中，找到需要调试的JS文件，点击行号设置断点，按`F8`逐步执行代码，观察变量变化。
- 使用`console.log()`在代码中输出日志，或在“Console”面板手动输入命令测试函数返回值（如`document.title`）。
5. 移动端模拟与响应式测试
- 按`Ctrl+Shift+M`（Windows）/`Cmd+Shift+M`（Mac）打开设备模拟工具，选择手机型号（如iPhone 15）预览页面效果。
- 在“Elements”面板右侧调整“视口尺寸”（如宽度设为360px），实时查看不同分辨率下的布局变化。
6. 捕获屏幕快照与对比
- 在“Elements”面板中，右键点击修改后的页面→“Capture node screenshot”生成当前DOM节点的图像截图。
- 使用“Compare”功能加载两个不同版本的网页，对比代码差异（如CSS样式或HTML结构调整前后的效果）。
