1. 打开开发者工具
- 使用快捷键 `Ctrl+Shift+I`（Windows）或 `Cmd+Opt+I`（Mac）直接打开。
- 右键点击网页元素，选择“检查”进入开发者工具。
- 通过浏览器菜单（点击右上角三个点 → 更多工具 → 开发者工具）启动。
2. 元素（Elements）面板调试
- 在页面上点击元素，或按 `Ctrl+Shift+C` 选中元素，右侧会显示其HTML代码和CSS样式。
- 直接修改HTML标签、属性或文本内容，实时预览效果。例如，更改按钮的文本或图片的路径。
- 在“Styles”栏中调整CSS属性（如颜色、字体、间距），支持实时编辑并查看变化。可临时添加新样式或修改现有样式，但仅对当前页面生效。
- 右键点击元素，选择“Break on”选项，设置断点。当元素的属性或子节点被修改时，调试器会暂停执行，方便追踪问题。
3. 控制台（Console）面板调试
- 在控制台输入 `console.log(变量名)`，输出变量值。例如，`console.log(window.location)` 可查看当前页面URL。
- 执行任意JavaScript代码，如 `document.getElementById('test').innerText = '修改成功'`，直接修改页面内容。
- 查看错误信息，如语法错误或资源加载失败，控制台会显示错误类型和位置，帮助快速定位问题。
4. 源代码（Sources）面板调试
- 在左侧文件树中找到需要调试的JavaScript文件，点击行号设置断点。当代码执行到此处时，会自动暂停。
- 使用“单步执行”按钮（F10）逐行运行代码，观察变量变化。点击“进入函数”（F11）可进入函数内部调试。
- 在右侧“Scope”栏中查看当前作用域内的变量值，支持实时监控和修改。
- 右键点击断点，选择“Edit breakpoint”，设置条件断点（如 `i > 5`），仅在满足条件时触发暂停。
5. 网络（Network）面板调试
- 刷新页面后，查看所有网络请求（如图片、脚本、样式表）。通过“Status”列筛选失败请求（如404或500错误）。
- 点击具体请求，查看“Headers”中的请求和响应头信息，或检查“Preview”中的返回数据。
- 使用“Disable cache”功能强制刷新缓存，测试最新资源是否生效。
- 模拟不同网络环境（如3G、离线），测试页面在低网速下的表现。
6. 其他补充操作
- 若需更高级的控制（如跳过广告、批量管理多个视频），可安装第三方插件（如“Adblock Plus”屏蔽广告，或“Video Speed Controller”调节播放速度）。安装后需根据插件说明进行个性化设置。
