vue-devtools工具的安装和使用

2022-11-16 09:09:45 浏览数 (1)

目录

介绍:

1、从github拉取开发工具源码

2、在vue-devtools目录下安装依赖包

3、执行npm run build

4、打开Chrome浏览器,选择更多工具->扩展程序

5、将刚才看到的chrome目录直接拖拽到上述页面中,就可以看到上成功加载了Vue开发工具

6、打开一个Vue应用的页面

介绍:

在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

1、从github拉取开发工具源码

2、在vue-devtools目录下安装依赖包

cd vue-devtools

npm install

3、执行npm run build

看到如下界面,表示成功

此时在vue-devtools目录下会出现一个shells目录,其中有一个chrome目录

4、打开Chrome浏览器,选择更多工具->扩展程序

5、将刚才看到的chrome目录直接拖拽到上述页面中,就可以看到上成功加载了Vue开发工具

6、打开一个Vue应用的页面

然后开启对开发工具的支持,此时在原来Chrome的开发者工具中就会出现一个名字为Vue的tab,通过这个tab就可以看到当前Vue应用运行的一些信息,方便进行调试。

0 人点赞