前端开发PC端调试 | 青训营

前端debug的特点

1. 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等等。
2. 多环境：本地开发环境、线上环境。
3. 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...
4. 多技巧：Console、Breakpoint、sourceMap、代理等。

Chrome devTools

Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。DevTools 是很多功能的集合，而在窗口顶部的工具栏是对这些功能的分组。最新的 Chrome 主要有 9 个功能组，下面介绍其中6个面板：

1. Elements : 可以动态修改元素样式。
2. Console：Console界面（控制台）可以打印代码里的日志。比如说 console.table 可以具象化的展示Jason和数组数据。不同的数据类型的值输出的颜色不一样。
3. Source: Sources 面板可以展示我们项目的源代码，主要用来调试页面中的 JavaScript。
4. Performance：可以查看页面加载过程中的详细信息。其中包括四个面板：

• 控制面板
• 概括面板：可以查看FPS（每秒帧数），CPU（处理各个任务花费的时间），NET（各个请求花费时间）。
• 线程面板：frames（帧数程），main（主线程，负责执行JavaScript，解析HTML/CSS，完成绘制），Raster（Raster线程，负责完成某个layer或者某些块的绘制）。
• 统计面板

5. Lighthouse：核心web指标。
6. Network：可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时。