vue调试工具vue-devtools的安装全过程
先导
vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。
帮助我们快速的调试开发vue应用。
第一步
我们可以先从github上找到vue-devtools的项目，下载到本地。下载vue-devtools链接。
克隆方法：git clone https://github.com/vuejs/vue-devtools.git
第二步
解压下载好的文件，进入到vue-devtools目录，安装项目所需要的依赖包。
安装方法：npm install 或者 cnpm install （注：cnpm命令是国内的镜像，速度会快一些）
第三步
编译项目文件。
编译方法：npm run build
第四步
修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。
persistent参数改为true，访问协议是否包含：1.http://*/*; 2.https://*/*; 3.file:///*;这三种情况
第五步
添加至浏览器：
添加方法：在chrome浏览器输入地址：“chrome://extensions/”进入扩展程序页面，然后点击“加载已解压的扩展程序...”按钮；选择vue-devtools>shells目录下的Chrome文件夹；还需允许文件地址是否访问。
如果看不到“加载已解压的扩展程序...”按钮，先勾选“开发者模式”。
如下图：
第六步
使用：
打开我们的vue应用，打开调试，点击vue扩展图标，就可以使用了。
如下图：
注：如果点击vue扩展图标还是提示：
Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以检查下你是否使用的是压缩版本的vue.min.js，使用vue.min.js默认为生产环境的，需要改为vue.js.结束。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给大家整理了一篇关于Vue首屏性能优化组件知识点总结，有需要的朋友们可以跟着学习下。2021-11-11
这篇文章主要介绍了详解vue-router 命名路由和命名视图,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分2022-08-08
在vue移动端项目中经常遇到这样的需求,对一些上传的附件可以点击之后在线预览,所以下面这篇文章主要给大家介绍了关于vue3中各种类型文件进行预览功能的相关资料,需要的朋友可以参考下2021-09-09
有不少的前端需求都需要使用到富文本编辑器,所以这篇文章主要来和大家介绍一下如何在Vue3项目中使用富文本编辑器,感兴趣的可以了解下2024-04-04
Axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,下面这篇文章主要给大家介绍了关于vue中使用axios最详细教程的相关资料,需要的朋友可以参考下2022-08-08
vue中input标签上传本地文件或图片后获取完整路径的解决方法
本文给大家介绍vue中input标签上传本地文件或图片后获取完整路径，如E:\medicineOfCH\stageImage\xxx.jpg，本文给大家分享完美解决方案，感兴趣的朋友跟随小编一起看看吧2023-04-04
本篇文章主要介绍了Vue键盘事件用法总结，详细的介绍了各种键盘事件的用法，有兴趣的可以了解一下2017-04-04
在Vue3中,通过inject接收到的数据是否可以直接修改,取决于provide提供的值的类型和响应式处理方式,本文给大家介绍Vue3中provide和inject数据修改规则,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要为大家详细介绍了vue.js初学入门教程第二篇,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论