别在谷歌上下载Vue.js.devtools了，手把手教大家在edge浏览器上下载并使用Vue.js.devtools（6.6.3版本）

编程小白（努力中）

已于 2025-05-18 20:24:38 修改

阅读量385

点赞数 8

文章标签： edge vue.js 前端

于 2025-05-18 15:45:34 首次发布

本文链接：https://blog.csdn.net/2401_88555685/article/details/148044432

版权

提示：推荐使用最新版本的edge浏览器

一、下载

进入极简插件官网：https://chrome.zzzmh.cn，点击左侧导航栏第二个"插件",往下滑找到"Vue.js.Devtools",点击Edge专用，点击右上角获取，获取后弹出以下窗口，点击添加拓展

然后点击浏览器右上角三个点

点击拓展，然后点击管理拓展，找到Vue.js.devtools，点击详细信息，勾选左侧开发人员模式和允许访问文件URL

二、使用

打开Vscode,复制以下代码，测试能否使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        账户：<input v-model="username" type="text"> <br><br>
        密码：<input v-model="password" type="password"> <br><br>        
        <textarea>{{username+password}}</textarea>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: ''
            }
        })
    </script>
</body>
</html>

复制完，按ALT+B快捷键(在默认浏览器中打开)，将默认浏览器设为edge,打开后按F12/右键选择检查，查看是否出现Vue，如下图所示，出现的话就代表成功了，可自行添加数据进行测试，如果没出现说明失败了，查看是否按照以上步骤完成下载和使用，查看自己edge浏览器的版本是否是最新版本，默认浏览器是否设为edge。