Vue3 vue-devtools 调试工具下载安装使用教程

 更新时间:2022年08月12日 14:41:47   作者:NiKlaus729  
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率,尤其是对于初学vue的朋友来说可谓是一大利器,这篇文章主要介绍了Vue3 vue-devtools 调试工具下载安装,需要的朋友可以参考下

官网下载地址:GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

完成后解压到目录,解压后目录如下:

终端命令行进入到解压后的Vue-Devtools目录:

执行命令下载yarn:

npm install -g yarn

安装好yarn后,通过yarn来安装相关依赖:

yarn install

依赖安装完成后,开始打包build。
需要注意,这里的命令需要带watch,如果不带,会出错:

yarn run build:watch

代码执行一阵后,没有其他反应,此时Ctrl+C退出即可。
接下来执行dev:

yarn run dev:chrome

出现下面的界面后就可以Ctrl+C退出终端了:

此时,Vue-Devtools目录下,生成了build目录:

安装

1、打开Chrome浏览器扩展程序

2、加载已解压的程序

3、扩展栏固定vue-devtools程序

至此,Vue-Devtools插件安装完成,打开使用vue3的网站,F12打开Chrome调试台,可以看到Vue-Devtools的界面按钮:

到此这篇关于Vue3vue-devtools调试工具下载安装的文章就介绍到这了,更多相关vue-devtools调试工具内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Vue This$Store总结

    详解Vue This$Store总结

    这篇文章主要介绍了详解Vue This$Store总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 谈谈对Vue Router的理解

    谈谈对Vue Router的理解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要介绍了对Vue Router的理解,需要的朋友可以参考下
    2022-11-11
  • Vue 2中实现CustomRef方式防抖节流

    Vue 2中实现CustomRef方式防抖节流

    这篇文章主要为大家介绍了Vue 2中实现CustomRef方式防抖节流示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Vue extends 属性的用法示例详解

    Vue extends 属性的用法示例详解

    这篇文章主要为大家介绍了Vue extends 属性的用法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue基于iview table展示图片实现点击放大

    Vue基于iview table展示图片实现点击放大

    这篇文章主要介绍了Vue基于iview table展示图片实现点击放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • vue前端HbuliderEslint实时校验自动修复设置

    vue前端HbuliderEslint实时校验自动修复设置

    这篇文章主要为大家介绍了vue前端中Hbulider中Eslint实时校验自动修复设置操作过程,有需要的朋友可以借鉴参考下希望能够有所帮助
    2021-10-10
  • 一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

    一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

    这篇文章主要介绍了使用Typescript封装一个Vue组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue弹窗组件使用方法

    vue弹窗组件使用方法

    弹窗是一个项目必备的复用利器,这篇文章主要介绍了vue弹窗组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • 一篇文章教会你部署vue项目到docker

    一篇文章教会你部署vue项目到docker

    在前端开发中,部署项目是我们经常发生的事情,下面这篇文章主要给大家介绍了关于部署vue项目到docker的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • Vue 父子组件、组件间通信

    Vue 父子组件、组件间通信

    本篇文章主要介绍了Vue 父子组件、组件间通信示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03

最新评论