这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
这期真的干货满满
特点
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint、sourceMap、代理等
PC端调试
Elements
- 勾选类名、点击.cls、:hov换伪类
- 输入字符串动态加减
- computed下点击箭头可以定位到style里具体的css
Console
console.log、console.warn、console.error、console.debug、console.infoconsole.table：具象化的展示 JSON 和 数组数据console.dir:通过类似文件树的方式展示对象的属性- 占位符给日志添加样式，可以突出重要的信息：
- %s:字符串占位符，%o: 对象占位符，%c: 样式占位符，%d: 数字占位符
Sources
- 启动：关键字debugger或代码预览区域点行号，执行到断点处暂停执行
- Watch：点+添加对应变量监控，或暂停状态下鼠标hover代码变量可查看变量值
- Breakpoints：查看断点列表
- Scope：查看作用域列表，含闭包
- Call Stack：当前js代码的调用栈
- XHR/fetch Breakpoints：请求断点
- 压缩后代码：可以打开sourceMap映射源码，但里面存储了源文件和映射很占内存。所以sourceMap常只用于监控，把打包出来的js.map从压缩包中删除然后上传到监控平台,
webpack.prod.js中加devtool:'source-map'
Network
有可以选择cpu类型调慢网速
Application
点击左侧 Application 下的Stroage 面板中的 Clear Site Data可以清除网页的本地存储数据
Performance
录制五秒
- 概览面板：FPS:每秒顺数、CPU: 处理各个任务花费的时间、NET:各个请求花费时间
- 线程面板：
- Frames顺线程；
- Main主线程，负责执行Javascript解析HTML/Css,完成绘制；
- Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。
Lighthouse
有评分
- Largest Contentful Paint (LCP) : 最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。
- First Input Delay (FID) : 首次输入延迟测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。
- Cumulative Layout Shift (CLS) : 累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1.或更少
移动端
- 真机调试(USB)
- vconsole
- 代理工具(如charles、fiddler、spy-debugger、whistle)：电脑作为代理服务器，手机通过http代理连到电脑
Nodejs调试
node --inspect=8888 index.js运行，再在浏览器访问服务，点node图标打开或打开chrome://inspect/#devices- 在vscode调试
调试技巧
- Override
- 打开 Sources面板下的的Overrides
- 点击 Select folders for Overrides，选择一个本地的空文件夹目录。
- 允许授权
- 在 page 中修改代码，修改完成后 command +s 保存
- 打开 devTools ，点击右上角的三个小点-> More tools ->Changes，就能看到所有修改了
- 代理服务器，解决跨域
- 线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 SourceMap 文件。
- 使用Mock数据
- 右键选中要 mock 数据的接口，选save response保存文件到本地
- 本地打开保存的文件，编辑想mock 的数据并保存。
- 右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。
- 小黄鸭法！
