怎样用Vue Devtools调上线的页面

Production 打包输出的Vue项目怎样使用Vue Devtools了?

第一步：

咱们用掘金的页面走一波，首先获得Vue类，通常来讲Vue的源码都被打包到了vendor.xxx.js文件中。咱们能够这样获得Vue类。

• 咱们打开chrome 开发者工具，找到这个文件，而后搜索prototype.$nextTick，
• 在搜索的代码上打上断点，而后刷新页面
• 在控制台中保存Vue 类

看图：

第二步：

• 在console中执行代码vv.config.devtools=true;__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', vv);
• 关闭console 而后从新打开，咱们能够看见在chrome 的devtool 多了一个Vue Tab
• 这个时候就能够使用Vue Devtools了，若是看见的是一片空白，请继续走下面的步骤

第三步：

• 找到Vue挂载的Dom根节点，通常都是app节点
• 在Vue Devtools的backend.js中找到t.childNodes这一行代码，打断点
• 在Vue Devtools调试面板中点击刷新按钮
• pause在断点处，而后在控制台中执行t=app;
• 放开断点，让代码继续执行，好了如今你能够在Vue Devtools里面看到组件了

看图：

总结：

这个流程有一点复杂，通常没有什么用，可是若是你的项目在正式服务中有BUG，或者某些服务本地开发没法模拟，碍于特殊的数据环境，又苦于production的Vue项目不能使用调试，你能够用这个方法来快速的定位问题，Have a fun time!