前端bug调试

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

调试基本流程

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

整体流程:

  1. 有报错:查看控制台,定位是否为语法问题、类库兼容问题

  2. 通信不成功:查看网络,定位前端问题,或是后端问题

  3. 无报错,或报错且无有效信息-二分注释排查法

调试方法

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

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

排查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:请求体传递参数不对。

    1. NetWork查看请求体

    2. 比对接口文档,查看数据格式和属性名是否一致。

  • 401:token失效,请求头没有携带token。

    1. 查看请求头,是否有token

    2. 重新登录,验证token过期。

  • 404:没有该接口(通常是url路径写的有问题)

    1. 查看请求头上的url路径

    2. 核对接口文档的url路径

  • 405:请求方式不对(通常是get 、post、put等方式写错)

    1. 查看请求头中的method字段

    2. 核对接口文档的method字段

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

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

前端常见错误
取值调用报错
  1. Cannot read properties of undefined(reading 'xxx')

    试图从一个undefined里读取某个属性,常见于从用.取值的时候。解决-看见这个报错马上根据报错上的读xxx找到你读取xxx的地方,此时已经可以断定此处有一个undefined,找出来为什么是undefined

  2. xxx is not a function

    常见用调用方法的时候,这个报错意味着你当成一个方法调用的东西不是一个方法。比如是一个undefined,字符串数组,对象,却被当成了方法调用 解决-和undefined问题一样,直接按照提示的什么不是一个方法找到,然后排查他为什么不是一个方法就行

资源引入错误
  1. Failed to resolve xxx

    某资源的引入失败,通常见于import引入了一个不存在的模块。一般是由构建工具提示,不会在控制台上输出解决-检查提示的错误import的地址就好。

  2. the server responded with a status of 404/400

    一般见于html文件的打开项目(项目最终在浏览器跑起来本质上是打开一个html,加载你写的js文件)。意思是你script标签加载的js文件,或者link标签加载css文件,或者img标签加载的图片文件地址不存在或者无法访问解决-通过网络面板,看看是哪个资源错误了,检查下资源的路径

  3. xxx does not provide an export named default/xxx

    一般只见于import 引入模块的时候,引入的东西不存在于目标文件。检查下拼写,以及引入来源有没有export引入的东西

解析错误
  1. Expected xxx in JSON at position 1

    只见于JSON.parse解析JSON字符串的时候,JSON字符串的格式有问题,一般后端返回的数据,前端axios会自动试图接续,不一定是你主动地JSON.parse。解决:检查解析的数据是否有问题,是否标准的json数据,可以利用JSON解析工具去校验

低级错误
  1. Uncaught SyntaxError

    语法错误,最低级的错误。解决:按提示检查语法几个

  2. Maximum call stack size exceeded

    一般就是死循环,常见于递归,或者react中会常见组件导致的无限递归更新,或者写了一个无穷大的循环函数。

  3. Identifier 'xxx' has already been declared

    重复变量定义,解决:检查下哪个变量重复定义换个名字就好

  4. xxx is not defined

    使用了没有定义的变量,解决:看看是不是变量名拼错了,或者作用域不对

  5. Cannot access 'abc' before initialization

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

请求错误
  1. 请求码错误

    1. 500类:八成服务器问题,也可能是参数不对导致的

    2. 404,403,400:基本都是前端的问题,404是地址错误了,403是请求无权限,400是请求发的不符合后端要求

    3. 100:基本看不到,200,300基本都是没问题

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

    跨域错误

相关推荐
翻滚吧键盘19 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
开-悟30 分钟前
嵌入式编程-使用AI查找BUG的启发
c语言·人工智能·嵌入式硬件·bug
一入JAVA毁终身35 分钟前
Data的时区格式BUG
bug
秃了也弱了。38 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css