怎样用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!

转载于:https://juejin.im/post/5b8f6c245188255c5546cef0