Microsoft Edge 安装插件 Vue.js devtools

已于 2023-08-01 10:09:55 修改
阅读量1w 收藏 18
点赞数 11
分类专栏： 工具 文章标签： microsoft vue.js javascript
于 2021-09-01 11:46:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31213021/article/details/120036139
版权

一、打开扩展 

1. 点击“设置及其他（Alt+F）”

2. 选择菜单“扩展”，打开 edge://extensions/ 页

3. 打开“开发人员模式” 和 “允许来自其他应用商店的扩展” 选项

4. 点击“获取 Microsoft Edge 扩展”

 二、安装

1. 打开 Microsoft Edge 扩展页

2. 左上角搜索“Vue.js devtools”

3. 点击安装（我已安装，所以这里是“删除”按钮）

三、查看

扩展页中可以看到已安装成功

无需重启，在vue项目页中就可看到此 绿色 V 图标 

 

四、补充

工具链 | Vue.js，也可根据“Edge 扩展”找到链接 

AvatarGiser
关注
专栏目录
Vue开发者工具扩展（Edge安装）
PNPYY的博客
08-13 521
本文仅作个人笔记使用，无商用；如若转载，请先声明。
Vue调试工具vue-devtools的安装步骤和使用
UNDEFINED_AUBE的博客
08-20 5065
题外话：这个是vscode快捷方式总结的网站，忘了可以查一下https://www.cnblogs.com/bindong/p/6045957.html   1、到github上下载压缩包 https://github.com/vuejs/vue-devtools   2、解压到D盘（我是在D盘下又建了一个文件夹来放，可以直接解压在D盘根目录）， 打开cmd，用npm在vue-...
离线安装 vue-devtools-dev.zip
10-23
某些环境下，由于网络联通性问题，会导致vue-cli命令无法下载到webapck模板。 执行如下命令 vue-cli init webpack <project_name> 发生如下错误 vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.250.177.223:443 解决方法： 1、从https://github.com/vuejs-templates/webpack/releases 下载一个webpack的版本，压缩包中的内容解压到 目录 C:\Users\Administrator\.vue-templates\webpack/目录下； 2、使用如下命令进行离线方式的初始化，就能规避由于网络原因无法下载webpack模板的问题了 vue init webpack [projectName] --offline
Chrome/edge 浏览器中安装 Vue Devtools 插件
terrible_code的博客
03-27 1946
Chrome/edge 浏览器中安装 Vue Devtools 插件
Edge浏览器安装vue devtools
u010234868的专栏
08-02 2372
在文件夹空白处，点击鼠标右键选择：git bush here。3. 在上一步打开的git窗口中安装依赖。4. 成功安装依赖后在git窗口中打包构建。2. 下载后的压缩包解压并打开文件夹。
Edge 上安装 Vue-Devtools
最新发布
weixin_67920119的博客
06-26 609
2，得把允许访问文件url开起来，收集错误也可以开，没试过行不行。3，这时候重启一下浏览器，打开你要调试的网页标应该绿了。4，F12，它居然在最后这，还是空白的？1，直接在edge的商店上搜然后安装。5，我去用用看，还有没有别的问题。
在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools
热门推荐
雪之下雪乃的博客
01-15 3万+
在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools Vue-Devtools 插件是一个 Vue 项目的调试插件 Microsoft Edge 浏览器是基于 Chromium 内核的 1、设置浏览器的扩展选项 打开浏览器右上角的设置与其他（快捷键 Alt+F），选择扩展 进入扩展设置页面后，在页面的左下角将开发人员模式和允许来自其他应用商店的扩展两个选项打开 2、使用 Edge 浏览器打开谷歌应用商店 打开 Chrome 扩展商店，在搜索栏搜索 vue
vue-devtools-6.0.0_beta_21
01-13
7. **Edge 浏览器支持**：对于 Microsoft Edge 用户，好消息是无需下载，可以直接在Edge的插件商店找到 Vue Devtools，简化了安装过程。 8. **更新与维护**：保持 Vue Devtools 更新至最新版本是非常重要的，因为...
Vue Devtools下载使用
已经天黑了的博客
06-22 9963
Vue Devtools下载使用 Vue Devtools介绍 在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。 下载安装 通过官方下载渠道（可跳过） 访问Vue2.x官网https://cn.vuejs.org/v2/guide/installation.html#Vue-Devtools 访问Vue3.x官网https://v3.cn.vuejs.org/guide/installation.html#vue-devto
Sentry For Vue 完整接入详解(2021 Sentry v21.8.x)前方高能预警！三万字，慎入！
o__cc的博客
09-07 4813
内容源于：https://docs.sentry.io/platforms/javascript/guides/vue/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For React 完整接入详解 脑图 公众号：黑客下午茶 快速开始 S...
可以直接安装的vue-devtools调试工具.zip
05-07
该文件下载后可以直接安装。不再需要想网上大多数文件哪那样需要下载依赖又要编译的操作。这些步骤我已经做好了，你只需下载文件导入到浏览器就可以使用了。不会导入的可直接到我博客查看导入devtools文件教程解说！地址：https://blog.csdn.net/Smell_rookie/article/details/105966884
【三十天精通Vue 3】第二十天 Vue 3的性能优化
陈书予
04-28 9816
性能优化是指通过一系列的技术手段和策略，使Vue3应用程序更快、更可靠、更稳定地运行。性能优化的目标是提高Vue3应用程序的响应速度、降低CPU和内存的占用率、减少HTTP请求次数、加快数据传输速度等，从而提高用户体验和SEO等方面的效果。
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7040
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
vue.js.devTools插件-edge已安装插件转chrome
weixin_48447023的博客
03-21 484
由于在edge中的vue插件总是失灵，没办法转chrome。但是chrome插件商店需要魔法，查阅了一些帖子后把我的方法记录在下。但这不要紧，挨个点进去看，能看到子文件的标题是数字，该数字代表了该插件的版本号。1、首先在edge中安装vue.js.devTools插件，这个很简单，重要的是找到。发现和我安装的插件版本号是一样的，可以确实该插件是vue插件。5、找到你第二步找到的插件位置，目录层级到版本号那一层就行。2、以我自为例，vue.js.devTools插件安装在。4、点击加载已解压的扩展程序。
edge下载Vue.js devtools
m0_53979927的博客
08-09 1337
Edge浏览器点击右上角的插件–>管理扩展
Chrome、Edge中Vue.js devtools安装
pkkk572的博客
07-06 845
安装Vue.js devtools
Edge chrome 浏览器插件vue-devtools安装教程（简单易上手）
暂时注销中.........
02-25 1744
3，点击vue菜单，即可看到左侧组件嵌套情况，右侧则可选择查看组件，vuex数据仓库,事件派发情况，vue-router，工具设置等等。1.使用之前必须对vue项目进行相关设置，在Vue加载之后设置立即设置Vue.config.devtools = true，6.进入shell文件夹，将构建出的chrome文件夹拖到chrome拓展程序页，点击确认，成功添加新的拓展程序。5.打开chrome浏览器，点击选项，更多工具，拓展程序，2.chrome浏览器按f12，即可看到vue菜单，
【Windows】在 Microsoft Edge 和 Chrome 中安装 vue-devtools
小天才程序员的博客乐园
07-27 2万+
在新版Microsoft Edge(Chromium内核)和Chrome安装vue-devtools-dev开发调试工具
vue.js devtools浏览器插件
07-28
Vue.js Devtools 是一个用于浏览器的插件，于开发 Vue.js用程序时调试和析 Vue 组件的工。它提供了一列的功能，包括组件树的可视化、组件状态的查看与、事件监听与触发、性能分析等等。通过 Vue.js Devtools，开发者可以更方便地进行 Vue.js 应用程序的调试和优化工作。 要使用 Vue.js Devtools，首先需要安装它。对于不同的浏览器，安装方式可能略有不同。一般来说，你可以在浏览器的插件市场中搜索 "Vue.js Devtools"，然后按照提示进行安装。 安装完成后，在你的 Vue.js 应用程序中启动开发模式，然后打开浏览器的开发者工具。你应该能够在开发者工具的选项中找到 Vue.js Devtools，并点击它进行打开。一旦打开了 Vue.js Devtools，你将能够看到组件树、组件状态、事件等相关信息，以及进行相应的操作和分析。 请注意，Vue.js Devtools 只能用于开发环境，不适用于生产环境。在开发完成后，记得将它从浏览器中移除或禁用，以避免潜在的安全问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值