Vue-devtools远程链接(iframe内vue项目)调试<独立运行程序>
devtools
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
项目地址:https://gitcode.com/gh_mirrors/de/devtools

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




vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:22 天前 )
79116147 - 1 年前
f0359002 - 1 年前
更多推荐
所有评论(0)