# 前提
琢磨了一下vuerouter中的devtools,感觉可以给我自己写的federation方案加上devtools的支持
# chrome devtool
先从chrome的devtools说起,毕竟vue devtools无非就是devtools的一个部分
chrome中的devtools,也就是f12跑出来的玩意儿,本质上只是个ui结构,和一个普通的前端界面没有区别(换言之,可以写一个作用在任何网址的插件,然后在contenttype里面往html里注入一个dom,就能实现近乎一样的效果,github仓库里那个frontend里的就是) 有frontend自然就有backend,一个提供服务,通知ui改变的角色,如果用过chrome去调试node或手机端不难意识到,chrome颇为喜欢使用ws去连接东西,devtools只需用websocket连接这个服务者,交换信息,就可以实现功能了,
这个服务者,在正常的时候,就在chrome浏览器内部,但有时也未必,比如小程序调试工具,devtools还是那个devtools,服务却是小程序提供的了,还有puppeteer,它同样是chrome内核来提供,但这个内核是它偷偷自带的。
好,既然分为backend和frontend,那么当然可以拆着用,比如,用chrome的backend,自己写frontend,可以定制devtools或者像puppeteer一样,没有ui但通过ws通知backend做事,反过来的话,就可以监视非浏览器体系的东西,比如小程序,或者跨端的东西
这个通知的过程基于cdp协议,它对一些东西做出了区分,比如操作是关于css,net还是dom?就按照协议去走
# vue devtool
缺
依赖一个遍历节点来获得/更新组件信息,但这个遍历似乎有点奇怪,不是从根出发,次数也有点奇怪,我再琢磨一下吧。