Vue devtools的安装与调试（纯新手向教程）

最新推荐文章于 2025-06-22 12:06:33 发布

原创最新推荐文章于 2025-06-22 12:06:33 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #前端 #js框架

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文是针对初学者的Vue devtools安装与使用的详细教程。首先，通过链接在Chrome浏览器中安装Vuejs-devtools插件。接着，调整浏览器扩展设置允许文件访问网址。在完成配置后，可以通过F12在Vue应用中启用调试工具。注意，仅开发版Vue支持此工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其他vue相关文章可以在我个人分类中的vue.js部分查看

Vue devtools是一款方便与vue开发和调试的工具，然后介绍一下安装过程。官方github

下面来介绍详细安装步骤：

step1：安装vue插件(https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

可使用谷歌访问助手或其他方式来打开应用商店，然后来到该工具的页面，点击添加到Chrome（这里我已经安装过了，所以显示的是移除）或是找到安装包离线啊安装。
在这里插入图片描述
然后就可以在浏览器右上角看到一个V的图标

step2：调整配置

在这里插入图片描述
右键拓展程序，点击管理拓展程序，勾选允许文件访问网址。

然后在本地找到一个叫manifest.json的文件, 这个文件大约在这个路径下：C:\Users\Invoker\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\5.1.1_0可以利用Windows的搜索功能直接搜索nhdogjmejiglipccpnnnanhbledajbpd这个文件夹然后向下点击就ok了
在这里插入图片描述
然后打开manifest.json，找到如下片段（就在文件最前面）修改其中的true为false，点击保存。最后重启浏览器。

"background": {
      "persistent": true,
      "scripts": [ "build/background.js" ]
   },

step3：使用

在一个使用Vue的网页上点击 F12 就可以在里面看到vue，然后点进去可以看到如下界面，然后就可以使用了。这里要注意的是一定要使用开发版本的vue，如果使用生产版本，是不支持通过vue来进行查看调试的。
在这里插入图片描述