vue调试工具vue-devtools的安装和使用

本文主要介绍了vue调试工具vue-devtools的安装和使用

如果工人们想尽最大努力，他们必须首先磨利他们的工具。让我们用vue-devtools来调试和开发你的vue项目

安装：

1.从github下载：

gitclone https://github.com/vuejs/vue-devtools2.在vue-devtools目录中安装依赖包

Cd vue-devtoolscnpm install3。修改manifest.json文件

将“持续”:假改为真

4.编译代码

npm运行构建

5.扩展Chrome插件

Chrome浏览器更多程序扩展

点击加载解压程序按钮，选择vue-dev tools shell chrome将其放入。安装成功，如下所示

vue-devtools的使用

Vue项目，打开f12，选择vue即可使用。

Vue是数据驱动的，这样我们就可以看到相应的数据，方便我们的调试

怎么样，你觉得你的工作效率提高了吗

温馨提醒：

1.vue必须引入开发版本，使用最小压缩版本时，devtools不能用于调试

2.安装后，您需要关闭浏览器并重新打开，然后才能使用它

下面是vue调试工件开发工具安装的单独介绍

Vue devtools安装

下载后打开…\ vue-dev tools-dev \ vue-dev tools-dev \ shell \ Open…\ vue-dev tools-dev \ vue-dev tools-dev \ shell \ chrome的webpack.config.js并修改为process.env.NODE_ENV！=='development '在chrome :///extensions//中打开开发人员模式，按原样拉出vue-devtools-dev \ vue-devtools-dev \ shell \ chrome文件夹

摘要

以上就是边肖介绍的vue调试工具vue-devtools的安装使用方法，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！