前端bug调试的方法技巧及常见错误
作者：我在乎warning
报错和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里读取某个属性，常见于从用.取值的时候。解决-看见这个报错马上根据报错上的读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
和上面的一样，但区别在于这个是定义了变量，但是在定义变量前使用了变量。变量的拼写和作用域是没问题的，解决：看看变量的顺序
请求错误
请求码错误
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调试内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！