在谷歌浏览器中安装vue调试工具vue-devtools

最新推荐文章于 2024-04-30 10:00:00 发布
最新推荐文章于 2024-04-30 10:00:00 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40133387/article/details/107961760
版权

在谷歌浏览器中安装vue调试工具vue-devtools

目录

在谷歌浏览器中安装vue调试工具vue-devtools

一、下载vue-devtools工具包

工具包git地址：   https://github.com/vuejs/vue-devtools

分支选择master

二、安装依赖

到下载工具包目录下

cd vue-devtools-master

cnpm install

cnpm run build

注：第一次用cnpm有报错，用npm就好了

 

三、在谷歌浏览器扩展中 加载已解压的扩展程序

进入谷歌的扩展程序

开启开发者模式

加载已解压的扩展程序

选择“vue-devtools-master >> shells >> chrome” 

选择chrome文件夹导入 

ok！

人生巅峰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Chrome安装Vue插件vue-devtools
刘家旺的博客
03-27 724
Vue.js是一款流行的JavaScript框架，广泛用于构建现代化的Web应用程序。为了提升Vue开发者的工作效率和体验，Vue开发团队推出了一款强大的浏览器插件——vue-devtools。本文将介绍如何在Chrome浏览器中安装和使用vue-devtools插件，以及该插件带来的便利之处。
vue-devtools谷歌浏览器插件
09-20
vue-devtools专门用来调试vue If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.
# 谷歌 chrome 浏览器中的 vuejs devtools 插件工具的安装方法
最新发布
段子手168的博客
04-30 3526
github 下载地址：https://github.com/vuejs/vue-devtools如下载：vue.js-devtools-4.1.3.zippage=9。
Chrome（谷歌浏览器）安装Vue插件vue-devtools（图文详细教程）
热门推荐
小钻风的博客
03-12 4万+
使用Vue开发项目时，常会用到一款谷歌浏览器插件，vue-devtools 安装成功后，运行本地Vue项目，打开浏览器控制台就如下： 其中可以便捷的查看vueX的数据以及组件结构等，非常方便， 安装步骤如下： 1、首先给大家提供一个git地址，虽然官网也有地址(https://github.com/vuejs/vue-devtools.git)，我认为不太好用 给大家提供另一个git地址： https://gitee.com/zhang_banglong/vue-devtools.git 打开里面就如
谷歌浏览器安装vue-devtools
皇家小骑士
09-09 465
vue-devtools安装下载安装 安装之前，确保有node环境 下载 github下载地址 下载的方法有很多，这里就不一一叙述。如果不会git语法，最直接的方式就是点击clone or download下载zip到桌面解压。 安装 cd命令进入到vue-devtools-dev目录 运行npm install(也可使用淘宝镜像cnpm install) 打开vue-devtools-de...
Chrome谷歌浏览器中安装vue-devtools
六六的小帅的博客
08-13 213
开始使用在GitHub上面下载源码、安装依赖、打包的方式安装，但是在安装依赖时一直不成功。 GitHub的下载地址：https://github.com/vuejs/vue-devtools 最后找到了已经打包的插件可以在这里下载：链接：https://pan.baidu.com/s/1Wrg6fc9ExPUfX9SKlJCiiA 提取码：uu7o 如果资源不能下载可以在评论中留言 安装步骤：将下载的压缩包解压→打开谷歌浏览器的更多工具，扩展程序→点击下图标记的按钮→选择刚才解压的文件夹导入就可..
谷歌浏览器安装 vue 调试工具 vue devtools
悟世君子的博客
12-10 1201
谷歌浏览器安装 vue 调试插件 vue devtools，对于调试 vue 项目非常方便，本文介绍如何安装 1、在 github 下载vue devtools 这里可以使用 git 克隆 git clone https://github.com/vuejs/vue-devtools 或者直接到网站下载 vue devtools 插件地址：https://github.com...
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
vue调试工具vue-devtools安装及使用方法
12-12
5. **安装 Chrome 扩展**：打开谷歌浏览器，进入扩展程序页面（`chrome://extensions/`），开启开发者模式，然后点击“加载已解压的扩展程序”，选择 `vue-devtools/shells/chrome` 文件夹，这样就成功安装了 Vue ...
谷歌浏览器vue插件vue-devtools
04-10
这个插件可以在谷歌浏览器（Chrome）中安装，帮助开发者调试、检查和优化Vue应用。 Vue Devtools 提供了以下主要功能： 1. **组件树**：在Vue Devtools的“Components”面板中，你可以查看应用的组件结构。每个...
Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4
05-30
Vue.js devtools 6.1.4 是一款专为Vue3开发者设计的谷歌浏览器扩展工具，它极大地简化了Vue应用程序的调试过程。这款工具能够帮助前端开发者深入理解Vue3的应用状态，实时追踪组件数据变化，定位并解决问题，提高...
谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码
05-04
谷歌浏览器 chrome vue 调试插件 vue-devtools chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
谷歌浏览器 vue插件工具
04-29
vue谷-歌插件，开发帮手vue-devtools Vue.js devtools：调试vue.js应用的浏览器扩展 Chrome插件
Vue Devtools谷歌浏览器插件下载
07-06
Vue Devtools是一款强大的开发者工具，专为Vue.js框架设计，用于在谷歌浏览器（Chrome）中进行前端开发。这款插件允许开发者深入理解Vue应用程序的内部工作原理，方便调试、检查和优化Vue组件及其数据。Vue Devtools...
在chrome浏览器中安装vue-Devtools工具
fanqis的博客
07-03 1591
1、根据 此https://github.com/vuejs/vue-devtools把项目下载到 本地； 2、Win+ R 运行，cd到刚刚下载的vue-devtools项目地址后， 进行 npm install 命令，完事儿后 再执行编译命令 npm run build； 3、打开下载vue-devtools项目的目录，找到E:\vue-devtools\shells\...
在谷歌浏览器中安装vue项目调试工具 vue-devtools详细安装步骤
qq_43241161的博客
04-28 2791
谷歌浏览器安装vue-devtools插件 前往GitHub下载vue-devtools文件 文件地址 文件链接 在GitHub中下载时一定要选择master分支，不然在安装依赖是出现问题，如图所示 文件下载完成后，进入文件打开命令栏窗口 ，输入命令npm install 安装依赖 如下图所示 依赖安装完成后，运行命令 npm run build 进行打包 如下图所...
Chrome浏览器安装vue调试工具
zhangxy
08-21 6287
1、在github官网下载vue-devtools压缩包：https://github.com/vuejs/vue-devtools 2、压缩包解压，并通过命令行进入vue-devtools-master文件夹中，如下（我的在F盘）： C:\Users\asus>f: F:\>cd Firefox/vue-devtools-dev 3、输入npm install安装命令进行安装...
如何在chrome中安装Vue调试神器vue-devtools
禅思院
02-13 3093
前言 最近研究一下vue-devtools，感觉还蛮不错的,顺便尝试安装了一下。 vue-devtools是什么? vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。 系统环境 vue-devtools如何安装? 第一种安装方法,考验自己的动手能力，对于我们开发来说，这都不是事儿，因为在安装成功的那一刻,有一种自豪的感觉。 在gi...
chrome下的Vue单步调试
yz18931904的博客
06-01 1554
一直觉得vue的单步调试很费劲，webpack编译后的代码让人难以捉摸，因为平时使用vs code开发环境，网上找了各种关于vs code单步调试vue的文章做了各种尝试都没成功，断点永远都进不去，断点处一直显示 已设置断点但还未绑定。没找到问题所在，有知道大神们的期待告知哦。 使用vue-devtools插件的就不说了哈，也是一个调试的好工具，大家自行百度哦 后来找到一个可以用的方法就是在断点处加debugger,这样就是进入断点进行调试了，但是这样做的缺点也显而易见，调试结束还得一一删除，甚是不
怎么在谷歌浏览器安装vue-devtools
07-08
要在谷歌浏览器上安装 Vue Devtools，可以按照以下步骤进行操作： 1. 首先，在谷歌浏览器中打开 Chrome Web 商店网站（https://chrome.google.com/webstore）。 2. 在搜索栏中输入 "Vue Devtools"，然后按下回车键进行搜索。 3. 在搜索结果中找到 "Vue.js devtools" 扩展，并点击进入扩展页面。 4. 点击页面右上角的 "添加至 Chrome" 按钮。 5. 弹出确认对话框后，点击 "添加扩展程序" 进行安装。 6. 安装完成后，你应该能在浏览器的工具栏上看到 Vue Devtools 的图标。 7. 现在，当你打开一个使用 Vue.js 开发的网站时，在浏览器的开发者工具中会出现一个新的 "Vue" 选项卡，点击它即可打开 Vue Devtools。 通过这个插件，你可以方便地调试和观察 Vue 应用程序的状态和组件层次结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值