Vue 2调试时如何快速获取data中变量的值？

• 控制台直接查询：断点触发后切换到Console标签，直接输入this.dialogAddConfigNodeButtonEnabledDisabled回车，就能立刻拿到变量当前值，不用在this对象里逐层查找。
• 添加Watch表达式：在Sources标签右侧的Watch面板，点击「+」按钮，输入this.dialogAddConfigNodeButtonEnabledDisabled。之后每次断点停住，这个变量的最新值都会自动显示在Watch列表里，随时查看。
• 用Vue Devtools直接查看：打开Vue Devtools的Components面板，选中当前调试的组件，在Data区域里直接找这个变量（可以用面板的搜索框输入变量名快速定位），这里的变量是按Vue的data分类整理的，比Chrome原生工具里的this结构清晰得多。
• 临时赋值为局部变量：在调试的代码段里临时加一行const btnState = this.dialogAddConfigNodeButtonEnabledDisabled，调试时悬停btnState就能直接看值，调试完成后删掉这行即可，适合临时快速排查。

内容的提问来源于stack exchange，提问作者fall