01.在谷歌浏览器安装Vue开发者工具

已于 2022-08-12 17:51:41 修改
阅读量1.4k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： 前端 vue
于 2022-08-08 15:36:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40157997/article/details/126228722
版权

1.在谷歌浏览器安装Vue开发者工具，在设置中找到扩展程序

点开，直接将插件拖拽到扩展程序页面

3.安装好以后可以测试html,右键运行

4.在浏览器控制台输入Vue.config回车，会展示页面内容，安装完成

现在在vscode写的vue代码可以运行了

在扩展程序点击订书钉按钮，可以将vue固定，这个小V彩色时代表vue运行 

F12可以看到报404，是因为页签图标不存在，shift+刷新（强制刷新）可以看到报的错误

找个图片放到根目录下，重命名favicon.ico    关闭浏览器

右键重新打开open...

梅雪1111
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4
05-30
Vue.js devtools 6.1.4,Vue3谷歌浏览器调试工具。开发vue3必备开发工具，跟踪数据便于调试，解决数据问题。
谷歌浏览器 vue插件工具
04-29
vue谷-歌插件，开发帮手vue-devtools Vue.js devtools：调试vue.js应用的浏览器扩展 Chrome插件
Chrome 安装 Vue 开发者工具插件 Vue Devtools
最新发布
宋志辉的博客
04-03 873
Vue Devtools 是一个非常实用的 Chrome 浏览器插件，它为 Vue 开发者提供了强大的开发和调试功能。通过安装和使用 Vue Devtools，你可以实时查看和修改组件的数据和状态，分析组件的性能和渲染情况，提高 Vue 应用的开发效率。如果你是一名 Vue 开发者，强烈建议你安装和使用 Vue Devtools，它将为你的开发工作带来极大的便利。赶快行动起来，在 Chrome 浏览器中安装 Vue Devtools，开启更高效的 Vue 开发之旅吧！
Vue笔记
Filwaod
02-08 574
狂神说Vue笔记 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：
Vue开发者工具
热门推荐
weixin_45115479的博客
03-09 1万+
此篇文章帮助我记录，自己新手在使用Vue开发者工具遇到的问题 问题的大前提，要检查有无安装好Vue开发者工具 1、安装了 Vue.js devtools，也就是Vue开发者工具（Vue官网有详细介绍） https://cn.vuejs.org/ 2、在浏览器中安装，在扩展程序管理中添加 3、启动 Vue.js devetools 4、最重要一步！开启允许访问文件网址 5、基本能够在控制台中看到，并使用Vue开发者工具了 6、我会将Vue开发者工具固定在浏览器上，这样页面中使用了Vue，图标就变绿色，
在Chrome(谷歌浏览器)中安装Vue.js devtools开发者工具及解决Vue.js not detected报错
又菜又爱玩的小熊
07-25 2760
文章目录一、Vue.js devtools开发者工具安装1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序2.先下载添加一个谷歌助手到扩展程序中（根据提示进行永久激活）3.点击谷歌浏览器的应用商店4.输入Vue.js devtools——搜索——选择下载二、解决Vue.js not detected报错1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序2.点击详情3.开启允许访问文件地址总结 一、Vue.js devtools开发者工具安装 1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序
Chrome浏览器的vue开发插件
09-27
Chrome浏览器的vue开发插件，解决本地扩展程序中没有vue的情况，对前端页面进行高效调试
安装vue谷歌开发者工具
gcyaozuodashen的博客
07-25 1744
前面两个方法要么需要代理来实现，要么需要对NodeJs有一定的了解，这无疑对某些不喜欢折腾的同学十分头疼，有没有一种非常便捷的方法来实现呢？6、修改shells>chrome文件夹下的mainifest.json中的persistant为true。下载完成之后解压，打开谷歌扩展程序，点击左上角加载已解压的扩展程序，点击chrome文件夹。8、然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中，完成安装。3、使用终端命令cd至解压之后的文件夹。2、下载完成之后解压到你的本地磁盘。...
谷歌vue开发者工具
qq_42584734的博客
03-14 780
下载： 百度网盘链接：https://pan.baidu.com/s/1rdnvkvMsSk7Xs9C7zd_rmw 提取码：fjds 操作：谷歌浏览器输入chrome://extensions/ 打开开发者模式，将下载好的文件拖入即可 遇到的问题： 1、拉入文件后，跳转新页面，显示文件夹内容。 反复刷新，打开开发者模式，试试就好了。 2、有时候可能文件路径名不可以有英文，修改路径。 参考链接：https://blog.csdn.net/wswq2505655377/article/details/1114
谷歌浏览器调试vue项目
weixin_38526093的博客
02-07 4859
众所周知,在项目过程中我们常常遇到的一个问题就是本地调试的时候没问题但是发布到线上的时候就不行了。在时间充裕的情况下,我们当然可以慢慢调试,但是那是不可能的。选择完文件夹之后右键点击已打开的test.html标头 选择 "save for overrides" 将test.html保存到我们选的文件夹中。它能够实现 在不改动源码且不用重新打包发布就能改变前端脚本的执行逻辑,这样就大大减少了排错的时间。page页列出了当前浏览器中已打开的网站以及网站的页面文件,此时可以切换到Overrides选项卡。
如何在浏览器中安装使用Vue开发者工具？Vue开发者工具的安装使用？可直接提取插件安装使用
做笔记\记录遇到的程序bug
01-15 1897
如何在浏览器中安装使用Vue开发者工具？Vue开发者工具的安装使用？可直接提取插件安装使用
Vue开发调试工具插件chrome.zip
06-04
前端开发调试插件，Vue调试插件，Vue.js devtools Chrome插件下载，直接加压按步骤添加即可使用
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 开发者工具devtools(谷歌浏览器插件)，包括vue2和vue3
01-08
vue开发者工具，谷歌浏览器插件。 支持vue2和vue3 1. vue2版本：5.3.4 2. vue3版本：6.0.0.18 beta 两个插件，需要分别安装，分别支持vue2和vue3
vue开发者工具插件6.0.12版 在谷歌浏览器拖入扩展程序
03-12
vue开发者工具插件 在谷歌浏览器拖入扩展程序，直接使用。
Vue开发者工具-谷歌版本
11-14
使用方式：打开谷歌浏览器的-->管理扩展程序，最小化页面，将下载的文件解压后，将文件夹中的vue.crx拉取到页面中，会提示安装，安装后将开发模式打开，即可。 到此，便可以在浏览器中使用vue开发者工具，方便！
vue调试工具vue-devtools安装及使用
weixin_42332641的博客
07-14 761
一：修改manifest.json文件 把"persistent":false改成true 二：Chrome浏览器 > 更多程序 > 拓展程序 点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入 三：打开浏览器右上角有个高亮的Vue图标，打开f12,点击右侧的vue就出现了 ...
Vue——搭建Vue开发环境
m0_53912558的博客
01-28 532
开发版本与生产版本的区别：开发版本包含了完整的警告和调试模式，生产版本删除了警告，在开发过程中最好使用开发版本，能及时的发现错误和警告。在学习中使用开发版本。1)点击绿色的开发版本，就会以Vue.js（就是一个js文件）的文件形式下载到自己的电脑上；刚开始学习Vue时最好使用传统的在HTML中引入js文件（直接使用Script标签引用）：不建议使用使用这种方法安装Vue，因为这种方法在以后写代码时都需要网络。2)打开浏览器→打开开发者工具→打开控制台。3)打开浏览器→打开开发者工具→打开控制台。
使用Vue.js开发Chrome浏览器插件：从零到一
qq_44285141的博客
10-20 4713
Chrome浏览器插件是一种强大的工具，它可以为用户提供更丰富的浏览体验。在本篇博客中，我们将探讨如何使用Vue.js框架来构建一个Chrome浏览器插件。
怎么在谷歌浏览器安装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、付费专栏及课程。

余额充值