给谷歌浏览器安装vue调试工具:vue-devtools

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

安装vue-devtools

一、拉取项目

vue-devtools：git地址（master分支）
非master分支在build的时候会报错。

二、install、build

1、打开cmd进入项目目录，可以选择npm/cnpm/yarn 进行install；如果有类似503等错误可能需要删掉node_modules尝重试几次。
在这里插入图片描述

npm install

cnpm install

yarn install

2、然后输入

npm run build

cnpm run build

yarn run build

三、添加扩展

1、打开Chrome扩展页面（更多工具> 扩展程序）
2、打开右上角“开发者模式”
3、加载已解压的扩展程序 -> 选择刚刚编译好的文件： vue-devtools-master\shells\chrome
4、重启浏览器，F12查看。

四、使用举例

vue-devtools使用举例

aら　淼
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
在Chrome(谷歌浏览器)中安装Vue.js devtools开发者工具及解决Vue.js not detected报错
又菜又爱玩的小熊
07-25 2755
文章目录一、Vue.js devtools开发者工具安装1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序2.先下载添加一个谷歌助手到扩展程序中（根据提示进行永久激活）3.点击谷歌浏览器的应用商店4.输入Vue.js devtools——搜索——选择下载二、解决Vue.js not detected报错1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序2.点击详情3.开启允许访问文件地址总结 一、Vue.js devtools开发者工具安装 1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序
安装Vue Devtools调试工具插件
梦之归途的博客
08-04 3897
在安装完Vue.js devtools后，打开自己写的一个vue.js网页，发现这个图标并没有亮起来，还是灰色，点击图标显示Vue.js not detected，打开控制台也没有发现有vue的选项。我们先看看Vue.js devtools是否生效，打开Bilibili（B站是用的vue），你就可以发现这个图标变绿了，说明Vue.js devtools是能用的。把这个允许访问文件网址的开关打开，锵锵，神奇的事情发生了，自己写的页面也能用vue.js devtools了。，点击右边的按钮，打开。......
浏览器安装vue调试插件（极简单）
weixin_40496191的博客
02-27 1万+
准备材料：谷歌浏览器、vue-devTool.crx 打开浏览器的右上角的设置–>更多工具–>扩展程序 打开开发者模式 然后重启浏览器，继续打开浏览器的右上角的设置–>更多工具–>扩展程序 将vue-devTool.crx工具拖入浏览器 随便打开一个vue项目，然后f12，可以看到vue已经 存在，并且可以通过vue插件，查看页面中的各种数据参数，说明成功了！！！ ...
【Vue 学习】插件的使用
不谷的博客
03-16 190
插件的使用
前端vue之开发者工具安装——装插件调试vue应用
m0_75234128的博客
08-07 408
本篇博客为装vue的调试插件，采用第二种方法，极简插件进行安装。在该安装程序上，自己有许多失误导致浪费了许多时间，特此发布本篇博客，希望帮助到其他遇到问题的同伴，若有用词不当或错误之处，请指出。点击链接进入这个页面，在搜索框输入vue，选择第一个"Vue Devtools",进入即可。将解压后的CRX文件拖拽进入该页面，弹出提示框，选择"添加扩展程序"。点击该插件左下侧详细信息，将"允许访问文件网址"打开即可。在此页面点击右上角三个点，选择"扩展程序"。下载完成后，点击"在文件夹中显示"。
vue调试工具vue-devtools安装及使用方法
12-12
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载： git clone https://github.com/vuejs/vue-devtools 2....
Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4
05-30
Vue.js devtools 6.1.4,Vue3谷歌浏览器调试工具。开发vue3必备开发工具，跟踪数据便于调试，解决数据问题。
Vue项目调试工具：vue-devtools安装包（免费）
05-15
vue chrome 开发工具安装包 vue-devtools（免费）
Vue项目调试工具：vue-devtools安装包
02-03
Vue项目调试工具：vue-devtools安装包
牛X的vue调试神器Vue Devtools
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
09-12 1114
关注入坑互联网，回复“加群”加入我们一起学习，天天进步前言vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。chrome商店直接安装 vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。工欲善其事, 必先...
VSCode开发 Vue3 建议必备的插件
程序研博客
11-28 8104
在使用 Visual Studio Code (VSCode) 开发 Vue 3 项目时，有一些插件可以提高开发效率、代码质量和工作流程。
vue-devtools的安装与使用
热门推荐
weixin_43843572的博客
05-26 8万+
vue-devtools的安装与使用
【保姆级教程】Vue项目调试技巧
.NET快速开发框架
06-20 812
在Vue项目开发过程中，当遇到应用逻辑出现错误，但又无法准确定位的时候，知晓Vue项目调试技巧至关重要，debug是必备技能。 同后台项目开发一样，可以在JS实现的应用逻辑中设置断点，并进行单步、进入方法内、跳出方法等调试，从而准确定位问题根源。 本文主要讲解针对Vue项目进行调试的 3 种方法：debugger、Vue.js devtools、vs code插件。
Chrome DevTools浏览器开发者工具、Vue DevTools、vs和DevTools调试
luemeon的博客
06-30 1839
目录ElementsStylesDOM结构 增删属性 模拟元素的伪状态，方便调试Computed LayoutEvent ListenersNetworkApplication资源列表+（可改）本地存储Cookie、WebStorage（localStorage、sessionStorage）Source 调试Page:资源目录Content scripts: 插件Snippets: 便捷测试https://developer.chrome.com/docs/devtools Ancestors 是否
Vue安装及插件Vue Devtools
weixin_30256901的博客
02-22 611
vue安装： # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run ...
Chrome谷歌浏览器安装VUE调试插件
weixin_49107940的博客
12-08 2326
【代码】Chrome谷歌浏览器安装VUE调试插件。
前端同学必备：教你如何安装、使用Chrome的vue-devtools插件
最新发布
04-04 1758
Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。
一波三折之chrome vue-devtools安装及使用
we101999的博客
07-08 3891
古人云：工欲善其事, 必先利其器。 用vue-devtools来调试开发vue项目能事半功倍吗？先用起来~ 谈谈我从安装到使用vue-devtools遇到的一些问题吧 ~~~ **1.**首先通过github下载压缩包：https://github.com/vuejs/vue-devtools 或者通过git命令： git clone https://github.com/vuejs/vue-devtools ----这里如果是git克隆的小伙伴，需要耐心的等待下，需要些时间才能下载下来。 **2.**进
怎么在谷歌浏览器安装vue-devtools
07-08
要在谷歌浏览器上安装 Vue Devtools，可以按照以下步骤进行操作： 1. 首先，在谷歌浏览器中打开 Chrome Web 商店网站（https://chrome.google.com/webstore）。 2. 在搜索栏中输入 "Vue Devtools"，然后按下回车键...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值