Edge浏览器安装vue devtools

已于 2024-01-23 16:17:12 修改
阅读量2.1k 收藏
点赞数 2
分类专栏： Vue 其他 文章标签： vue.js edge javascript
于 2023-08-02 11:04:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010234868/article/details/123355355
版权
Vue 同时被 2 个专栏收录
122 篇文章 2 订阅
订阅专栏
其他
6 篇文章 0 订阅
订阅专栏

1. 下载地址

GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

2. 下载后的压缩包解压并打开文件夹

 

在文件夹空白处，点击鼠标右键选择：git bush here 

 3. 在上一步打开的git窗口中安装依赖

npm install

4. 成功安装依赖后在git窗口中打包构建

npm run build

5. 打开浏览器，点击右上角三个点，找到“扩展”，点击“管理扩展”，开启“开发人员模式”， 点击右侧的“加载解压缩的扩展”，找到并选择第4步打包构建生成的文件夹，即可成功添加扩展：

每一天，每一步
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue-devtools（浏览器扩展，edge、谷歌等通用）
08-17
适合多个浏览器，打开浏览器扩展，选择开发者模式，直接将文件解压后将文件夹拖入即可
离线安装 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
vue-devtools插件Edge亮了但是控制台不显示
weixin_52754360的博客
05-06 465
看网上加什么的设置感觉也不太行,而且这个商城直接下的感觉也不是压缩版 .直接在edge插件商城下的,也都勾选了,标志亮了,控制台无.我删了另外放了一个自己下的版本。
推荐使用：Microsoft Edge DevTools —— 强大的前端开发利器
gitblog_00100的博客
06-12 461
推荐使用：Microsoft Edge DevTools —— 强大的前端开发利器 项目地址:https://gitcode.com/MicrosoftEdge/DevTools 1、项目介绍 欢迎来到Microsoft Edge DevTools的反馈仓库，这是一个专为所有DevTools用户提供的平台，用于提出想法、提供反馈、建议、报告bug，同时也是交流和讨论DevTools问题的理想场所。...
edge插件商城中的vue.js devtools6.6.1不可用问题
include_147的博客
05-17 349
最近开始学vue在网课中看见vue.js devtools就按照流程下载并给了权限，但在调试过程中依旧不可用。
在 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
Edge 上安装 Vue-Devtools
最新发布
weixin_67920119的博客
06-26 300
2，得把允许访问文件url开起来，收集错误也可以开，没试过行不行。3，这时候重启一下浏览器，打开你要调试的网页标应该绿了。4，F12，它居然在最后这，还是空白的？1，直接在edge的商店上搜然后安装。5，我去用用看，还有没有别的问题。
【Windows】在 Microsoft Edge 和 Chrome 中安装 vue-devtools
小天才程序员的博客乐园
07-27 2万+
在新版Microsoft Edge(Chromium内核)和Chrome安装vue-devtools-dev开发调试工具
Microsoft Edge 安装插件 Vue.js devtools
前端技术
09-01 1万+
一、打开扩展 1. 点击“设置及其他（Alt+F）” 2. 选择菜单“扩展”，打开 edge://extensions/ 页 3. 打开“开发人员模式” 和 “允许来自其他应用商店的扩展” 选项 4. 点击“获取 Microsoft Edge 扩展” 二、安装 1. 打开 Microsoft Edge 扩展页 2. 左上角搜索“Vue.js devtools” 3. 点击安装（我已安装，所以这里是“删除”按钮） 三、查看 扩展页中可以看到已安装成功 无需重启，在vue项目页..
Edge chrome 浏览器插件vue-devtools安装教程（简单易上手）
暂时注销中.........
02-25 1662
3，点击vue菜单，即可看到左侧组件嵌套情况，右侧则可选择查看组件，vuex数据仓库,事件派发情况，vue-router，工具设置等等。1.使用之前必须对vue项目进行相关设置，在Vue加载之后设置立即设置Vue.config.devtools = true，6.进入shell文件夹，将构建出的chrome文件夹拖到chrome拓展程序页，点击确认，成功添加新的拓展程序。5.打开chrome浏览器，点击选项，更多工具，拓展程序，2.chrome浏览器按f12，即可看到vue菜单，
edge下载Vue.js devtools
m0_53979927的博客
08-09 1252
Edge浏览器点击右上角的插件–>管理扩展
Chrome/edge 浏览器中安装 Vue Devtools 插件
terrible_code的博客
03-27 1567
Chrome/edge 浏览器中安装 Vue Devtools 插件
可以直接安装的vue-devtools调试工具.zip
05-07
该文件下载后可以直接安装。不再需要想网上大多数文件哪那样需要下载依赖又要编译的操作。这些步骤我已经做好了，你只需下载文件导入到浏览器就可以使用了。不会导入的可直接到我博客查看导入devtools文件教程解说！地址：https://blog.csdn.net/Smell_rookie/article/details/105966884
（七）浏览器上安装?Vue Devtools和VScode插件-附件资源
03-05
（七）浏览器上安装?Vue Devtools和VScode插件-附件资源
vuedevtools安装
03-02
以上就是关于“Vue DevTools安装”的详细步骤和使用介绍。通过熟练运用Vue DevTools，开发者可以更有效地调试和优化Vue应用程序，提升开发效率。在实际工作中，配合Vue的其他工具如Vue CLI、Vuex等，可以构建出更...
vue-devtools-6.0.0_beta_21
01-13
7. **Edge 浏览器支持**：对于 Microsoft Edge 用户，好消息是无需下载，可以直接在Edge的插件商店找到 Vue Devtools，简化了安装过程。 8. **更新与维护**：保持 Vue Devtools 更新至最新版本是非常重要的，因为...
前端程序员chrome浏览器扩展程序插件
05-24
其中包含vue-devtools、react-devtools、angular-devtools、fehelper前端JSON助手。 谷歌chrome浏览器“扩展程序”插件（当然edge浏览器也是可以的。）
搭建Vue的开发环境，Edge浏览器安装VUE拓展工具
XunLin233的博客
09-26 1456
在vue官网中下载开发版本的vue.js文件。
Vue()安装调试插件vue-devtools
Good Luck
06-02 443
安装Vue调试插件vue-devtool
edge安装vue-devtools
03-01
要在Edge浏览器中安装Vue Devtools，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了最新版本的Edge浏览器。 2. 打开Edge浏览器并访问Vue Devtools的官方网站：https://devtools.vuejs.org/ 3. 在网站上找到并点击"Get the Chrome extension"按钮。尽管这是Chrome扩展程序，但我们可以通过一些额外的步骤在Edge中安装它。 4. 在弹出的对话框中，点击"Add to Chrome"按钮。 5. 在弹出的提示中，选择"Add extension"来确认安装。 6. 安装完成后，您将看到一个提示消息，说明Vue Devtools已成功添加到Edge浏览器。 7. 现在，打开您的Vue应用程序，并在Edge浏览器中打开开发者工具（可以使用快捷键F12）。 8. 在开发者工具的顶部导航栏中，找到一个名为"Vue"的选项卡。点击它以打开Vue Devtools面板。 9. 现在，您可以在Vue Devtools面板中查看和调试您的Vue应用程序了。 请注意，由于Vue Devtools是为Chrome浏览器设计的扩展程序，因此在Edge中使用时可能会遇到一些兼容性问题。如果您遇到任何问题，请尝试使用其他浏览器（如Chrome）来使用Vue Devtools。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值