前端Bug调试全流程指南：从定位到常见错误解析

报错与Bug是程序员职业生涯中无法回避的挑战，而调试则是定位并解决这些问题的关键手段，因此掌握调试技能是每位程序员的必备素质。

调试基本流程

核心原则在于不断缩小问题范围，直至锁定具体的Bug代码块。

整体流程如下：

• 若存在报错，应查看控制台以确认是否为语法错误或类库兼容性问题。

• 若通信失败，需检查网络请求，以区分是前端逻辑问题还是后端服务异常。

• 若无报错或报错信息无效，可采用二分注释排查法进行定位。

调试方法

步骤推测法：多数需求具有线性特征，可通过分析预期步骤与实际效果的差异，按步骤逐一排查以缩小范围，最终确定问题所在。

删除代码法：当逻辑复杂或毫无头绪时，可尝试删除部分代码以观察系统是否恢复正常，从而确定错误区域。随后进入该区域继续执行删除操作，直至定位到具体代码。此方法适用于错误隐蔽且难以直接定位的场景。

排查bug的两大技巧

Console：这是最常用的调试手段。当对某段代码存疑时，可通过console打印数据来验证其是否符合预期，或确认代码块是否执行。

Debugger：当代码执行过程涉及大量异步操作而非简单线性流程时，若需查看特定时刻的状态，可使用debugger。它允许开发者在代码执行到某一行时，检查整个页面的当前状态。

【拓展】debugger方法：

• 直接在代码中写入debugger语句。

• 在Chrome DevTool的源代码面板中点击代码行序号设置断点。

启用debugger后会出现调试工具栏，其功能包括：恢复执行、跳过下一个函数执行、进入函数调用、跳出函数调用、单步执行以及使断点失效。

如何看控制台报错

控制台报错主要分为三类：JS常见错误、第三方库问题以及前后端通信问题。

JS常见错误：主要包含4类，需重点关注报错信息、提示文字及报错文件，通常集中在前两行。此类错误需根据提示进行修改。

• SyntaxError - 语法错误

• ReferenceError - 引用错误，通常因直接使用未声明的变量或方法导致。

• TypeError - 类型错误，通常因在错误的数据类型上访问方法或属性引起。

• RangeError - 范围错误，通常由死循环导致。

第三方库的问题：此类报错通常无源码文件提示，也无常见错误特征。解决此类问题需多借助搜索引擎，通过多看多积累来增强处理能力。

前后端通信问题：控制台提示出现4XX或5XX状态码，此类错误可借助Chrome DevTool的Source面板快速定位并修复。

【拓展】

1、出现4XX状态码时，结合具体代码快速分析原因：

• 400：请求体传递参数不正确。

  通过NetWork面板查看请求体。

  比对接口文档，检查数据格式和属性名是否一致。

• 401：Token失效，请求头未携带Token。

  查看请求头，确认是否包含Token。

  重新登录以验证Token是否过期。

• 404：接口不存在（通常因URL路径书写错误导致）。

  查看请求头上的URL路径。

  核对接口文档中的URL路径。

• 405：请求方式不对（通常因Get、Post、Put等方式写错导致）。

  查看请求头中的Method字段。

  核对接口文档中的Method字段。

2、5XX错误通常为后台问题，可将关键信息发送给后端开发人员，通知其参与处理。

建议一次性发给后端的数据包括：请求路径、请求方式、状态码、请求体（载荷）及响应体（预览）。

前端常见错误

取值调用报错

• Cannot read properties of undefined(reading 'xxx')

  该错误表示试图从undefined中读取某个属性，常见于使用点运算符取值时。解决方法：根据报错信息中的reading 'xxx'找到读取该属性的位置，此时可断定此处存在undefined，需进一步排查其为何为undefined。

• xxx is not a function

  该错误常见于调用方法时，意味着被当作方法调用的对象并非方法（如undefined、字符串、数组或对象）。解决方法：与undefined问题类似，根据提示找到具体对象，然后排查其为何不是方法。

资源引入错误

• Failed to resolve xxx

  该错误表示某资源引入失败，通常见于通过import引入了不存在的模块。一般由构建工具提示，不会在控制台输出。解决方法：检查报错提示中import的地址是否正确。

• the server responded with a status of 404/400

  该错误常见于通过HTML文件打开项目（浏览器运行本质是打开HTML并加载JS/CSS等文件）。意指script标签加载的JS文件、link标签加载的CSS文件或img标签加载的图片文件地址不存在或无法访问。解决方法：通过网络面板查看哪个资源出错，并检查资源路径。

• xxx does not provide an export named default/xxx

  该错误仅见于import引入模块时，表示引入的对象在目标文件中不存在。解决方法：检查拼写以及引入来源是否有对应的export导出。

解析错误

• Expected xxx in JSON at position 1

  该错误仅见于JSON.parse解析JSON字符串时，表明JSON字符串格式有误。通常后端返回数据时，前端axios会自动尝试接续，不一定是主动调用JSON.parse。解决方法：检查解析的数据是否有问题，确认是否为标准JSON数据，可利用JSON解析工具进行校验。

低级错误

• Uncaught SyntaxError

  语法错误，属于最低级的错误。解决方法：按提示检查语法细节。

• Maximum call stack size exceeded

  通常由死循环引起，常见于递归调用、React中组件导致的无限递归更新，或编写了无穷大的循环函数。

• Identifier 'xxx' has already been declared

  重复变量定义。解决方法：检查哪个变量被重复定义，更换名称即可。

• xxx is not defined

  使用了未定义的变量。解决方法：检查变量名是否拼写错误，或作用域是否正确。

• Cannot access 'abc' before initialization

  与上述错误类似，区别在于变量已定义，但在定义前被使用。变量拼写和作用域无误。解决方法：检查变量的声明顺序。

请求错误

• 请求码错误

  500类错误：八成为服务器问题，也可能是参数不正确导致。

  404、403、400错误：基本为前端问题。404表示地址错误，403表示请求无权限，400表示请求不符合后端要求。

  100状态码基本少见，200和300状态码通常表示正常。

• Access to XMLHttpRequest at 'http://xxx.com/xxx' from origin has been blocked by

  跨域错误。

总结

本文介绍了前端Bug调试的方法技巧及常见错误，更多相关内容可搜索本站以往文章或继续浏览后续文章，希望大家多多支持本站！