无线页面远程调试方式的演进探索

1.

2. 线远程调试演进探索式的

3. 录案演进

4. 1. 端内线调试的困境

5. 线

6. 主流般都需要基于 Debug 包

7. 主流 Eruda

8. 主流线 weinre 系调试案的问题案 weinre is WEb INspector REmote

9. 主流有限基于线络传输通道的远程调试架构纯前端可以实现基础能的远程调试

10. 主流动注 JS 脚本 spy-debugger

11. 调试我们需要怎样的线案？

12. 2. 线调试案的演进

13. 线建设案

14. 效果演示

15. 线 JS 的 CDP 模拟实现案

16. 基于注 JS 的 CDP 模拟实现案什么是 CDP { Chrome DevTools Protocol：JSON 类型的固定格式的数据封装协议，基于该协议能够实现 DevTools 与 Blink-based（Chrome/Chromium 等）浏览器内核的交互，达到检测、检查、调试和分析浏览器内核的能。 “id”:1, “method":"Network.enable", “params”: { “maxPostDataSize”: 65536 } }

17. 基于注 JS 的 CDP 模拟实现案 CDP 通信示例浏览器内核 DevTools {“id”:1, “method”:“Runtime.enable”} Request {“id”:2, “method”:“Debugger.enable”, “params”: {“maxScriptsCacheSize”: 1000000}} Response {“id”:1, “result”:{}} {“id”:2, “result”:{}} {“method”:"Network.loadingFinished","params": {"requestId":"8358.1","timestamp":1700061910}} Event

18. 基于注 JS 的 CDP 模拟实现案整体架构 PC 浏览器 APP DevTools Frontend WebView Page Panels CDP WS Server CDP Client CDP backend.js 注

19. 基于注脚本

20. 基于注 send listen disconnect

21. 基于注案

22. 基于注 ‣ 不持断点调试 ‣ Network 数据缺失 ‣ 法获取偏底层的 Memory 等数据 ‣ 法使 Lighthouse ‣ 。。。

23. 基于注 JS 的 CDP 模拟实现案插件机制 Inspected window Content scripts DevTools page Panels Chrome Extension Custom Extension

24. 基于注插件使 JS 的 CDP 模拟实现示例 DevTools page {“id”:1, “method”:“getEnv”} getEnv {“id”:1, “result”: {envInfo}} envInfo react-devtools-inline/ backend Native API content script react-devtools-inline/ frontend 案

25. 线案

26. 基于内核的标准调试案整体架构 PC 浏览器 APP Chrome DevTools Frontend UC U4 Page CDP Client Android Panels CDP CDP WS Server WebKit Web Inspector CDP Client Panels WIP WIP WebKit Page iOS

27. 基于内核的标准调试案 Android USB 调试原理 /json/list Unix Domain Socket Server CDP adb CDP Chrome DevTools CDP socket client

28. 基于内核的标准调试案 Android Chrome DevTools Frontend 标准内核标准内核增强内核 APP APP UC U4 get webview list 开启调试远程下载 WS Server webview list inspect webview A with ws inspector url inspect webview A with ws target url 动态切核增强内核 APP connect ws inspector url connect ws target url

29. 基于内核的标准调试 Android 示例案

30. 基于内核的标准调试案 WS Server iOS APP 连接本地代理的内核通道和 WS Server Remote Inspector Native Bridge WebKit 内核 inspector WKWebView Page 建与内核通信的通道，代理 Debugger 实例 WebKit 内核 Debugger 实例

31. 基于内核的标准调试 iOS 示例案

32. 基于内核的标准调试案容器接 PC 浏览器 APP Other Engine Weex CDP DevTools Frontend WS Server CDP Page WebView Page

33. 基于内核的标准调试案 WS Server Page 1 debugId sessionId 1 sessionId 1 DevTools 1 Page 2 sessionId 2 sessionId 2 DevTools 2 Page 3 sessionId 3 sessionId 3 DevTools 3 debugId WS Server /page/:debugId/:sessionId /devtools/:debugId/:sessionId

34. 线建设

35. 结合客户端的配套调试能建设实时志缓存管理开启线调试性能数据 … 客户端调试

36. 结合客户端的配套调试能建设志实时

37. 结合客户端的配套调试能建设缓存管理

38. 结合客户端的配套调试能建设性能数据

39. 3. 总结与展望

40. 总结

41. 展望

42. THANK YOU