前端报错调试

前言

本文主要介绍前端开发过程中的常见报错及报错定位，以及常用的调试手段，为作者的经验之谈。

一、http错误状态码

灵魂拷问：你最长花了多久找出404的原因？

4XX错误

1. 404
   大家都知道是链接不对，但是造成404的原因至少有以下四种：
   （1）、比对链接与接口文档，要么是前端写错，要么是接口文档写错，基本上就是单词大小写，空格两方面
   （2）、后端没部署
   （3）、nginx没有配置好代理或者前端本地没有配置好代理
   （4）、post跟get用错，使用get方法调post请求也可能是报405，看服务器配置
2. 401————未登录
3. 403————账号没有权限
4. 400
   参数错误的类型太多，以下几种最常见
   （1）、参数遗漏
   （2）、字段名写错
   （3）、参数值不对，如日期格式要时间戳却给了字符串
   （4）、接口文档不对
   （5）、中文解码与编码
   不会造成错误的情况
   （1）、多传了几个后端不接的参数
   （2）、get请求的数字是不分字符串或者数字的
5. 405————方法不允许，常见于post、get用错
6. 415————header不对，最常见是contentType没对上

5XX错误

1. 500————服务器异常
   （1）接口靠谱的是服务器异常
   （2）接口不靠谱的时候可能是前端参数错误
   不管哪种都是要看服务器日志
2. 502————网关错误，可能是服务器没跑起来也可能是超时
3. 504————服务器超时，服务器网络不通或者超时时间设置太短

200但是没有看到返回

（1）、可能是接收的文件，没能显示出来（正常时接到一堆乱码）
（2）、服务器挂了，超时
（3）、内容过多，浏览器接收不了，可以用postman试试

二、js常见错误

js四大错误类型

1. RangeError
   设置的数值超出相应的范围，基本上都是使用js内置方法的入参错误，找不到bug时就找当前页面用的js内置方法
2. ReferenceError
   引用类型错误，基本上都是undefined
3. SyntaxError
   语法错误，简单的情况可以直接看错误信息知道答案，困难的时候就报了一句SyntaxError，没有提示在哪的时候，可以通过编辑器的语法检查快速定位
4. TypeError
   类型错误，基本上也是undefined

js常见错误

5. Uncaught TypeError: Cannot read property ‘’ of undefined
   对象不存在，比较好排查的报错，检查对应代码片段即可。
   比较常见于后端返回空值时，前端没有校验返回值类型。
   undefined的报错还有：
   （1）、TypeError: ‘undefined’is not an object----老版本safari上才能看到，现在不知道有没
   （2）、TypeError: Cannot read property ‘length’of undefined ----目标不是数组或字符串
   （3）、Uncaught TypeError: Cannot set property … of undefined
   （4）、ReferenceError: … is not defined -----未定义或者作用域内没找到
   （5）、TypeError: ‘null’ is not an object----老版本Safari的报错，其实也是未定义
6. (unknown): Script error
   常见于跨域，服务器开白名单或配置代理
7. TypeError: … is not a function
   调用未定义的函数，常见于写高阶函数不细心
8. Uncaught RangeError: Maximum call stack
   栈溢出
   （1）、递归死循环了
   （2）、JSON.stringify，JSON.parse的入参过大，导致循环次数过多
9. Uncaught exception: ReferenceError: Cannot assign to ‘this’
   给一个不能被赋值的变量赋值，比如给函数的返回值或 this 关键字赋值。
10. Uncaught TypeError: Converting circular structure toJSON
    JSON.stringify 入参错误
11. Unexpected token <,; 与 Unexpected identifier
    语法错误，有些浏览器版本漏了逗号会提示，也会直接提示Unexpected identifier，如果不提示是哪一行，会很难找，可以试试用编辑器的语法检查
12. Uncaught SyntaxError: Identifier ‘’ has already been declared
    重复声明let声明的变量
13. Uncaught TypeError: Assignment to constant variable.
    修改const声明的变量
14. vue、react等插件抛出的错误
    看懂英文就行，不懂就上网查

三、js调试方法

几种浏览器调试方式

1. alert
   古董级调试法，现在用于手机端的断点调试，不过可能会被app禁止调用。（吐槽：还有一些前端知识停留在远古时代的老java会用）
2. console.log()、debugger
   大家都懂的，不多说
3. dom断点调试
   在开发中，偶尔会遇到类似这样的问题：页面上的一个DOM元素被改了属性，但是我们却不知道是哪个脚本更改的
   jquery时代偶尔会用到，用vue、react基本上看不了，因为调试进去只会看到他们的源码。过时了，简单提一嘴。
   使用方式：右击元素->Break on->Attributes modifications->改变属性触发
   
