在谷歌浏览器中排查网页报错，主要通过开发者工具（Developer Tools）进行。以下是详细步骤和常用方法

打开开发者工具

• 右键点击网页 → 选择“检查”（Inspect）
• 快捷键：F12 或 Ctrl+Shift+I（Windows/Linux）、Cmd+Opt+I（Mac）
• 菜单 → 右上角三个点 → 更多工具 → 开发者工具

主要排查面板

（1）Console（控制台）

• 功能：显示 JavaScript 错误、警告、日志（console.log）及网络请求错误。
• 操作：
  • 查看红色错误信息（错误描述、文件名、行号）。
  • 点击错误链接跳转到 Sources 面板对应代码。
  • 使用 console.log() 输出变量值辅助调试。

（2）Network（网络）

• 功能：监控所有网络请求（HTML、CSS、JS、API等）。
• 操作：
  • 刷新页面（F5）记录请求。
  • 查看请求状态码（红色为失败，如 404、500）。
  • 点击请求查看详情（Headers、Preview、Response）。
  • 筛选请求类型（XHR/JS/CSS等）。

（3）Sources（源代码）

• 功能：调试 JavaScript，查看源码。
• 操作：
  • 左侧文件树查看网页资源。
  • 点击行号设置断点（Breakpoint）。
  • 右侧调试工具栏（暂停、单步执行等）。
  • 修改代码后按 Ctrl+S 保存（仅本地生效）。

（4）Application（应用）

• 功能：检查存储信息（LocalStorage、SessionStorage、Cookies等）。
• 操作：
  • 查看/修改存储数据。
  • 清除缓存或存储数据测试问题。

常见错误类型与排查

JavaScript 错误

• 现象：页面功能异常、白屏。
• 排查：
  • 查看 Console 中的错误栈。
  • 使用 Sources 断点调试。
  • 检查引入的第三方库版本或 CDN 是否可用。

网络请求错误

• 现象：资源加载失败、接口报错。
• 排查：
  • Network 面板查看失败请求。
  • 检查状态码：
    • 4xx（客户端错误，如 404 资源不存在、403 无权限）。
    • 5xx（服务器错误，如 500 服务器内部错误）。
  • 检查请求 Headers（如 Content-Type、Authorization）。
  • 复制请求为 cURL 在终端重试（右键请求 → Copy → Copy as cURL）。

资源加载问题

• 现象：图片/样式不显示。
• 排查：
  • Network 中过滤对应资源（如图片、CSS、JS）。
  • 检查路径是否正确、服务器是否可访问。

CSS/样式问题

• 现象：布局错乱、样式异常。
• 排查：
  • Elements 面板检查元素样式。
  • 查看应用的 CSS 规则（是否有删除线？被覆盖？）。
  • 实时修改样式测试效果。

跨域问题（CORS）

• 现象：Console 显示跨域错误。
• 排查：
  • 检查 Network 中请求的 Response Headers 是否包含 Access-Control-Allow-Origin。
  • 本地开发时配置代理或后端启用 CORS。

高级调试技巧

• 移动端调试：
  • 点击开发者工具左上角手机图标,切换设备模拟。
  • 连接真实手机调试：USB 连接后，在 Chrome 中访问 chrome://inspect/#devices。
• 性能分析：
  • Performance 面板录制页面性能，查找卡顿原因。
• 内存泄漏：
  • Memory 面板拍摄堆快照，比较内存变化。
• 禁用缓存：
  • 打开开发者工具后,勾选 Network 面板的 Disable cache（仅当 DevTools 打开时生效）。

快速修复与测试

• 禁用浏览器扩展：无痕模式（Ctrl+Shift+N）打开页面，排除插件干扰。
• 清除缓存：右键地址栏左侧图标 → “清除网站数据”，或 Ctrl+Shift+Del 清除浏览数据。
• 检查浏览器兼容性：使用 Console 检查新 API 是否支持（如 fetch）。

错误信息搜索

• 将 Console 中的错误信息复制到搜索引擎（如 Google、Stack Overflow）。
• 如果是框架（React/Vue 等），查看其官方调试工具（如 React DevTools）。

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