这是我参与「第五届青训营」伴学笔记创作活动的第9天。

一、课程重点内容

1. 主流跨端技术方案
2. 小程序开发与实践
3. PC端调试
4. 移动端调试
5. 前端调试常用工具

二、笔记

1.跨端

1. 研发效率高：学习成本低，多端一致性高
2. 用户体验好：稳定性高，性能体验好
3. 动态化：支持动态化下发

跨端技术方案

Hybrid方案：基于WebView渲染，把一部分系统能力开放给JS
原生渲染方案：用JS开发，用原生组件渲染 React Native开发跨平台应用
自渲染方案：用Skia重新实现，不依赖原生组件 Flutter
小程序方案：用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面

小程序跨端实践

性能优化：用户，提升转化率，提升用户体验
LCP尽可能提前
性能分析工具

2.PC端调试：Chrome DevTool

1. Elements Styles修改元素样式；Computed搜索类名
2. Console 日志颜色可以区分类型，console.log()
3. Sources 展示源代码，加断点，watch可以看变量的值
   调试压缩和混淆后的代码：SourceMap，放到错误监控平台
4. Network
5. Performance和网页性能相关，录制 出现卡顿，FPS指标，录制显示任务执行时间，offsetTop会重排重新渲染 变量pos不会
6. Lighthouse 性能分析
   LCP Largest Contentful Paint加载性能，应在首次加载后的2.5秒内发生
   FID First Input Delay 交互性，应100ms或更短
   CLS Cumulative Layout Shift 视觉稳定性，应0.1或更少
   会提供一些建议和优化手段

3.移动端调试

真机调试 用数据线/扫码在手机端访问页面，在电脑看情况
VConsole 和DevTool类似
代理工具调试 比如Charles

4.Nodejs调试

结合浏览器：console，加断点等
VS Code调试

5.常用工具

Overrides 更新代码，Changes查看更新
跨域问题 用代理
启用本地sourceMap Map Local
用代理工具Mock数据 save response到本地，编辑数据，Map Local