这是我参与「第五届青训营」伴学笔记创作活动的第 9 天
一、本堂课重点内容：
- Elements
- Console
- Source
- Performance
- Network
二、详细知识点介绍：
BUG的产生
在开发的过程中，bug是非常容易产生的，它无处不在。因为有bug，所以我们需要Debug，Debug是一种调试工具，它是一个能够供程序员检查修改问题的工具。在前端中，Debug的特点有四点：多平台、多环境、多工具、多技巧。
多平台
在浏览器、Hybrid、NodeJs、小程序、桌面应用上都可以进行Debug.
多环境
支持本地开发环境、线上环境。
多工具
有很多的Debug工具，例如Chrome devTools、Charles、Spy-Debugger、Whistile、vConsole……
多技巧
Debug的技巧有很多,Console、BreakPoint、sourceMap、代理等
Chrome devTools
Chrome devTools是我们经常使用的一种调试方法。打开谷歌浏览器，右键选择菜单中的检查，或者在谷歌浏览器右上角列表中的更多工具里打开开发者工具，我们都可以打开Chrome devTools。
Chrome devTools由九个部分组成，分别是：Element元素面板、Network网络面板、Console控制台面、Sources源代码资源面板、Application应用面板、Performance性能面板、Memory内存面板、Security安全面板和LightHouse面板。
Element元素面板
在这个面板中，我们主要可以调试DOM元素和CSS样式。它支持动态修改元素的class，输入字符串可以动态给元素加类名，点击具体的样式可以进行编辑，并且浏览器内容区域将会实时预览
Console控制台面
在控制台里，我们可以使用console的一些相关指令来获取想要的信息，以此来判断代码的bug源于何处。console的相关指令有console.log、console.warn、console.error、console.debug、console.info、console.table，恰当地使用他们可以提高debug的效率。
Sources源代码资源面板
在此面板中可以设置断点、查看作用域列表、当前js代码的调用栈、使用Sources Map来映射源码。
