微信小程序真机调试
如果无法正常显示，请先停止浏览器的去广告插件。
1. 微信小程序
真机调试原理剖析
曾煌尧 微信小程序中心 前端开发工程师
2. 个人简介
•
•
•
2020年硕士毕业加入微信小程序团队
GitHub: https://github.com/Molunerfinn
主要负责: 微信开发者工具、微信开发生态建设
微信小程序中心 前端开发工程师
曾煌尧
3. 1. 背景
目录
4. 01
背景
5. 背景
小程序运行架构
6. 背景
微信开发者工具运行架构
7. 背景
微信开发者工具调试架构
8. 背景
真机和工具运行差异
≈90%
9. 背景
真机和工具运行差异
10. 背景
真机和工具运行差异
以真机表现为准
11. 如何调试真机上的小程序？
12. 背景
真机调试预想模型
渲染层
逻辑层
DevTools
Native
真机
微信开发者工具
13. 背景
真机调试预想模型
JsCore
渲染层
逻辑层
无法调试
DevTools
Native
真机（iOS）
微信开发者工具
14. 无法调试 JsCore，怎么办？
15. 背景
真机调试预想模型
渲染层
逻辑层
DevTools
Native
真机
微信开发者工具
16. 背景
真机调试1.0预想模型
渲染层
逻辑层
Native DevTools
真机 微信开发者工具
17. 02
真机调试1.0
18. 真机调试1.0
连接真机和工具
渲染层
逻辑层
Native DevTools
真机 微信开发者工具
19. 真机调试1.0
连接真机和工具
渲染层
逻辑层
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
20. 如何运行小程序？
21. 真机调试1.0
小程序 API 类型
22. 真机调试1.0
异步 API 调用过程
异步 API
异步 API 调用
渲染层
逻辑层
调用结果
调用结果
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
23. 真机调试1.0
异步 API 调用过程
异步 API
异步 API 调用
渲染层
逻辑层
调用结果
调用结果
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
24. 真机调试1.0
同步 API 调用过程
同步 API
同步 API 调用
渲染层
逻辑层
调用结果
调用结果
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
25. 如何实现同步 API 调用？
26. 同步的 XHR 请求
27. 真机调试1.0
同步 API 调用过程
同步 API
同步 API 调用
同步
XHR
渲染层
调用结果
逻辑层
调用结果
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
28. 真机调试1.0
同步 API 调用过程
同步 API
同步 API 调用
同步
XHR
渲染层
调用结果
逻辑层
调用结果
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
29. 真机调试1.0
如何调试渲染层
如何调试？
渲染层
逻辑层
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
30. 真机调试1.0
如何调试 WXML
31. 真机调试1.0
如何调试 WXML
渲染层
小程序基础库
渲染层的小程序基础库支持识别特定的 Chrome DevTools Protocol
用于处理 WXML 相关调试信息
Native
真机
32. 真机调试1.0
调试渲染层
CDP
CDP
渲染层
逻辑层
后台服务器
Native
真机
*注：CDP – Chrome DevTools Protocol
CDP
CDP
传输层
DevTools
微信开发者工具
33. 真机调试1.0
运行效果
34. 真机调试1.0
运行效果
35. 真机调试1.0
优点
36. 真机调试1.0
优点
鉴权
渲染层
逻辑层
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
37. 真机调试1.0
优点
WIFI\4G\...
渲染层
逻辑层
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
38. 真机调试1.0有没有缺点？
39. 真机调试1.0
缺点
渲染层
Canvas
逻辑层
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
40. 真机调试1.0
缺点
渲染层
逻辑层
后台服务器
Native
真机
10k/s
10k/s
传输层
DevTools
微信开发者工具
41. 真机调试能不能更真更快
42. 03
真机调试2.0
43. 真机调试1.0
模型
渲染层
逻辑层
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
44. 真机调试1.0
问题的本质
问题的本质
渲染层
逻辑层
后台服务器
Native
真机
DevTools
传输层
微信开发者工具
45. 真机调试2.0
预想的模型
渲染层
逻辑层
后台服务器 DevTools
传输层 微信开发者工具
Native
真机
46. 真机调试2.0
遇到的问题
JsCore
渲染层
逻辑层
无法调试
DevTools
Native
真机（iOS）
微信开发者工具
47. 能否实现一个 JsCore 调试器
48. 真机调试2.0
调试器基本原理
1. 调试器动态插入 INT3 指令
2. 执行到 INT3 时触发软中断，控制权交由调试器
编译型语言
49. 真机调试2.0
调试器基本原理
1. 解释器执行代码检查当前语句是否命中断点
2. 命中将线程挂起，控制权交给调试器线程
解释型语言
50. 真机调试2.0
调试器基本原理
1. JsCore 没有对开发者暴露调试接口
2. 基于某些原因我们无法修改 JsCore 代码
解释型语言
51. 真机调试2.0
调试器基本原理
1. 如果我们能够模拟插入断点
2. 如果我们能够挂起当前线程
解释型语言
52. 真机调试2.0
调试器基本原理
1. 如果我们能够模拟插入断点 – 代码编译阶段插入调试代码
2. 如果我们能够挂起当前线程 – 客户端提供接口支持挂起线程
解释型语言
53. 真机调试2.0
iOS代码包的处理
54. 真机调试2.0
基础库实现线程挂起等调试逻辑
小程序基础库
JsCore
渲染层
逻辑层
DevTools
Native
真机（iOS）
微信开发者工具
55. 真机调试2.0
连接调试器
小程序基础库
JsCore
渲染层
逻辑层
CDP
DevTools
Native
真机（iOS）
微信开发者工具
56. 真机调试2.0
模型
CDP
渲染层
CDP
逻辑层
DevTools
后台服务器
Native
真机
CDP
CDP
传输层
微信开发者工具
57. 真机调试2.0
简化模型
CDP
渲染层
CDP
逻辑层
DevTools
后台服务器
Native
V8 like
CDP
CDP
传输层
微信开发者工具
58. 真机调试2.0
实现效果
59. 真机上除了调试，我们还关心什么
60. 04
真机性能分析工具
61. 真机性能分析工具
背景
1. 想要获取内存占用信息
2. 想要获取 CPU 执行情况
微信小游戏
62. 真机性能分析工具
背景
性能数据
微信小游戏
63. 真机性能分析工具
入口
64. 真机性能分析工具
效果图
录制真机的 Heap Snapshot
65. 真机性能分析工具
效果图
录制真机的 CPU Profiler
66. 真机性能分析工具
效果图
录制 PerfDog 性能数据
67. 05
其他调试能力简介
68. 其他调试能力简介
局部编译
入口：「编译模式」-「添加编译模式」-「局部编译」
1. 更少的页面、文件编译
2. 更快的预览、真机调试速度
局部编译菜单
69. 其他调试能力简介
热重载
入口：「模拟器工具栏」-「热重载」
1. 修改代码更快看到效果
2. 不重新reload模拟器
热重载菜单
70. 其他调试能力简介
代码依赖分析
入口：「编辑器工具栏」-「代码依赖分析」
1. 查看代码包每个文件大小
2. 查看代码包内代码依赖情况
代码依赖分析
71. 其他调试能力简介
自动化测试
基于录制回放的自动化测试
入口：「工具栏」-「工具」-「自动化测试」
1. 测试脚本录制生成
2. 自动化测试保证代码质量
72. 建议与反馈
微信开放社区
73. 感谢倾听
大会官网