Vue-devtools 大揭秘：Vue3.X 和 Vue2.X 调试工具安装及使用指南

前端基地

已于 2024-06-19 11:15:42 修改

阅读量3.9k

点赞数 36

分类专栏： Vue 3.0从入门到精通文章标签： vue.js 前端 javascript chrome devtools chrome node.js 前端框架

于 2024-06-12 14:18:14 首次发布

本文链接：https://blog.csdn.net/chinayun_6401/article/details/139596670

版权

Vue 3.0从入门到精通专栏收录该内容

26 篇文章

订阅专栏

Vue-devtools 是一款用于 Vue 应用调试的强大工具，提供组件、状态、事件等多方面调试支持。本文详细介绍了Vue2和Vue3的devtools安装和使用步骤，包括配置选项的说明，帮助开发者提高调试效率。

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

Vue-devtools介绍

Vue2.X调试工具Vue-devtools的安装

Vue2.X调试工具Vue-devtools的使用

Vue3.X调试工具Vue-devtools的安装

Vue3.X调试工具Vue-devtools的使用

Vue-devtools介绍

Vue-devtools 乃是一款构建于 Chrome 浏览器之上的插件，其主要功能是对 Vue 应用进行调试操作，通过它能够极为显著地提升我们在调试过程中的效率。

值得一提的是，Vue-devtools 所具备的视图面板中，全面涵盖了 Components（组件）、Vuex（状态）、Events（事件）、Routing（路由）、Performance（性能）、Settings（设置）、Refresh（刷新）等丰富多样的选项。

此外，该插件在实际应用中展现出了诸多优势。它不仅提供了直观便捷的调试界面，让开发者能够清晰地查看和分析应用的各个方面，而且其强大的功能特性能够助力开发者更快速地定位和解决问题，从而有效缩短开发周期，提升整体开发质量。无论是对于新手开发者还是经验丰富的专业人员来说，Vue-devtools 都无疑是一个不可或缺的得力工具，为 Vue 应用的开发和调试工作提供了坚实的支持和保障。

Vue2.X调试工具Vue-devtools的安装

第一步：进行 Vue-devtools 的安装执行：

npm i vue-devtools

第二步：在谷歌浏览器中依次进行如下操作——>点击“更多工具”——>选择“扩展程序”——>勾选“开发者模式”——>加载已解压的扩展程序——>选定“node_modules/vue-devtools/vender”，具体情况如下图所示：

第三步：安装成功截图：

第四步：重启浏览器

Vue2.X调试工具Vue-devtools的使用

示例代码如下：

第一步：引入vue.js

<script src="js/vue.js"></script>

第二步：创建受控制的区域“#app”以及 vue 实例。

<body>  
    <div id="app">  
        {{msg}}  
    </div>  
    <script>  
        Vue.config.devtools=true;  
        Vue.config.silent=true;  
        const app=new Vue({ 
            el:'#app',  
            data:{  
                msg:'vue-devtools调试工具安装与使用'  
            }  
        })  
        console.log(Vue.config);  
    </script>  
</body>

说明：Vue.config.devtools = true 这一代码检查配置项，需明确其是否允许 vue-devtools 检查代码，开发版本中该项默认是 true，生产版本默认是 false，生产版本中若设为 true 可开启检查功能。

Vue.config.silent = true 可取消 Vue 所有日志与警告。此外，善用这些配置项能依具体开发需求和场景灵活调整 Vue 应用的行为表现。

第三步：vue-devtools扩展程序添加完成后，当我们于谷歌浏览器中打开vue应用页面时，在开发者工具（F12）中将会出现一个 vue 栏目，如下图所示：

Vue3.X调试工具Vue-devtools的安装

第一步：下载 Vue-devtools 工具的 v6.0.0-beta 版本，其下载地址为：

https://github.com/vuejs/devtools/releases/tag/v6.0.0-beta.21https://github.com/vuejs/devtools/releases/tag/v6.0.0-beta.21 所下载的是谷歌版本，具体截图如下：

第二步：展开配置修改操作，找到 devtools-chrome 文件夹中的 manifest.json 文件，接着找到 persistent 这一项，并将其值设置为“true”，具体情况可参考以下截图：

第三步：在谷歌浏览器中添加 vue-devtools 扩展程序，具体的添加步骤请参考文中Vue2.X 调试工具 Vue-devtools 的安装，添加成功截图如下图所示:

Vue3.X调试工具Vue-devtools的使用

示例代码如下：

第一步：引入vue.js

<script src="js/vue.global.js"></script>

第二步：创建受控制的区域“#app”以及 vue 实例。

<body>  
    <div id="app">  
        {{msg}}  
    </div>  
    <script>  
        const app=Vue.createApp({  
            data(){  
                return{  
                    msg:'vue-devtools调试工具安装与使用'  
                }  
            }  
        })  
        app.mount('#app');     
    </script>  
</body>

第三步：vue-devtools扩展程序添加完成后，当我们于谷歌浏览器中打开vue应用页面时，在开发者工具（F12）中将会出现一个 vue 栏目，如下图所示：