前端必须知道的开发调试知识（一）

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

Bug和Debug

Bug的产生

Bug一词的原意是臭虫或虫子。第一代计算机是由许多庞大的真空管组成，并利用大量的电力来使真空管发光，引得一只小虫子Bug钻进了一支真空管内，导致整个计算机无法工作。研究人员费了半天时间，总算发现原因所在，把这只小虫子从真空管中取出后，计算机又恢复正常。后来，Bug这个名词就沿用下来

前端Debug的特点

• 多平台

  • 浏览器、nodejs、小程序、桌面应用…

• 多环境

  • 本地开发环境、线上环境…

• 多工具

  • chrome、devTools、Charles、Spy-Debugger、vConsole…

• 多技巧

  • Console、BreakPoint、sourceMap、代理…

Chrome DevTools

Element工具栏

• 两种调出方法

  • 页面上右键–>检查工具
  • 直接F12键显示出来

• 动态修改元素和样式

  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则

Console日志工具栏

• console日志工具栏是在写js代码时用到的最多的，可以在js代码中插入相应的语句，在devTools中查看相应的输入日志，在函数的不同阶段插入不同的console可以帮助我们观察到函数不同阶段变量的变化，帮助我们找出问题

• 常用

  • console.log： 日志打印 灰色是字符串 蓝色数字number
  • console.warn： 输出警告信息（黄色）
  • console.error： 输出错误信息（红色）
  • console.debug： 调试（蓝色）
  • console.info： info函数里放的是调试信息
  • console.table： 具象化展示json和数组数据
  • console.dir： 通过类似文件树的方式展示对象的属性
  • 占位符 ：给日志添加样式，可以突出重要的信息。%S 字符串占位符 ，%O 对象占位符， %C 样式占位符 ，%d:数字占位符

Sources tab

• 面板布局

• 通过Sources面板看到网页的源代码，在右边的工具栏中可以查看监听、断点、作用域、调用栈等等信息。进入断点时，鼠标移到变量上可以查看数值，有点像后端IDE调试代码的感觉。 另外我们可以点击行号前面新增断点，也可以直接在程序中写上debugger。可以通过鼠标移动监听变量也可以通过watch方法监听变量

• 由于Sources面板可以直接看到源代码，那么就引出了安全性的问题，一般我们打开网站时看到的一般是处理过的。

• 调试时为了保持客户端代码可读性和可调试性，可以使用Source Maps(源码映射)将源代码映射到已编译的代码。打包的时候生成Source map文件，上线前把文件上传到自己内网的错误监控平台，产生错误的时候就可以看到对应的映射

NetWork

• Network面板里面可以看到所有的网络请求信息，进行抓包操作，禁止从cache中加载资源，限制带宽模拟弱网环境等等。选中一项网络请求信息，可以查看该请求的详细信息，比如请求行、请求头、响应行、响应头和响应体等等。直观地看到数据包中的原始内容，从而排除是否是自己网页渲染出了bug

• 面板布局

Application

• 在Application面板里可以检查和修改Storage(存储)、Databases(数据库)和Caches(缓存)。 在storage中可以点击clear site data 清除该网站的数据

• 面板布局

Performance

• 对网站性能要求比较高的时候，可以在performance面板中查看每一帧。每一毫秒中执行了什么，汇总信息查看加载某一个模块花费了多少时间

• 面板布局

• 运用示例

Lighthouse