F12调试

发生错误不要慌，F12调试大法可以解决大多数的错误。

F12指的就是键盘上的F12键。

在你发生错误的网页按F12键，就会打开一个调试面板，这个调试面板，则可以检查当前页面的加载情况、前端源码、服务器网络请求、缓存、资源加载（视频、图片、js脚本等）。

网络请求面板

F12打开之后，你需要切换至Network这一栏，这一栏是当前页面的网络请求记录。有些浏览器是中文的则为“网络”，例如edge浏览器。

查看调试记录

刚打开的时候，你会发现有很多记录，这些记录都是当前页面涉及到的网络请求和资源加载，例如这个页面使用了哪些js文件，使用了哪些图片，使用了哪些后端服务。

清空调试记录

为了更方便调试，有一个干净的环境，那么你需要点击清空调试记录的按钮，将所有记录清空。

开始调试

假如当前页面有个错误，你如何知道是哪里发生了错误？

首先，你要知道这个错误是什么时候触发的，例如：

• 刚进入页面就显示错误
• 点击某个按钮才显示错误

一般都是这两个情况，分为主动发生和被动发生。

如果刚进入页面发生的错误，你需要按照以下流程调试：

• 打开F12面板
• 清空调试记录
• 刷新当前页面
• 从调试记录中找到错误的哪一项

查看错误信息

如果页面并没告诉你是哪个文件发生了错误怎么办？那就只能一个个文件看一遍。只要preview这一栏存在错误的代码或者是不正常的结构，都是有错误的。

如果点击按钮后才发生的错误，你需要按照以下流程调试：

• 打开F12面板
• 清空调试记录
• 再次点击按钮

从调试记录中找到错误的哪一项。

–

发生错误不要慌，F12调试大法可以解决大多数的错误，以上就是F12调试大法。