前端开发调试

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

1、Bug和Debug

1.1、Bug的产生

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

1.2、前端Debug的特点

1. 多平台
   浏览器、nodejs、小程序、桌面应用…

2. 多环境
   本地开发环境、线上环境…

3. 多工具
   chrome、devTools、Charles、Spy-Debugger、vConsole…

4. 多技巧
   Console、BreakPoint、sourceMap、代理…

2、Chrome DevTools

2.1、Chrome DevTools–Element工具栏

页面上右键–>检查工具，或者直接F12键显示出来。

动态修改元素和样式

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

伪类样式的修改：

元素处右键，点击Force state，再点击：hover，样式就出来了。

点击.cls前面的:hov，选择：hover，样式就出来了。

元素样式特别多时：

Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则。


关于截图：

选中元素，右键，capture node screenshot截图。

2.2、Chrome DevTools–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 样式占位符 在字符串之前添加样式，更加突出主题信息
  

2.3、Chrome DevTools–Sources面板

Sources面板组成:

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

由于Sources面板可以直接看到源代码，那么就引出了安全性的问题，一般我们打开网站时看到的一般是处理过的。有的是压缩混淆过的，替换了变量名并压缩成一行，这种可以点击{}按钮进行格式化，而有的直接看不见。

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

2.4、Chrome DevTools–Performance面板

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

2.5、Chrome DevTools–NetWork面板

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

2.6、Chrome DevTools–Application

Application组成：

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

3、移动端H5调试

3.1、真机调试

真机调试时，如果使用有线连接非常不方便，建议直接扫码。可以使用Fehelper插件（推荐）将网站生成二维码，在局域网内里可以用手机直接扫码查看网站。

3.2、使用代理工具调试

3.3、常用工具：

4、常用调试技巧

4.1、线上及时修改

4.2、利用代理解决开发阶段的跨域问题

4.3、启用本地source map

4.4、小黄鸭调试大法

“对鸭讲码”，帮助自己再次理清代码。

总结

这次的《前端必须知道的开发调试知识》一课属实受益匪浅，因为接触前端不久，用到这些方法不多，但是通过这次课程了解到许多的调试方法和技巧，以后会多多实践！Knowledge has no limit！

（附Chrome DevTools手册文档）Chrome DevTools