前言:
比如我们的项目结构为:框架(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中未生效,则可以将其复制于父项目中进行增加(我这里是子项目单一增加不生效)