序言

本教程由「小荣的网络开发日志」实操整理编写，实操踩坑验证，内容真实可靠。

遇到操作问题可直接联系作者，转载需标注原文出处，禁止私自篡改商用。

承接网站、APP、小程序、各类脚本定制开发；

AI 编程教学、一对一项目全程陪跑，提供免费技术咨询。

联系方式： 微信：rongyaolg 电话：18375295913

网页报错怎么看：浏览器 F12

如果你做的是网页项目，页面出问题时，第一件事就是打开浏览器 F12。

F12 可以理解成网页的“检查窗口”。平时用户看不到的问题，这里会显示出来。

什么时候需要打开 F12

遇到这些情况就打开：

• 页面一片空白。
• 按钮点了没反应。
• 登录失败。
• 数据列表加载不出来。
• 页面提示“请求失败”。
• AI 说修好了，但你打开还是不对。

怎么打开 F12

打开后你会看到很多英文，不要怕。

小白先只看两个地方：

Console：看红色报错

点击 Console。

如果有红色文字，说明页面代码可能出问题了。

你要做的不是自己猜，而是把红色报错复制给 AI。

复制时尽量包含：

• 红色错误文字。
• 报错文件名。
• 报错行号。
• 下面跟着的一串 at ... 内容。

比如你可能看到：

复制Cannot read properties of undefined
at LoginPage.tsx:32

这句不用硬懂。你可以先理解成：

“登录页面第 32 行，用了一个不存在的数据。”

发给 AI 时这样说：

复制我打开网页后 Console 有红色报错。

我刚才做的操作：点击登录按钮
完整报错：
粘贴 Console 红色报错

请你用小白能懂的话解释原因，并帮我修复。
只修这个问题，不要改无关功能。

Network：看请求有没有失败

如果页面能打开，但是数据出不来，常常不是页面本身坏了，而是“页面向后端要数据时失败了”。

这时看 Network。

操作步骤：

1. 打开 F12。
2. 点击 Network。
3. 刷新页面，或者重新点击出问题的按钮。
4. 看列表里有没有红色的一行。
5. 点开红色那一行，把里面的信息复制给 AI。

状态码是什么意思

Network 里经常会看到 200、404、500 这样的数字。

不用背，先看这张表：

如果你看到 500，可以这样理解：

网页去找后端拿数据，后端自己出错了。这个时候不能只看网页，还要看后端命令行有没有红字。

Network 信息怎么发给 AI

点开失败请求后，尽量复制这些：

复制我在浏览器 Network 里看到请求失败。

我点击了：
接口地址：
状态码：
返回内容 Response：
如果有请求参数，也一起贴：

请你判断是前端传错了，还是后端出错了。
先解释原因，再做最小修复。

AI 修完后怎么确认

修完后不要只听 AI 说“好了”。

你自己检查：

• 刷新页面。
• Console 里还有没有红色报错。
• Network 里失败请求有没有变成 200。
• 刚才不能用的按钮，现在能不能用。

确认可以，再保存 Git 版本。