一、基础调试工具操作
1. 快速打开开发者工具
- 使用快捷键Ctrl+Shift+I/J（Windows/Mac）直接调出开发者工具面板
- 在Chrome右上角菜单中选择“更多工具”→“开发者工具”，通过拖拽调整面板位置（建议左右分屏）
- 访问`chrome://inspect/devices`远程调试手机页面（需USB连接或开启无线调试）
- 在Console面板输入`document.designMode = true`临时启用页面可编辑状态（测试表单交互）
2. 元素定位与样式修改
- 在Elements面板右键点击DOM节点，选择“Inspect”高亮对应页面区域（如导航栏、按钮）
- 双击CSS属性值直接修改样式（如将`color: 000`改为`red`），实时预览效果
- 使用扩展商店安装ColorZilla吸取页面颜色值，生成十六进制/HSL格式代码
- 在Console面板输入`getComputedStyle(document.querySelector('h1'))`查看元素最终渲染样式
3. 网络请求分析
- 在Network面板设置过滤器为“Doc”、“Script”、“Image”，隐藏无关资源加载（如字体文件）
- 右键点击请求条目，选择“Block Request Domain”模拟CDN故障，测试网站容错能力
- 使用扩展商店安装User-Agent Switcher伪装成移动设备，检查响应式布局断点
- 在Console面板输入`performance.now()`手动标记关键操作时间节点（如广告加载完成）