Vuejs调试工具使用

最新推荐文章于 2024-06-25 20:03:16 发布
最新推荐文章于 2024-06-25 20:03:16 发布
阅读量435 收藏
点赞数
分类专栏： 软件使用 安装设置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kangguang/article/details/104851864
版权

一、使用环境 

  • 设备：Mac
  • 浏览器：Chrome
  • IDE： WebStorm

二、调试需求

  •     通过 Chrome 浏览器调试
  •     能够收集到页面错误信息
  •     查看Vue数据
  •     打印调试
  •     调试页面简洁且易操作

三、添加扩展插件

  •      插件：Vue.js devtools       
  •      安装：通过谷歌商店搜索安装

1.打开扩展程序

到达                

搜索 Vue.js devtools ，并且安装

四、页面调试设置

1.在扩展程序中找到Vue.js devtools插件，点击详细信息

把以下两项选择上

否则在要调试对页面上会出现以下信息 

2.刷新要调试的页面

出现 Vue 选项 即可点击选项，对页面进行调试了

 

 

清雨未尽时
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-devtools v5.1.0.crx 最新版Chrome浏览器Vue调试插件
06-17
vuejs-devtools_v5.1.0.crx 最新版Chrome浏览器Vue调试插件，直接安装使用无需自己编译。安装方法：打开Chrome浏览器，输入“chrome://extensions/”打开扩展程序，启用开发者模式，然后把下载下来的“vuejs-devtools_v5.1.0.crx”拖到Chrome上去即可安装。 如果安装的时候报错：程序包无效:"CRX_HEADER_INVALID"解决方法： 将扩展名.crx改为.rar解压出来，然后使用“加载已解压的扩展程序”进行安装。
vue-devtools(chrome vue 调试插件) mac windows 前端开发
04-15
chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
前端-vue基础58-Vue调试工具使用
qq_41632427的博客
07-21 159
vue
Chrome插件：​Vue.js Devtools 高效地开发和调试
最新发布
朱雀随云记的博客
06-25 1087
Vue.js Devtools是一个Chrome DevTools扩展，专门用于调试Vue.js应用。安装这个扩展后，你会在Chrome开发者工具中看到一个新的标签“Vue”，通过它可以直观地查看和操作Vue.js组件，极大地提升了调试效率。
vue调试工具vue.js devtools
weixin_44575660的博客
07-22 327
添加成扩展程序 1、谷歌商店下载 在谷歌商店搜索vue.js devtools，加入到扩展程序 2、本地打包 1、vue.js devtools下载提取码:0000 2、解压缩 3、打开扩展工具页面 4、将解压好的vue.js devtools拖进页面打包成扩展程序 使用 打开调试页面就会发现vue了，如下图最后一个 我刚开始使用的是第二种方法，但是因为没有在调试工具找到vue，就以为失败了，就移除又从商店下载了一次，在使用过程中遇到一个问题vue.js not detected，打开调试没有找到，我使
Vue学习记录--调试工具devtools的安装与使用
小灰狼与大白兔的博客
02-17 6206
链接：https://pan.baidu.com/s/1m7l6tMBvzFxGoIHFPgbaKw 提取码：ewpj 下载上面的文件，将他放到一个固定的地方 打开谷歌浏览器设置—>扩展程序–》勾选开发者模式—》加载已解压的扩展程序—》选择“chrome扩展”文件夹，至此恭喜已经安装成功！！！ 用谷歌浏览器打开vue项目，按F12 ,然后点击vue就可以使用了 ...
vuejs调试教程
yangxiaochen_jk的博客
07-01 652
目录 vuejs如何调试代码... 1 vuejs如何调试代码... 1 Vue调试神器vue-devtools安装.... 3 参考文章链接：https://www.cnblogs.com/ricolee/p/vue-debugging.html vuejs如何调试代码 基于webpack的配置调试# 使用Vue-cli命令行工具初始化基于wabpack模板的项目的命令语法： Copy npm install -g @vue/cli # 全局安装...
vue的调试工具 vue-devtools 的安装和使用
Beamon__的博客
05-24 1367
安装 1.到github下载： git clone https://github.com/vuejs/vue-devtools 2.安装依赖 cd vue-devtools && npm install 3.打包 npm run build 4.扩展Chrome插件 Chrome浏览器 > 更多程序 > 拓展程序 点击“加载已解压的拓...
vue.js.devtools vue页面调试插件
qq_42772570的博客
08-25 485
vue的页面调试插件,谷歌浏览器 去Github下载 https://github.com/vuejs/vue-devtools 下载后 需要解压， 解压后 在当前目前打开cmd小窗口， 进入vue-devtools-master工程 执行cnpm install, 下载依赖，然后执行npm run build，编译源程序。需要等一会 有点慢 修改shells、chrome目录下的mainifest.json 中的persistant为true： 然后设置webpack.config.js里面的代
vue调试工具_2020年11大顶级VueJS开发工具
weixin_39622521的博客
12-12 161
作者 | Shanika Wickramasinghe译者 | 王强 策划 | 小智Vue JS 最近变得越来越流行，主要是因为它在学习和开发应用程序方面都提供了很多便利。无论你是经验丰富的开发人员，正希望切换到 Vue 上，还是刚刚开始工作的新人——选择正确的工具都是非常重要的。在合适的工具帮助下，你就能快速构建出色的应用，而无需重新发明轮子。 在为这个列表挑选工具时，我们考虑了整个 Vue J...
两步安装vue.js devtools调试工具
~悟空的定海神针~
03-12 1246
安装 1.下载vue.js devtools插件 去谷歌浏览器插件下载中心，搜vue https://www.chromefor.com/ 找到如下图，点进去 点击本网站下载 有三个可选下载路线 2.扩展程序 打开谷歌浏览器，安装扩展程序 直接把你下载好的vue.js devtools 拖进来 上面就会显示如下图的小图标，当你开启一个vue程序时，它就会变成绿色的。 使用 打开一个vu...
chrome浏览器vue.js调试插件(vue-devtools)的安装
shi__Yu的博客
08-05 806
chrome浏览器vue.js调试插件(vue-devtools)的安装,及问题解决。 今天主要讲vue.js基于chrome浏览器的调试工具（vue-devtools）的安装方式。 注意：请确保您使用的是Node 6+和NPM 3+ 第一步：拉取源码：我们需要到github上去拉取vue-devtools插件的源代码。 github地址：https://github.com/vuejs/vue-devtools git拉取命令（命令提示符中）： git clone https://github.com/v
vuejs如何调试代码
新技术革命
09-21 457
https://www.cnblogs.com/ricolee/p/vue-debugging.html https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html https://www.cnblogs.com/xifengxiaoma/p/9530737.html 基于webpack的配置调试# 使用Vue-cli命令行工具初始化基于wabpack模板的项目的命令语法： Copy npm install -g @vue/..
Vue课程36-体验vue调试工具的使用和用法
qq_41632427的博客
07-03 88
vue
Vue调式工具——vue-devtools插件下载安装 手把手教程！
weixin_44042442的博客
02-25 4616
下载安装vue-devtools工具插件 ；Chrome浏览器下载安装vue调试工具；vue调试工具安装
vue调试工具vue-devtools安装及使用
duansamve的博客
04-04 3606
1、到github下载：（下载一定要记得是master主分支的代码，默认克隆后进入的是dev分支，执行npm run build会报错）直接下载zip文件即可。 github国内很多地方访问不是很稳定，git clone下载代码的方式可能会比较慢，所以直接下载zip文件。 2、在vue-devtools目录下安装依赖包： cd vue-devtools cnpm install 3、依赖包下载完后执行cnpm run build,编译打包成功后会在shells下生成chrome文件夹。此文件夹
vue.js调试工具安装
鲁花花生油
05-09 453
1.vue官网 https://cn.vuejs.org/ 2.官网右上角的生态系统里下拉的官方仓库 3.找到vue-devtools 4.找到相对应的点过去，得翻墙才能访问到哦 5.点击添加，添加完刷新页面即可(我这里已经添加，所以显示删除) 6.有这个就成功了 完结，撒花 ...
Vue----Vue的调试工具
emmmm.....
04-28 2947
文章目录Vue的调试工具 Vue的调试工具 vue-devtools vue官方提供的调试工具，能够方便开发者对vue项目进行调试与开发。 vue-devtools官网 Vue.js devtools - Crx4Chrome插件下载 Microsoft Edge 浏览器中 Vue.js devtools 插件安装与使用 … GitHub - vuejs/devtools: ⚙️ Browser devtools extension … Vue2和Vue3的浏览器调试工具不能交叉使用，即Vue2调试工具只
调试工具怎么安装vue
10-05
安装Vue.js调试工具vue-devtools的步骤如下： 1. 首先，从GitHub上下载vue-devtools。可以使用以下命令将其克隆到本地： ``` git clone https://github.com/vuejs/vue-devtools ``` 2. 进入下载的vue-devtools...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值