Vue-devtools远程链接(iframe内vue项目)调试＜独立运行程序＞

前言：

比如我们的项目结构为：框架(vue项目) - 嵌套(iframe)加载页面(其他vue项目)
这种场景下，我们在整体运行调试嵌套的vue项目时，chrome控制台的devtools调试工具就无法满足常规需求，我们可以使用远程链接的模式进行处理

配置浏览器插件

需要确保浏览器器已经安装了vue-devtools调试工具

安装工具

#优先全局进行该工具的安装
npm install -g @vue/devtools

#在项目中进行安装
npm install @vue/devtools --save-dev

调用工具

控制台终端输入如下命令，即会在电脑中出现devtools的调试窗口(如下图2)

项目引入

将上图2中框选的内容进行复制，粘贴于子项目中的/public/index.html中的head中以后，运行项目，即可看到子项目的dom节点，后续可按照常规的deltools调试方法进行调试处理

如果仅增加子项目的head中未生效，则可以将其复制于父项目中进行增加（我这里是子项目单一增加不生效）