不会写代码也能用！浏览器开发者工具诊断网站问题完全指南

打开后，你会看到浏览器底部或右侧弹出一个面板。别被密密麻麻的标签吓到——你只需要关注其中 3 个。

你只需要认识 3 个标签

DevTools 有十几个标签，但非开发者只需要关注这 3 个：

下面逐一讲解。

Console 标签：读懂红色错误信息

什么是 Console

Console 是网站的"黑匣子"。当网站代码出错时，浏览器会把错误信息记录在这里。就像汽车的故障灯——你不需要懂发动机原理，但你需要知道哪个灯亮了。

红色 = 错误，黄色 = 警告

• 🔴 红色信息：出错了，需要关注
• 🟡 黄色信息：有警告，可能有问题但不致命
• 🔵 蓝色/白色信息：普通日志，可以忽略

如何读懂一条错误信息

打开 Console 后，你可能会看到类似这样的红色文字：

`` Uncaught TypeError: Cannot read properties of undefined (reading 'map') at ProductList.jsx:47:18 `

别被英文吓到，拆开来看：

你不需要理解这个错误的含义。你只需要做一件事：把这个红色信息截图或复制，发给开发者。 这一条信息就能帮开发者省掉 30 分钟的排查时间。

常见错误类型（翻译版）

Console 里最常见的 5 种问题

1. 白屏 + TypeError

页面加载后一片空白，Console 里有红色 TypeError。通常是 JavaScript 崩溃导致页面无法渲染。

2. 某个功能没反应 + ReferenceError

点击按钮没反应，Console 里有红色 ReferenceError。通常是相关代码没有正确加载。

3. 数据不显示 + TypeError: Cannot read properties of undefined

列表或表格区域为空，Console 有这类错误。通常是后端返回的数据格式和前端期望的不一致。

4. 页面部分区域空白 + 404 错误

某些图片或组件不显示，Console 有 404 错误。资源文件路径错误或被删除了。

5. 加载很慢 + 大量黄色警告

页面加载缓慢，Console 有很多黄色警告。可能是加载了过多不必要的资源或有性能问题。

Network 标签：发现加载失败的资源

什么是 Network

Network 标签记录了页面加载时所有的网络请求——图片、CSS、JavaScript、API 接口、字体文件，一切从服务器获取的资源都在这里。

如何使用

• 找到 <img> 标签
• 查看 src 属性——图片地址是否正确
• 查看 width 和 height——尺寸是否被限制

检查文字为什么被截断：

• 找到文字元素
• 查看 CSS 中的 overflow 属性——是否设置了 hidden
• 查看 white-space 和 text-overflow——是否限制了文字换行

检查按钮为什么点不到：

• 找到按钮元素
• 查看 CSS 中的 z-index——是否被其他元素覆盖
• 查看 pointer-events——是否被禁用了点击
• 查看 display 和 visibility——是否被隐藏

注意：在 Elements 里的修改是临时的

你在 Elements 标签里修改的任何样式，刷新页面后就会恢复。这只是用来调试，不会真正改变网站。放心大胆地试，不会搞坏任何东西。

5 个实战案例

案例 1：页面白屏

现象：打开网站，页面一片空白

诊断步骤：

反馈给开发者："移动端（375px 宽度）按钮重叠，缺少 @media (max-width: 768px) 的布局适配"

有没有更简单的方式？

如果你觉得打开 DevTools、找 Console、找 Network、复制错误信息还是太麻烦了——有一个更简单的方式。

BugCapturer 可以自动帮你完成这些操作。

当你用 BugCapturer 截图并提交反馈时，它会自动采集：

• 控制台错误：最多 10 条 error 级别的日志（含文件名和行号）
• 失败的网络请求：最多 5 条状态码 ≥ 400 的请求（含 URL、方法、状态码）
• 技术环境信息：URL、浏览器、操作系统、屏幕分辨率、视口尺寸、DPR

你不需要打开 DevTools，不需要知道 Console 在哪，不需要手动复制错误信息。只需要：