工程&研发 - 4 - 逆葵 - 无线页面远程调试方式的演进探索.pdf

1、线远程调试式的演进探索 殷献勇（逆葵）淘天集团-终端平台录1.端内线调试的困境 2.线调试案演进 3.总结与展望1.端内线调试的困境线在真机调试中存在的痛点前端真机排查效率低 真机与 PC 浏览器模拟器差异较，真机中线调试成本前端真机调试体验差 前端常的调试具只能在 Debug 包中使，Debug 包体验较差前端法感知客户端运状况 客户端类似盒，前端法获取其运状况、后台进程等主流线调试案的问题-步骤繁琐-依赖 Debug 包出于安全因素考虑，上述操作般都需要基于 Debug 包USB 调试-法跨地远程调试主流线调试案的问题功能相对简陋 移动端操作不便 侵开发框架 法调试产环境vConsole/

2、Eruda内调试窗vConsoleEruda主流线调试案的问题weinre 系案weinreis WEbINspectorREmote主流线调试案的问题weinre 系案需要户注 JS 脚本 产环境不可 纯前端实现，能有限缺点基于线络传输通道的远程调试架构 纯前端可以实现基础能的远程调试启发主流线调试案的问题weinreChiispy-debuggerWebKit Web Inspector+WIP=Chrome DevTools+CDP动插 JS 脚本=拦截 HTML 请求后动注 JS 脚本weinre 系案JS 局限性我们需要怎样的线调试案？2.线调试案的演进线调试案的演进1.基于注 JS

3、 的 CDP 模拟实现案 2.基于内核的标准调试案 3.结合客户端的配套调试能建设效果演示线调试案的演进基于注 JS 的 CDP 模拟实现案基于注 JS 的 CDP 模拟实现案什么是 CDPChrome DevTools Protocol：JSON 类型的固定格式的数据封装协议，基于该协议能够实现 DevTools 与 Blink-based（Chrome/Chromium 等）浏览器内核的交互，达到检测、检查、调试和分析浏览器内核的能。“id”:1,“method:Network.enable,“params”:“maxPostDataSize”:65536 CDP 通信示例DevTools

4、浏览器内核“id”:1,“method”:“Runtime.enable”“id”:2,“method”:“Debugger.enable”,“params”:“maxScriptsCacheSize”:1000000“id”:1,“result”:“id”:2,“result”:“method”:Network.loadingFinished,params:requestId:8358.1,timestamp:1700061910RequestResponseEvent基于注 JS 的 CDP 模拟实现案基于注 JS 的 CDP 模拟实现案WebViewPagebackend.jsAPP注W

5、S ServerCDPCDPDevTools FrontendPanelsCDP ClientPC 浏览器整体架构基于注 JS 的 CDP 模拟实现案APPWeb 容器Native API维码WebView 扫码backend.js 开启调试模式 注脚本backend.js 注机制基于注 JS 的 CDP 模拟实现案backend.js 架构DevDOMRuntimeDebuggerNetworkPageCSSOverlayWS Client标准 CDP 实现定义 CDP 实现connectsendlistendisconnect基于注 JS 的 CDP 模拟实现案DevTools Front

6、end案 基于开源 Chrome DevTools Frontend 重新部署特点 复 DevTools 能，需重复建设，可快速跟进社区演进iOS/Android 双端统所有已打开的 webview 览余，且可调试进后台的基于注 JS 的 CDP 模拟实现案总结持 Release 包 极简的使式 基于 WIFI 通道，可跨地远程调试 双端统的 DevTools 体验优点不持断点调试 Network 数据缺失 法获取偏底层的 Memory 等数据 法使 Lighthouse。缺点基于注 JS 的 CDP 模拟实现案插件机制Chrome ExtensionC