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动态获取width的方法

    Vue动态获取width的方法

    今天小编就为大家分享一篇Vue动态获取width的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue项目获取url中的参数(亲测可用)

    Vue项目获取url中的参数(亲测可用)

    这篇文章主要介绍了Vue项目获取url中的参数,本文通过两种情况分析给大家详细介绍,感兴趣的朋友一起看看吧
    2022-08-08
  • vue3+vite使用element-plus问题

    vue3+vite使用element-plus问题

    这篇文章主要介绍了vue3+vite使用element-plus问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

    Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

    今天小编小编就为大家分享一篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue中的scope使用详解

    vue中的scope使用详解

    这篇文章主要介绍了vue中的scope使用详解,需要的朋友可以参考下
    2017-10-10
  • Vue3+axios+Mock.js实现登录功能的示例代码

    Vue3+axios+Mock.js实现登录功能的示例代码

    本文主要介绍了Vue3+axios+Mock.js实现登录功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue2.0使用swiper组件实现轮播的示例代码

    vue2.0使用swiper组件实现轮播的示例代码

    下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue遮罩层如何阻止滚动

    vue遮罩层如何阻止滚动

    这篇文章主要介绍了vue遮罩层如何阻止滚动,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue如何通过$router.push传参数

    vue如何通过$router.push传参数

    这篇文章主要介绍了vue如何通过$router.push传参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 在Vue3中实现子组件向父组件传递数据的代码示例

    在Vue3中实现子组件向父组件传递数据的代码示例

    Vue3作为目前最热门的前端框架之一,以其轻量化、易用性及性能优势吸引了大量开发者,在开发过程中,不可避免地需要在组件之间传递数据,本文将详细讲解在Vue3中如何实现子组件向父组件传递数据,并通过具体示例代码使概念更加清晰
    2024-07-07

最新评论