前端bug调试的方法技巧及常见错误

报错和Bug，是贯穿程序员整个编程生涯中，无法回避的问题。而调试，就是帮助程序员定位问题、解决问题的重要手段，因此，调试是每个程序员必备技能。

调试基本流程

核心原则：最重要的就是不断地缩小范围，在找出bug所在的具体代码块

整体流程：

• 有报错：查看控制台，定位是否为语法问题、类库兼容问题

• 通信不成功：查看网络，定位前端问题，或是后端问题

• 无报错，或报错且无有效信息-二分注释排查法

调试方法

步骤推测法：大多数的需求是线性的，基本上都可以分析出来步骤，当我们发现效果和预期不一样。那么分析步骤，然后按步骤排查，逐步缩小范围。最终确定问题

删除代码法：有的时候步骤很复杂，或者完全找不到头绪，可以先删除某块代码，然后看是否正常，可以确定错误区域在这块。然后再进去这块。继续删除某一个部分，知道缩小到具体代码。适用于某些无法看到错误，完全www.chinasem.cn不明确错误在哪的时候

排查bug的两大技巧

console：最常用的调试方法，当我们有怀疑的问题，可以配合console打印数据来验证数据是否符合预期打印语句验证代码块是否执行。

debugger：代码执行过程非简单线性，有很多异步操作。我们想看某一刻的状态时可以用pythondebugger。也就是想看代码执行到某一行的时，整个页面的状态

【拓展】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字段

  python

  核对接口文档的method字段

2、5XX一般为后台问题，可以把关键信息发送给后端，通知后端参与处理。

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

前端常见错误

取值调用报错

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

  试图从一个undefined里读取某个属性，常见于从用.取python值的时候。解决-看见这个报错马上根据报错上的读xxx找到你读取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文件)。意思是你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

  和上面的一样，但区别在于这个是定义了变量，但是在定义变量前使用了变量。变量的拼写和UAyeB作用域是没问题的，解决：看看变量的顺序

请求错误

• 请求码错误

  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调试的方法技巧及常见错误的文章就介绍到这了,更多相关前端bug调试内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持China编程(www.chinasem.cn)！