【发布时间】：2020-09-22 16:41:14
【问题描述】：
我正在开发 VueJS / Express 应用程序，进入比我以前做过的更高级的 Web 开发。我使用VSCode，并在同一个项目中开发后端和前端。我可以将 VSCode 调试器用于后端工作，并将 Chrome 调试器用于前端。
VSCode 效果很好。故事结束。
Chrome 功能强大，但很古怪。我最终调试了 Chrome 调试器正在发生的事情。再加上难以理解的 Vue 内部结构，它们总是弹出来，增加了另一个必须通过（或忽略）的级别。但是我遇到的最大问题是我无法检查组件脚本中的实例变量，只能检查断点所在函数的本地变量。这将我的过程减少为执行大量一次性 console.log() 语句，其中一个人只是在快速检查“this.[anything]”实例变量。
几个月来我一直在忍受这个问题，但最近进行了一些重构，这让我的进度慢了下来，所以我正在寻找一种方法可以克服这个障碍并加快我的调试速度过程。
有人有建议吗？有没有办法设置 Chrome 以启用检查对象变量？ Vue前端开发有没有更高效的调试方法或工具？
除此之外，将前端和后端代码组合到一个项目中非常棒。 VSCode 摇滚。
【问题讨论】：
-
我可以推荐chrome.google.com/webstore/detail/vuejs-devtools/…。它不是一个一体化的解决方案，但它可以加快一些调试任务，
-
我使用 vuejs devtools，它有时很有帮助。我觉得我错过了一些东西，无法检查我正在调试的函数中使用的对象实例中的变量。 Console.log 有效，但它是一种低效、原始的方式。
-
我发现有时使用 Watch 变量比在代码中将鼠标悬停在变量上更有机会显示变量的值。
标签： javascript vue.js visual-studio-code chrome-debugging