这是我参与「第四届青训营 」笔记创作活动的第12天
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在卓上放上一只小黄鸭，然后详细的向鸭子解释每行代码，然后很块就将问题定位修复了 ——《程序员修炼之道》
bug
“bug原意本来为昆虫的意思,1947年9月9日,葛丽丝·霍普(Grace Hopper)发现了第一个电脑上的bug。当在Mark II计算机上工作时,整个团队都搞不清楚为什么电脑不能正常运作了。经过大家的深度挖掘,发现原来是一只飞蛾意外飞入了一台电脑内部而引起的故障。这个团队把错误解除了,并在日记本中记录下了这一事件。也因此,人们逐渐开始用“bug”来称呼计算机中的隐错。 —— 维基百科”
chrome DevTools
动态修改元素和样式（element）
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- computed下点击样式里的箭头可以跳转到styles面板中的css规则
可以使用以下方式强制激活伪类
- 选中具有伪类的元素，点击：hov
- dom树右键菜单，选中force state
console
1、console.log 用于输出普通信息
2、console.info 用于输出提示性信息
3、console.error用于输出错误信息
4、console.warn用于输出警示信息
5、console.dir(这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等
6、console.table：具象化的展示JSON和数组数据
Sorce Tab
从左到右分别是：
-
页面资源文件目录树
-
代码预览区域
-
debug工具栏
-
暂停
-
单步跳过
-
进入函数
-
跳出函数
-
单步执行
-
激活（关闭）所以断点
-
代码执行异常处
-
断点调试器
Break Point 与 Watch
-
在浏览器中打开需要调试的代码后，F12→sources→双击需要调试的文件→点击行号打断点
-
在需要验证的逻辑处打断点，再次刷新页面，常用以下快捷键调试程序：F8以断点为步长执行代码（注意，下一步也可能是当前断点处）；F10以“语句”为步长执行代码；
-
如果在调试过程中想观察某个变量的动态变化，选中该变量并“Add selected text to watches”，即可在右侧watch出监视该变量（也可以点“+”输入变量名添加）
Scope与Call Stack
展开scope可以查看作用域列表（包含闭包）
展开Call stack 可以查看当前JavaScript代码的调用栈
压缩后的代码如何调试
前端代码天生具有开源属性，出于安全考虑，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用’a‘，’b‘代替，整体变得不可阅读，那么我们如何去调试压缩后的js代码呢？
Sourcemap 本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。 Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题
简单说 Sourcemap 构建了处理前以及处理后的代码之间的一座桥梁，方便定位生产环境中出现 bug 的位置。因为现在的前端开发都是模块化、组件化的方式，在上线前对 js 和 css 文件进行合并压缩容易造成混淆。如果对这样的线上代码进行调试，肯定不切实际，sourceMap 的作用就是能够让浏览器的调试面版将生成后的代码映射到源码文件当中，开发者可以在源码文件中 debug，这样就会让程序员调试轻松、简单很多
