如何安装vue.js devtools？-Vue.js-PHP中文网

首页

web前端

Vue.js

如何安装vue.js devtools？

青灯夜游

Nov 24, 2020 am 10:58 AM

devtoolsvue.js

安装方法：1、下载zip安装包，并解压到指定文件夹中；2、进入Vue-devtools目录下，输入“yarn install”和“yarn run build”进行安装；3、配置manifest.json文件；4、手动扩展chrome插件。

如何安装vue.js devtools？

本教程操作环境：windows7系统、Vue2.9.6版，该方法适用于所有品牌电脑。

vue devtools简介

vue devtools是一款基于chrome浏览器的用于调试Vue.js应用程序的插件，可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。

由于vue是数据驱动的，所以这就存在在开发调试中查看DOM结构并不能解析出什么，通过该插件，用户可以很轻松的对数据结构进行解析和调试，能够在侧边栏窗格中的页面中检查代码并进行调试，可以方便查看state、mutaitons、action等信息，还可记录路由的变化，以及路由相关信息等等，可谓是前端开发必备工具！

安装Vue-Devtools

1、进入Vue官网https://cn.vuejs.org/，在生态系统下点击Devtools

在这里插入图片描述

2、页面跳转到GitHub，点击下载zip包

在这里插入图片描述

3、下载完毕后解压到文件夹，我这里是解压到自己创建的文件夹

在这里插入图片描述

4、然后进入到Vue-devtools-dev目录下，按住shift键，右键打开powershell窗口

在这里插入图片描述

5、输入yarn install,开始安装，我这里已经安装过了，就不贴图了

6、再接下来输入yarn run build，等待安装后，出现如下页面即安装成功

在这里插入图片描述

7、打开文件夹，进入到\vue-devtools-dev\packages\shell-chrome目录下，打开manifest.json文件，修改

“persistent”: false 为 “persistent”: true 在这里插入图片描述

8、打开Google Chrome，进入扩展程序，打开开发者模式，点击加载已解压的扩展程序，选择\vue-devtools-dev\packages\目录下的shell-chrome文件夹

在这里插入图片描述

9、安装完成

在这里插入图片描述

使用 Vue-devtools调试

1、在浏览器打开调试项目，我这里随便写了个测试页面，打开控制台，点击图中的Vue,即可进行调试

在这里插入图片描述

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上是如何安装vue.js devtools？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

vue.js vs.反应：可伸缩性和可维护性May 10, 2025 am 12:24 AM

Vue.js和React在可扩展性和可维护性上的表现各有优势。1)Vue.js易于上手，适合小型项目，CompositionAPI提升了大型项目可维护性。2)React适用于大型复杂项目，Hooks和虚拟DOM提高了性能和可维护性，但学习曲线较陡峭。

vue.js和React的未来：趋势和预测May 09, 2025 am 12:12 AM

Vue.js和React的未来趋势和预测分别是：1)Vue.js将在企业级应用中广泛应用，并在服务端渲染和静态站点生成方面有突破；2)React将在服务器组件和数据获取方面创新，并进一步优化并发模式。

Netflix的前端：深入研究其技术堆栈May 08, 2025 am 12:11 AM

Netflix的前端技术栈主要基于React和Redux。1.React用于构建高性能的单页面应用，通过组件化开发提升代码重用性和维护性。2.Redux用于状态管理，确保状态变化可预测和可追踪。3.工具链包括Webpack、Babel、Jest和Enzyme，确保代码质量和性能。4.性能优化通过代码分割、懒加载和服务端渲染实现，提升用户体验。

vue.js和前端：构建交互式用户界面May 06, 2025 am 12:02 AM

Vue.js是一种渐进式框架，适用于构建交互性强的用户界面。其核心功能包括响应式系统、组件化开发和路由管理。1)响应式系统通过Object.defineProperty或Proxy实现数据监听，自动更新界面。2)组件化开发允许将界面拆分为可复用的模块。3)VueRouter支持单页面应用，提升用户体验。