4. XHR Breakpoints
   可以看到调用接口的代码在哪里，不是很常用，现在基本上都是跑到axios这些插件的源码里面去，自己封装的xhr才用得上
   使用方式：控制台sources->XHR Breakpoints->+号->输入链接
   
5. Event Listener Breakpoints
   按事件来找bug
   应用场景：比如body绑定了一个点击事件，点击事件冲突了，但是不知道哪一块代码给绑定的（比如在node_module里面的插件），此时你看自己的代码看不出哪里触发的事件，你可以使用它定位到哪几个文件监听了它，然后再去看对应插件的文档或者源码。
   

个人常用的几种定位方式

1. 自己写的代码，一眼看出问题（看不出时可能是脑子不清醒，找别人帮忙看）
2. 凭报错信息直接找到对应的错误行，再一步步往上调试（console.log或debugger）
3. 没有提示到哪一行，但是有关键字，如：Cannot read property ‘’ of undefined，
   到对应文件或文件夹搜索，再一步步调试
4. 没有关键字，代码压缩过，提示 a is not defined
   pc端到本地环境场景复现，本地调不到生产环境的接口可以直接复制network里的数据过来（移动端后面讲）
5. 提示信息不明显，如Script errror
   1、在各个节点打debugge人或者console.log()，看哪里不执行
   2、使用trycatch把代码一段段包裹起来打印错误，代码没什么耦合性的时候直接一段段代码注释掉也行。

Script errror

手机端调试时，有时会出现‘Script error’，然后没有任何其他信息。这个其实是有些浏览器实现script资源加载的地方，是进行了同源策略判断的，如果是非同源资源，errorMessage就被写死为“Script error”了

解决方式：

1. 既然是浏览器的问题，那就换一个浏览器好了，并不是所有浏览器都有这个限制，可以选择换一个手机，还不行就再换一个，换到能正确显示bug。
2. 利用script的crossorigin属性，按以下步骤配置
   1、添加script的crossorigin属性
   2、配置一下服务器，设置静态资源Javascript的Response为Access-Control-Allow-Origin

四、移动端调试

移动端调试工具

1. 谷歌模拟器本地调试，大家都懂的
   
2. 移动端调试神器vconsole与Eruda
   Eruda比较好用

<script src="eruda.min.js">script>

<script src="vconsole.min.js">script>
<script>
        var vConsole = new window.VConsole();
        eruda.init();
script>

3. 使用抓包工具： Charles、Fiddler等
   作者只用过Charles，因为当时公司发mac，mac用Charles比较多，用window的同事喜欢用Fiddler，这两个软件都兼容不同系统了，掌握一个就够了。
4. 使用错误监控插件
   比如sentry错误监控，网址https://sentry.io/
   会把错误日志都上传到平台上，错误监控很方便
   缺点是会被认为是收集用户信息，如果是私有化部署用一用还是不错的。
5. 兼容性测试平台
   手机兼容性测试一般都是找第三方公司，但是他们的覆盖范围也是有限的，一旦有某些用户的手机机型较老，而公司里却没有对应的手机，可以到这种在线手机租借平台（巨贵）
   本人用过的平台之一: 云测 https://www.testin.cn/business/landing/test_machine.htm
6. mac跟iPhone连接调试

几个h5与app联调的错误

1. app调用不到前端的代码
   确保代码在window对象上
2. 拍照、蓝牙、定位等失败
   可能app没有开权限
3. 键盘弹起盖住页面底部
   app设置问题，找安卓或ios解决，前端没办法，主要是机型太多没法整。如果App不能发版，实在是想应付一下，可以用focus监听然后用底部加padding顶起来，同时还得滚动到底部
4. 键盘弹起，输入框光标不归位
   这个是兼容问题，属于前端要解决的，监听focus、blur，控制页面滚动
5. 登录超时
   一定要设置接口拦截做断线重连
6. 后退到初始页面无法退出或者后退直接退出页面
   让app开发设置就好了，都是他们的错。或者你让他们提供方法给你退出，安卓跟ios都是webView.goBack/webView.canGoBack
   另外的方案是自己做一套路由控制，像是vue路由一样，路由原理点这里
7. 请控制好你的路由，用history.go()，location.replace()等方法控制，不然页面会一直后退不出去

最后

1. 没有找不到的bug，只有不耐烦的人
2. 能问则问，一小时内找不到答案赶紧问人
3. 解决不了问题就解决提问题的人