佛山市禅城网站建设公司,网站改版准备,旺道seo系统,考试源码网站wordpress最近集团内部在自研小程序#xff0c;我负责小程序开发者工具的调试部分。经过一段时间的探索#xff0c;摸索出不少经过实际检验的可行手段。接下来将会用几篇文章总结一下思路。
文章的内容主要会分为以下几部分#xff1a;
如何建立逻辑层运行时容器#xff08;两种方…最近集团内部在自研小程序我负责小程序开发者工具的调试部分。经过一段时间的探索摸索出不少经过实际检验的可行手段。接下来将会用几篇文章总结一下思路。
文章的内容主要会分为以下几部分
如何建立逻辑层运行时容器两种方案利弊如何嵌入调试审查面板如何启动断点调试能力如何审查小程序DOM如何实现逻辑层与渲染层的通信如何实现渲染层与Chrome扩展的通信
先放几张图出来
小程序审查图 渲染层用的是Vue的能力所以审查也是基于Vue-devtools做的。
Vue-devtools通信图以及改造后的通信图 上面的图中有3块部分。
第一部分为Vue-devtools的加载过程。第二部分为Vue-devtools的通信关系图。第三部分为改造后适用于小程序DOM审查的通信关系图。
下图是渲染层与逻辑层的实现图 基于Chrome DevTools Protocol的适用于小程序开发者工具的多页面的调试信息通信图:
下图是小程序通信关系全图
好前提就铺垫到这里。后面分文章详细说明。
