基于Webpack的Vue项目如何在浏览器调试工具中查看应用数据？

嘿，刚接触Web开发的话，浏览器调试工具确实需要点时间摸索，我来帮你拆解这两个场景的解决办法～

一、Webpack构建的Vue项目调试数据 #

这类项目因为经过打包，最好用Vue Devtools来高效查看数据，步骤如下：

• 先在Chromium浏览器安装Vue Devtools扩展（直接在浏览器应用商店搜就能找到官方版本）。
• 确保你的项目处于开发环境：Webpack构建时，mode要设为development，或者process.env.NODE_ENV的值是development——生产环境的Vue会被压缩，Devtools无法识别。一般Vue CLI创建的项目，运行npm run serve就是开发模式，默认满足这个条件。
• 打开浏览器调试工具（按F12），你会看到多了一个「Vue」标签：
  • 点击进去后能看到组件树，选中任意组件，右侧面板就能查看它的data、props、computed等数据，还能实时修改数据看页面变化。
  • 如果项目用了Vuex，还会有「Vuex」标签，能查看全局状态、追踪mutations/actions的执行情况。

二、vue init simple创建的Vue 2.x项目查看数据 #

这个模板是最简化的Vue项目，没有打包流程，直接通过脚本引入Vue，查看数据有两种方式：

方式1：修改代码保存实例引用 #

默认生成的代码里，Vue实例是直接创建的，没有赋值给变量，比如：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

你可以把它改成：

// 把实例赋值给全局变量vm
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

然后刷新页面，在控制台直接输入vm就能看到整个实例，输入vm.$data查看所有数据，或者直接vm.message访问单个数据项。

方式2：用Vue Devtools查看（无需改代码） #

因为这个模板默认引入的是Vue开发版本的脚本（比如<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>），只要你装了Vue Devtools，打开调试工具的「Vue」标签，就能看到根组件的所有数据，和Webpack项目的用法一致。

另外，也可以在控制台输入Vue.prototype.$root获取根实例，然后通过$root.$data查看数据。

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