今天，我们在刘申老师的带领下学习。本节课将围绕前端开发中所遇见的 BUG 出发，讲解作为一名合格的前端开发人员，你应该掌握哪些开发调试知识。
课程重点：
- Elements
- Console
- Source
- Performance
- Network
一.Bug与Debug
在开始之前，请您思考一下：Bug是怎样产生的呢？
对于这个问题，如下图所示：
接下来，我们将从以下四个方面讲解前端的Debug的特点：
1.多平台
- 浏览器、Hybrid、NodeJs、小程序、桌面应用等
2.多环境
- 本地开发环境、线上环境
3.多工具
- Chrome devTools、Charles、Spy-Debgger、Whistle、vConsole...
4.多技巧
- Console、BreakPoint、sourceMap、代理等
二.Chrome DevTools
Elements | Console | Source | Performance | Network
1.动态修改元素和样式（具体操作步骤如下图所示：）
2.Console（具体操作步骤如下图所示：）
3.Sorce Tab(具体操作步骤如下图所示：)
- 关于Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前JavaScript代码的调用栈
前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a’、‘b’等替换，整体变得不可阅读。
请您思考一下：压缩后的代码如何调试呢？
（可以参考下图：）
Source Map可以映射源码，那压缩后的代码带上 Source Map上线不就又不安全了吗？
（感兴趣的小伙伴可以在评论区留言！）
4.Network（具体操作步骤如下图所示：）
5.Application（具体操作步骤如下图所示：）
6.performance（具体操作步骤如下图所示：）
performance 运用示例
7.Lighthouse（具体操作步骤如下图所示：）
今天的课程就学到这里了，下次继续！！！
