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

bug的由来

Bug一词的原意是臭虫或虫子。第一代计算机是由许多庞大的真空管组成，并利用大量的电力来使真空管发光。引得一只小虫子Bug钻进了一支真空管内，导致整个计算机无法工作。研究人员费了半天时间，总算发现原因所在，把这只小虫子从真空管中取出后，计算机又恢复正常。后来，Bug这个名词就沿用下来。 而前端的bug或者说调试主要来源于： 1.多平台 2.多环境 3.多工具 4.多技巧

具体场景调试的应用

在chrome浏览器调试

当我们在调试一些hover或focus这些动态的样式时，可以在控制台中右键元素，在force state一栏中选择我们想要调试的样式，这样就可以调节动态的样式。

当我们调试压缩混淆之后的代码可以用webpack中的工具source-map

在项目中的配置好webpack的source-map，在我们打包好的并且运行起来的浏览器中看到控制台报错，点后面报错的具体地方，会直接跳转报错的哪一行，这里其实是运用了，打包之后的代码和源码的一个映射的道理。方便我们快速找到报错的位置，进行调试。

那么我们项目上线的时候配置source-map不是方便别人看源码了吗

现实中我们打包好项目之后，并不会上传source-map，而将source-map相关的文件上传到监控平台方便后期项目的查错和维护。

移动端的调试

一般情况会将手机用数据线和电脑直连，再让手机去访问界面，然后在电脑上调试。而大多数用的都是二维码或云真机进行调试。

移动端工具调试

VConsole，在测试时，手机界面会出现一个小图标vConsole，点击即可打开类似浏览器的页面。

以上就是今天学的内容啦。