谷歌浏览器提供了强大的开发者工具来排查网页报错，以下是完整的排查步骤

快速打开开发者工具

• 快捷键：F12 或 Ctrl+Shift+I（Windows/Linux），Cmd+Option+I（Mac）
• 右键菜单：在页面任意位置右键 → "检查"
• 菜单栏：右上角三个点 → 更多工具 → 开发者工具

核心排查面板

Console（控制台） - 最重要

📍 显示所有JavaScript错误、警告、日志

• 红色错误：语法错误、运行时错误
• 黄色警告：潜在问题
• 灰色日志：console.log() 输出
• 过滤器：可筛选错误、警告、日志等级别

Network（网络） - 资源加载问题

📍 检查HTTP请求、资源加载状态

• 查看红色状态码（4xx/5xx错误）
• 点击具体请求查看：
  • Headers：请求/响应头信息
  • Preview/Response：返回内容
  • Timing：加载时间线

Sources（源代码） - 调试JavaScript

📍 断点调试、查看源码

• 左侧文件树查看加载的源码
• 行号处点击设置断点
• 右侧调试面板：
  • Watch：监控变量
  • Call Stack：调用栈
  • Scope：作用域变量

Elements（元素） - DOM/CSS问题

📍 检查HTML结构和样式

• 实时编辑HTML/CSS
• 查看计算样式（Computed）

常见报错排查流程

🚨 JavaScript错误

1. Console面板查看错误信息
2. 点击错误链接跳转到Sources面板对应行
3. 设置断点重新触发错误
4. 使用debugger语句：

   // 在可疑代码前加入
   debugger; // 会自动暂停

🌐 网络请求失败

1. Network面板过滤类型：XHR/JS/CSS
2. 检查状态码：
   • 404：资源不存在
   • 500：服务器错误
   • CORS错误：检查响应头
3. 复制为cURL：右键请求 → Copy → Copy as cURL

🎨 样式问题

1. Elements面板检查元素
2. Styles标签查看应用样式
3. Box Model可视化布局
4. 切换设备模式测试响应式

实用技巧

持久化Console日志

• Settings → Preferences → 勾选"Preserve log"

禁用缓存

• Network面板勾选"Disable cache"
• 或打开开发者工具时按 Ctrl+Shift+P → 输入"Disable cache"

移动端调试

• 点击设备图标（Toggle device toolbar）
• 选择设备或自定义分辨率
• 刷新后保持移动端UA

性能分析

• Performance面板录制页面操作
• Memory面板检查内存泄漏
• Lighthouse进行综合评分

常用Console命令

// 查看对象
console.dir(element);
// 表格显示
console.table(array);
// 性能计时
console.time('label');
// ...代码...
console.timeEnd('label');
// 堆栈跟踪
console.trace();
// 断言
console.assert(condition, message);

保存和分享

导出HAR文件

• Network面板右键 → Save all as HAR

截图

• Ctrl+Shift+P → 输入"screenshot"

复制错误信息

• Console中右键错误 → Copy → Copy all

扩展推荐

1. Vue.js DevTools - Vue项目调试
2. React Developer Tools - React项目调试
3. Redux DevTools - Redux状态管理

快速排查清单

问题类型	首要检查	次要检查
JS报错	Console面板	Sources断点
样式异常	Elements面板	Computed样式
加载失败	Network面板	控制台网络错误
性能问题	Performance录制	Memory快照
兼容性问题	设备切换	Console警告

Console面板是第一现场，大多数问题都能在这里找到线索，通过系统性的排查,可以快速定位并解决网页报错问题。

标签： 开发者工具 网页报错