这是我参与「第五届青训营 」伴学笔记创作活动的第 14天
调试
Elements
- 当某个样式仅在某种条件下显示时，需要调试可以在浏览器调试模式下右键选中相关标签相应伪类，就可以保持伪类状态不变。
- 右键body可以选择截屏就能将网页截图，点击相应标签就能生成相应标签的截屏
- 点击computed可以过滤属性
Console
- console.log 如果第一个参数是格式字符串（使用了格式占位符），console.log方法将依次用后面的参数替换占位符，然后再进行输出。
console.log(' %s + %s = %s', 1, 1, 2)
// 1 + 1 = 2
console.log() 支持以下占位符，不同类型的数据必须使用对应的占位符。
%s 字符串 %d 整数
%i 整数%f 浮点数%o 对象的链接 %c CSS 格式字符串
-
console.warn warn方法输出信息时，在最前面加一个黄色三角，表示警告；
-
console.error error方法输出信息时，在最前面加一个红色的叉，表示出错。
-
console.info 是 console.log() 的别名，用法完全一样。只不过console.info() 会在输出信息的前面，加上一个蓝色图标。
-
console.debug 方法与 console.log() 类似，会在控制台输出调试信息。 但是，默认情况下，console.debug 输出的信息不会显示，只有在打开显示级别在 verbose 的情况下，才会显示。
debugger 语句
debugger语句主要用于除错，作用是设置断点。
Chrome 浏览器中，当代码运行到debugger语句时，就会暂停运行，自动打开脚本源码界面。
Sources
可以在下面三块中查看文件目录树，看源文件，查看数据断点跳过堆栈
为了不让别人发现自己代码写得很烂怎么办？
当然是压缩源码（也为了安全）让别人看不懂你的代码密密麻麻装作自己很厉害的样子（手动doge）。所以我们在调试的时候为了追溯到源码的错误断点，我们需要使用sourceMap将压缩后的代码与源码做映射。但是在上传时为了不让别人看到我们的源码所以删掉sourcemap文件再进行打包上传，此时又无法进行调试了，我们将sourceMap文件上传到例如监控平台，就又可以进行调试了。
NetWork
有一个小技巧，No throttling这里可以选择没有3G网来查看网络不好时的渲染情况！
