详解vue.js的devtools安装

简介

Vue.js Devtools 是一款专门针对 Vue.js 进行开发者调试的浏览器插件，可以用于检查 Vue 组件层次结构、所有的活动组件、组件的数据、组件事件等，Vue.js Devtools 安装之后，可以大大提高我们的代码调试效率。

安装步骤

步骤一：Chrome 网上应用商店下载

在 Chrome 应用市场中搜索 Vue.js Devtools，点击「添加至 Chrome」即可。

请确保你的浏览器版本是 49 及以上。否则将无法安装 Devtools。

步骤二：使用方法

1. 开启 Vue.js 应用程序。

2. 打开 Chrome F12，切换到 Vue 面板。

3. 如果您的 Vue.js 应用程序是通过脚手架创建的，则可以通过在 Chrome 控制台输出“window.vue”来检查 Vue.js 的版本。

示例一：

console.log(window.vue);

结果：{ version: "3.1.1", compatUtils: { ...}}

1. 状态弹出窗口将显示所有绑定和自定义事件，包括状态的默认名称（如默认），状态值和组件的默认值和实例。

示例二：

• 在 Vue.js 应用程序中，请输入以下代码：

<ul>
  <li v-for="item in items" v-text="item"></li>
</ul>

• 在 Chrome 控制台中输出「$vm0」

$vm0.$data.items = [1, 2, 3];

• 刷新页面后，将看到向列表添加1、2、3三个项目。

结论

通过上面的安装和使用方式，不难看出Vue.js Devtools可以帮助我们实现Vue.js组件的快速调试。任何时候，在检测到任何问题时，请尽快测试该工具。