常见前端调试技巧 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

前言

😄😄1.任何一个编程者都少不了要去调试代码。一般来说调试程序是在编码之后或测试期修改Bug时进行的。 本文主要讲一下平时前端调试用的那些方法，希望能够给到大家帮助,帮助大家项目稳定安全上线（奖金少不了）。

Bug与Debug

1.bug的产生

• bug的典故

  1. 早年计算机的程序都是打在纸带上的，运行结果也会显示在输出的纸带上。早年的计算机都很大，里面有个把昆虫应当不足为奇，如果有虫子死在里面，那么有可能尸体会随着纸带一起出来。Oops, it's a bug. 于是沿用到现在。

  2. 1946年霍波在发生故障的Mark II 计算机里找到了一只飞蛾，这只小虫被夹扁在继电器的触点里，影响了机器的运行，于是霍波把它小心的保存在工作笔记本里，并诙谐的把程序故障统称为”臭虫”(bug)。50年代计算机存储器非常昂贵，为了节省内存空间，霍波开始采用6位表示日期，即年，月，日各两位，这一习惯也被沿用下来，到2000年前居然变成了为害巨大的”千年虫”。

2.debug的方式特点

如何定位bug，常见bug的类型

• http错误状态码

  1.😡4XX错误😡
  🐷404 大家都知道是链接不对，找不到服务器的资源，但是造成404的原因至少有以下四种：
  （1）api接口url错误
  （2）后端没部署
  （3）nginx没有配置好代理或者前端本地没有配置好代理
  （4）post跟get用错，使用get方法调post请求也可能是报405，看服务器配置
  🐷401————未登录
🐷403————账号没有权限

  2.😡5XX错误😡
🐷500————服务器异常
  （1）接口没有错误服务器异常
  （2）接口不靠谱的时候可能是前端参数错误
  不管哪种都是要看服务器日志
  🐷502————网关错误，可能是服务器没跑起来也可能是超时
  🐷504————服务器超时，服务器网络不通或者超时时间设置太短
  3.😡200但是没有看到返回😡
  （1)可能是接收的文件，没能显示出来（正常时接到一堆乱码）
  （2）服务器挂了，超时

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

调试bug的方法

1.console.log()虽然简单粗暴，但是它是实用且简单的

console.log('调试信息，输出：', test)

2.debugger 代码复杂时打断点调试

• 在代码出现问题的地方打断点，一步一步地慢慢调试，找出错误

3.查阅官方文档。技术博客等方法

• 定位到代码问题，查阅相关的文档去解决问题 ，或者去社区求助。

总结

1. 耐心仔细，没有找不到的bug，只有不耐烦的人
2. 能问则问，一小时内找不到答案可以求助同事
3. 解决不了问题就解决提问题的人（😂😂不建议尝试）