前端bug调试
报错和Bug，是贯穿程序员整个编程生涯中，无法回避的题目。而调试，就是帮助程序员定位题目、办理题目标重要手段，因此，调试是每个程序员必备技能。调试基本流程
核心原则：最重要的就是不绝地缩小范围，在找出bug地点的具体代码块
整体流程：
[*] 有报错：检察控制台，定位是否为语法题目、类库兼容题目
[*] 通讯不成功：检察网络，定位前端题目，或是后端题目
[*] 无报错，或报错且无有效信息-二分解释排查法
调试方法
步骤推测法：大多数的需求是线性的，基本上都可以分析出来步骤，当我们发现结果和预期不一样。那么分析步骤，然后按步骤排查，逐步缩小范围。最终确定题目
删除代码法：有的时间步骤很复杂，或者完全找不到头绪，可以先删除某块代码，然后看是否正常，可以确定错误区域在这块。然后再进去这块。继承删除某一个部分，知道缩小到具体代码。适用于某些无法看到错误，完全不明白错误在哪的时间
排查bug的两大本领
console：最常用的调试方法，当我们有怀疑的题目，可以配合console打印数据来验证数据是否符合预期打印语句验证代码块是否执行。
debugger：代码执行过程非简朴线性，有很多异步操作。我们想看某一刻的状态时可以用debugger。也就是想看代码执行到某一行的时，整个页面的状态
【拓展】debugger方法：
[*] 直接在代码中写入debugger
[*] 在Chrome DevTool的源代码面板里点击代码行序号
https://i-blog.csdnimg.cn/direct/a9c0ba8966e84bf392ec649496331483.png
debugger开启后会出现上图的调试工具，其作用分别为恢复执行、跳过下一个函数的执行过程、进入函数调用、跳出函数调用、单步执行、让断点失效。
如何看控制台报错
控制台的报错分为JS常见错误、第三方库题目、前后端通讯题目三种类型。
JS常见错误：常见报错类型有4类，报错中需要关注的三类信息报错信息、提示笔墨、报错文件，一样平常集中在前两行。此类错误需要根据提示做修改。
[*] SyntaxError - 语法错误
[*] ReferenceError - 引用错误，通常是变量或方法没有声明，直接利用
[*] TypeError - 类型错误，通常是在错误的数据类型上，访问某个方法或属性
[*] RangeError - 死循环
https://i-blog.csdnimg.cn/direct/16d59c218c944185b8ace53a98cebe99.png
第三方库的题目：报错信息中无源码文件提示，无常见错误提示。此类错误需要多借助搜索引擎办理，多看多积累。
https://i-blog.csdnimg.cn/direct/de6eaec17b65416b9ae9c21cd444467d.png
前后端通讯题目：控制台提示出现4XX、5XX的状态码，此类错误可以借助Chrome DevTool的Source面板快速定位修复。
https://i-blog.csdnimg.cn/direct/46c6f53f490e47b0bf95446affe3aff0.png
https://i-blog.csdnimg.cn/direct/d1ec20e8f9584e2fa66cf0ed4f4a054f.png
https://i-blog.csdnimg.cn/direct/f4283f6d9c9a4e988fa7892c08b4dfcf.png
【拓展】
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
跨域错误
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]