PC端调试
bug的存在无处不在，解决方法：debug
前端debug的特点：多平台、多环境、多工具、多技巧
1.DevTools
- Elements：显示元素和样式
该页面其他功能之一：右键body选择capture node screenshot截屏，
-
Console
可以打印出代码的日志
不同类型的值日志输出的颜色不一样比如数字是白色，字符串是紫色
console.table()方法用表格形式展示数据
console.time() 方法是作为计算器的起始方法。该方法一般用于测试程序执行的时长。
[console.timeEnd()](https://www.runoob.com/jsref/met-console-timeend.html) 方法为计算器的结束方法，并将执行时长显示在控制台。
- Sorce Tab
什么是断点调试？
断点是调试器设置源程序在执行过程中自动进入中断模式的一个标记。当程序运行到断点时，程序中断执行，进入调试状态。
XHR：所有或部分网路请求进入断点调试
DOM：某个元素发生变化后添加断点
js代码进过压缩后如何调试？ ——Source Map
为了保证安全，上线时将代码压缩再删除Source Map
-
Network:展示站点接收到的资源
可以模拟弱网环境：测试弱网情况下的网站性能
找到前后端接口，缩小问题范围
- Application：本地存储相关
- Performance：网页性能相关
正常情况下浏览器FPS为60左右，低于60可能发生了卡顿
页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码，示例网站：
[示例网站] https://googlechrome.github.io/devtools-samples/jank/
-
Lighthouse：性能相关
