这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

本堂课重点内容

本堂课重点讲述了前端开发在PC端和移动端的调试。

前端开发调试之PC端

前端Debug特点：多平台、多环境、多工具、多技巧。

是浏览器自带的调试工具，右键鼠标——选择检查，DevTools每个板块含义及功能：

查看打印的调式日志信息
可以给日志添加样式

console.log('%s %o, %c%s','hello',{name:'tome',age :18} ,'font-size: 24px; color: red','Welcome to bytedance!');

%s - 字符串占位符；%o - 对象占位符；%c - 样式占位符；%d - 数字占位符
日志等级
- console.log
- console.warn
- console.error
- console.debug
- console.info
输出的不同类型的值颜色是不一样的，比如字符串是默认颜色，数字是蓝色
console.table 具象化的表格形式展示 JSON 和数组数据
console.dir 通过类似文件树的方式展示对象的属性，可以在查看DOM元素属性的时候使用

在Page可以查看源代码
使用断点调试方法：
- 在需要断点调试的地方加上一行代码：debugger;
- 在Source界面直接选中想要断点调试的代码行
- 观测变量的值：在代码中鼠标选中想要观测的变量，或者在右侧使用Watch查找变量
区域4：断点调试器
- Scope 查看作用域列表（包含闭包）
- Call stack 查看当前JS代码的调用栈调用栈
- XHR/fetch Breakpoints 所有请求的断点
- DOM Breakpoints 当html元素变化的时候，可以给它添加断点
压缩后的代码如何调试
- 使用source Map，把调试的地方与源码映射，见www.murzwin.com/base64vlq.h…
  - 在webpack.prod.js开启source-map
```
module.exports = {
    ...
    devtool: 'source-map',
    ...
}
```
  - bundle.js.map
  - 思考：既然 Source Map可以映射源码那压缩后的代码带上Source Map上线不就又不安全了吗?
    - Source Map的常用场景是监控，在项目上线时一般是不上线Source Map的，一是为了安全，二是减少代码体积；在项目打包的时候会带上Source Map去bundle，产物里面是有Source Map的，在上线之前将Source Map上传到另一个平台，如监控平台，上传后就把Source Map文件删除，再上线不带Source Map文件的项目，这样别人看到的代码就是打包混淆后的。

展示网页性能相关信息
解决性能思路：页面卡顿 => 查看FPS指标 => 寻找性能瓶颈 => 优化代码
查看FPS指标：Frames 每一帧的渲染情况
- fps低于60就说明有点卡了（丢帧）
- 点击到Main部分，点击实心圆点进行重新录制，就能看到有一些红色小三角，点击去查看
Performance运用实例：googlechrome.github.io/devtools-sa…