前端必须知道的开发调试知识 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天

Bug的产生

前端Debug的特点

• 多平台

浏览器、Hybrid、NodeJs、小程序、桌面应用等

• 多环境

本地开发环境、线上环境

• 多工具

Chrome devTools、Charles

• 多技巧

Console、BreakPoint

Chrome DevTools

1、动态修改元素和样式

Element-->Styles-->动态勾选、修改

伪类样式-->强制为某个状态再修改

2、Console界面

打印活动日志，有warn、error、debug等效果

展示各种数据，同时可以区分不同类型值，字符串灰色，数字蓝色...

3、Sorce Tab

展示源代码

• 页面资源文件目录树

• 代码预览区域

• Debug工具栏

• 断点调试器

  1）加上Debugger

  2）source源代码点断点

  调试期间鼠标移入查看值、右侧调试界面Watch也显示变量值

  Scope：展开可查看作用域列表

  Call Stack执行栈

• 压缩后代码的调试

  1）webpack

  2）Source Map

  mappings字段存储了源文件和Source Map的映射，监控平台上传源码，出错时将错误定位到有源码，再映射到乱码文件

  关闭devtool:'source-map'

4、NetWork

• 左侧：网页运行时请求的站点资源
• 顶部：筛选左侧资源，all-全部，Fetch/-接口请求， Js，CSS...
• 底部：请求数量和耗时
• 模拟弱网环境
• 错误定位:Preview看返回结果

5、Application

浏览器存储相关

修改存储数据、清除缓存

6、performance

性能相关

区域1:控制面板

区域2:概览面板

• FPS:每秒帧数
• CPU:处理各个任务花费的时间
• NET:各个请求花费时间

区域3:线程面板

• Frame:帧线程
• Main:主线程，负责执行Javascript,解析HTML、CSS，完成绘制
• Raster:负责完成某个layer或者某些块的绘制

区域4:统计面板

解决性能问题

页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码

7、Lighthouse

核心Web指标

• LCP:最大内容绘制，测量加载性能。为了提供容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5秒内发生
• FID:首次输入延迟，测最交互性。为了提供良好的用户体验，页面的 FID 应为100毫秒或更短
• CLS：累积布局偏移,测量视觉稳定性。为了提供良好的用 户体验，页面的 CLS 应保持在 0.1或更少

移动端H5调试

真机调试

VConsole

日志、网络、节点、存储、手动执行JS命令行、自定义插件

代理工具调试

电脑作为代理服务器，手机通过HTTP代理连接到电脑，手机上的请求都经过代理服务器

常用工具:Charles、Fiddler

官方使用

• 执行命令node --inspect=8888 index.js
• chrome浏览器访问服务
• 点击绿色node图标打开node调试面板
• 再node调试面板中使用断点调试