这是我参与「第五届青训营」伴学笔记创作活动的第 12 天，今天学习了前端开发调试的相关知识，包括 PC 端调试和移动端调试。
Debug
前端开发调试的目的就是发现并且解决 bug，也就是 debug。
前端 debug 包括很多平台，比如浏览器、Hybird、Node.js、小程序、桌面应用等。同一平台也有各种各样的调试工具，比如 Chorme DevTools 等。
前端 debug 的环境一般可以分为本地开发环境和线上部署环境。
Chorme DevTools
Chorme DevTools 是前端 debug 中用的最多的工具。Chorme DevTools 提供了丰富的调试功能。
元素 (Elements)
在 Chorme DevTools 元素 (Elements) 中，可以对网页中元素及其样式进行修改，而且可以立即看到结果。
在 Chorme 或者 Chorme 内核的浏览器中，对页面中的元素单击右键，选择 “检查元素” 就可以打开 Chorme DevTools 并且查看当前元素的 HTML 代码、CSS 样式等。或者可以按 F12 打开 Chorme DevTools ，然后使用 Chorme DevTools 左上角的 “选择元素” 按钮就可以在页面中选择元素进行查看。
对于选中的元素，可以直接编辑 HTML 代码修改元素的内容，也可以在样式中点击 .cls 动态修改元素的 class，还可以在具体的 CSS 代码中修改样式并且实时预览。可以使用样式菜单中的 :hov 或者 DOM 右键菜单的 Force Stare 为元素添加强制伪类。
控制台 (Console)
在 Chorme DevTools 控制台 (Console) 中，可以输入并运行 JavaScript 代码，或者查看控制台输出。
在 JavaScript 代码中使用 console 命令可以在控制台输出内容。
console.log在控制台输出日志console.warn在控制台输出警告console.error在控制台输出错误console.debug在控制台输出调试信息console.info在控制台输出信息console.table在控制台使用表格的形式输出对象或数组console.dir在控制台使用文件树的形式输出对象
可以使用占位符为 console 命令指定样式等。
源代码 (Sources)
在 Chorme DevTools 源代码 (Sources) 中，可以查看网页的资源和网页的源代码，对于 JavaScript 可以进行 Debug 操作，例如暂停、单步执行、断点等。
在 JavaScript 代码中使用 debugger; 命令在代码中添加断点。可以在在 Chorme DevTools “源代码” 中的 “断点” (Breakpoints) 中查看代码中存在的断点或者设置的断点。
在 “监视” (Watch) 中可以对变量进行监视。
在 “作用域” (Scope) 中可以查看变量的作用域。
在 “调用堆栈” (Call Stack) 中可以查看当前代码的调用堆栈。
网络 (NetWork)
在 Chorme DevTools 网络 (NetWork) 中，可以查看网页请求等信息。
应用程序 (Application)
在 Chorme DevTools 网络 (NetWork) 中，可以查看应用程序的本地存储等信息。
性能 (Performance)
在 Chorme DevTools 性能 (Performance) 中，可以查看网页的性能，比如帧率、CPU 资源利用率等。
Lighthouse
在 Chorme DevTools Lighthouse 中，可以测试网页的核心 Web 指标。
