TLDR 更新:

正如评论中提到的@hzmming- 现在有一个 chrome 扩展“Vue force dev”,您可以使用它来自动化我在此处描述的内容。

每隔一段时间,我们就需要在生产环境中调试一些东西。但是在禁用 devtools 的情况下部署 Vue.js,您将看到以下消息:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--EQXIlwVu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws .com/i/oaxr31jtai30gq2e7z60.png)

现在,如果您无法在开发环境中重现该错误,则可以使用 PITA 进行调试。

但是,由于“它只是 JavaScript”——我们可以轻松地“破解大型机”。我们所要做的就是找到 Vue 的加载位置并覆盖一个选项:

Vue.config.devtools = true

进入全屏模式 退出全屏模式

大多数打包程序会出于许可目的保留源文件中的注释,因此我们可以在所有文件中搜索特定注释:

 * Vue.js v2.6.11
 * (c) 2014-2019 Evan You
 * Released under the MIT License.
 */

进入全屏模式 退出全屏模式

要在 chrome devtools 中搜索所有源,请单击点并选择search:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--BVdJXSfi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/t3wcnvw4nswlb4b07spo.png)

无需复制确切的版本,只需搜索“Vue.js”即可在大多数情况下为您提供正确的行。它应该类似于:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--UlBR5ufT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/i/qdtwf9cu38o4dew24naa.png)

在此行设置断点并重新加载页面。如果它全部缩小并在一行中,您需要使用“跳过下一个函数调用(F10 / CMD ')”跳到它的最后。如果它没有被缩小,你需要在整个 Vue 代码块之后设置一个断点。

现在通过查看我们范围内的变量,我们需要找到 Vue 对象。使用 Webpack Vue 应该在导出中,如下所示:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--eG-ogvs5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/i/eyfeufeakppfuxgb3z5r.png)

在我们的例子中,我们看到对象t的属性exports就是我们的 Vue 对象。

现在转到控制台,用true覆盖 devtools 选项:

可以删除我们的断点并恢复运行时 - 就是这样!只需关闭开发人员工具并再次打开即可看到我们可用的 Vue 选项卡!

解决方案可能因您的设置而异,如果您有问题,请发表评论,我可能会在帖子中添加更多信息。

❤️