谷歌浏览器提供了强大的开发者工具来帮助排查网页错误。以下是详细的排查步骤和常用方法

打开开发者工具

1. 快捷键：

   

   • F12 或 Ctrl+Shift+I (Windows/Linux)
   • Cmd+Option+I (Mac)

2. 右键菜单：

   页面右键 → "检查"

主要排查面板

控制台 (Console)

• 查看错误信息：JavaScript错误、语法错误、网络错误等
• 过滤功能：
  • 点击"Default levels"可过滤错误类型
  • 使用过滤器搜索特定错误
• 执行调试代码：可直接在控制台测试代码片段

网络 (Network)

• 查看请求状态：
  • 红色：请求失败（4xx/5xx错误）
  • 黄色：资源可能有问题
• 筛选请求类型：XHR/JS/CSS/Img等
• 关键信息：
  • Status Code（状态码）
  • 请求头/响应头
  • 预览/响应内容

源代码 (Sources)

• 设置断点：点击行号设置断点
• 调试功能：
  • 单步执行（F10）
  • 步入函数（F11）
  • 继续执行（F8）
• 查看调用堆栈：右侧Call Stack面板

元素 (Elements)

• 检查DOM结构：查看元素属性和样式
• 实时编辑：修改HTML/CSS测试效果

常见错误排查流程

JavaScript错误

1. 打开Console面板
2. 查看红色错误信息
3. 点击错误链接跳转到Sources面板
4. 设置断点调试

网络请求错误

1. 打开Network面板
2. 刷新页面（或触发请求）
3. 筛选失败的请求（红色）
4. 检查：
   • 状态码（404、500等）
   • 请求URL是否正确

资源加载问题

1. Network面板 → 筛选对应资源类型
2. 检查：
   • 是否被阻止（blocked）
   • CORS跨域问题
   • 文件路径是否正确

性能问题

1. Performance面板：录制页面加载过程
2. Lighthouse面板：运行性能审计

实用技巧

1. 保留日志：

   • Console面板勾选"Preserve log"
   • 页面跳转时错误信息不会清空

2. 设备模拟：

   • 点击"切换设备工具栏"（手机图标）
   • 模拟不同设备和网络条件

3. 快速清缓存刷新：

   右键刷新按钮 → "清空缓存并硬性重新加载"

4. XHR断点：

   • Sources面板 → XHR/fetch Breakpoints
   • 拦截特定API请求

5. 源代码映射：

   支持TypeScript、压缩代码的源码映射调试

常见错误类型

高级调试工具

1. 条件断点：右键断点 → "Edit breakpoint"
2. 监视表达式：Sources面板 → Watch
3. 控制台工具函数：

   console.table()    // 表格形式显示数据
   console.dir()      // 显示对象属性
   console.trace()    // 输出调用堆栈

通过这些工具的组合使用,可以高效定位和解决网页开发中的各种问题。