这是我参与「第四届青训营」笔记创作活动的第4天。
07 前端开发调试
前端开发Debug的特点：
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle...
- 多技巧：Console、BreakPoint、sourceMap、代理等
Chrome devTools
Elements
-
点击.cls开启动态修改元素的class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态查看类名生效效果
-
点击具体的样式值可以进行编辑，浏览器内容区域实时预览
-
激活伪类的方法：
- 选中具有伪类的元素点击：hov
- DOM树右键菜单，选择Force state
-
Computed下点击样式里的箭头可以跳转到styles面板中的css规则
Console
console.log('Hi')
console.warn('Warn')
console.error('Error')
console.debug('debug')
console.info('info')
//占位符：给日志添加样式，可以突出重要信息。%s 字符串占位符；%o对象占位符；%c样式占位符；%d数字占位符
console.log('%s %o,%c%s','hello',{name:'tom',age:18},'font-size:24px;color:red','Welcome to BD')
console.table(arr) //具象化地展示JSON和数组数据
console.dir(box1) //通过类似文件树的方式展示对象的属性
Source
-
source可以看到页面的HTML、CSS、JS等代码
-
在程序中加入debugger关键词可以设置断点，当程序运行到断点时会暂停运行
-
也可以在source中的代码里左侧行号处标记以添加断点
-
在source的代码中，将鼠标悬停在变量上可以查看变量的值。
-
也可以在source页面右侧的Watch栏手动添加要观测的变量
-
Breakpoints栏可以临时操控断点
-
展开Scope可以查看作用域列表（包含闭包）
-
展开Call Stack 可以查看当前js代码的调用栈
-
XHR Breakpoint 可以记录发生网络请求时断点的状态
-
DOM Breakpoints 可以查看当HTML中某一个元素发生变化时断点的状态
-
压缩后的代码如何调试？
使用Source Map 可以将压缩之后的代码与源码进行映射，而为了安全和节省体积，代码上线时是不带SourceMap的，SourceMap则被上传到监控平台
Network
监控浏览器向服务端请求的资源
- No throttling可以模拟弱网环境
- 可以点击具体某一项资源查看其相关信息
Application
存储相关
Performance
从上到下依次为：控制面板、概览面板、线程面板、统计面板
用于分析性能问题
页面卡顿 -> 查看FPS指标 -> 寻找性能瓶颈 -> 性能优化
LightHouse
衡量站点性能
核心Web指标：
- LCP：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
- FID：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- CLS：累计布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。
移动端H5调试
真机调试
VConsole
使用代理工具调试
- 常用代理工具：Charles、Spy-Debugger
NodeJs调试
Inspector Protocol + Chrome Devtool
- 执行命令 node --inspect=8888 index.js
- chrome浏览器访问服务
- 点击绿色node图标打开node调试面板
- 在node调试面板中使用断点调试
常用开发调试技巧
线上即时修改Overrides
- 打开Source面板下的Overrides
- 选择一个本地的空文件夹目录
- 允许授权
- 在page中修改代码，修改完成后Ctrl+S保存
- 打开devTools，点击右上角三点->More tools-> Changes,就能看到所有修改
利用代理解决开发阶段的跨域问题
启用本地SourceMap
线上不存在SourceMap时可以使用Map Local网络映射功能来访问本地的SourceMap文件
