阅读 1407

怎样用Vue Devtools调上线的页面

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

第一步:

我们用掘金的页面走一波,首先得到Vue类,一般来说Vue的源码都被打包到了vendor.xxx.js文件中。我们可以这样得到Vue类。

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

看图:

得到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里面看到组件了

看图:

Refresh Vue Devtools

置换挂载Dom 结点

总结:

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