前端开发调试

  • 前端必须知道的开发调试知识
  • 1、Bug和Debug
  • 1.1、Bug的产生
  • 1.2、前端Debug的特点
  • 2、Chrome DevTools
  • 2.1、Chrome DevTools--Element工具栏
  • 2.2、Chrome DevTools--Console日志工具栏
  • 2.3、Chrome DevTools--Sources面板
  • 2.4、Chrome DevTools--Performance面板
  • 2.5、Chrome DevTools--NetWork面板
  • 2.6、Chrome DevTools--Application
  • 3、移动端H5调试
  • 3.1、真机调试
  • 3.2、使用代理工具调试
  • 3.3、常用工具：
  • 4、常用调试技巧
  • 4.1、线上及时修改
  • 4.2、利用代理解决开发阶段的跨域问题
  • 4.3、启用本地source map
  • 4.4、小黄鸭调试大法
  • 总结


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

1、Bug和Debug

1.1、Bug的产生

choreme调试前端代码 看不到内容 前端开发调试_choreme调试前端代码 看不到内容


*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，样式就出来了。

choreme调试前端代码 看不到内容 前端开发调试_前端_02


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

choreme调试前端代码 看不到内容 前端开发调试_javascript_03


元素样式特别多时：Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则。

choreme调试前端代码 看不到内容 前端开发调试_debug_04


choreme调试前端代码 看不到内容 前端开发调试_javascript_05


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

choreme调试前端代码 看不到内容 前端开发调试_前端_06

2.2、Chrome DevTools–Console日志工具栏

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

choreme调试前端代码 看不到内容 前端开发调试_debug_07

  • 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面板组成:

choreme调试前端代码 看不到内容 前端开发调试_choreme调试前端代码 看不到内容_08


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

choreme调试前端代码 看不到内容 前端开发调试_css_09


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

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

2.4、Chrome DevTools–Performance面板

Performance面板组成：

choreme调试前端代码 看不到内容 前端开发调试_前端_10


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

2.5、Chrome DevTools–NetWork面板

NetWork面板组成：

choreme调试前端代码 看不到内容 前端开发调试_前端_11


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

2.6、Chrome DevTools–Application

Application组成：

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

choreme调试前端代码 看不到内容 前端开发调试_css_12

3、移动端H5调试

3.1、真机调试

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

choreme调试前端代码 看不到内容 前端开发调试_debug_13

3.2、使用代理工具调试

choreme调试前端代码 看不到内容 前端开发调试_debug_14

3.3、常用工具：

choreme调试前端代码 看不到内容 前端开发调试_javascript_15

4、常用调试技巧

4.1、线上及时修改

choreme调试前端代码 看不到内容 前端开发调试_debug_16

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

choreme调试前端代码 看不到内容 前端开发调试_debug_17

4.3、启用本地source map

choreme调试前端代码 看不到内容 前端开发调试_debug_18

4.4、小黄鸭调试大法

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

choreme调试前端代码 看不到内容 前端开发调试_choreme调试前端代码 看不到内容_19

总结

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

（附Chrome DevTools手册文档）Chrome DevTools