前言:

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

 

GitHub 加速计划 / de / devtools
55
5
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:22 天前 )
79116147 - 1 年前
f0359002 - 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