在VS Code中调试Quasar项目

这里重点说的是 devtool: 'source-map' 用来解决debuger定位行不准确问题

1. 首先，转到用于Chrome的调试器并仔细阅读。
2. 然后，由于Quasar是基于Vue的，所以您还需要参考VSCode调试的Vue指南用于设置调试Vue应用程序。

最好的方法是在这个页面旁边的浏览器中打开它，这样你可以在阅读这些说明的同时查看那些说明。并将更改应用到您的项目中。

Vue指南的第一步是启用源映射(source maps)。Quasar自动启用开发模式的源映射。这是一篇好文章，它描述了[webpack devtool设置]的不同值(https://webpack.js.org/configuration/devtool/)（打开或关闭源映射的一个）。Quasar默认使用_cheap-module-eval-source-map_。

虽然cheap-module-eval-source-map可能构建得更快，但它使调试更加困难，并且几乎不可能在VSCode中进行调试。在本例中，devtool的建议值为“source map”。这使得VSCode中的调试能够正常工作，因为内置chrome调试器中有完整的vue源文件，因此更容易找到原始源代码，也更容易正确定位要设置断点的行。如果要启用此功能，请将此行添加到 _quasar.config.js_文件：

// quasar.conf.js
build: {
  // ...

  // this is a configuration passed on
  // to the underlying Webpack
  devtool: 'source-map'
}

然后，您需要告诉VSCode向调试器添加配置。最简单的方法是单击操作栏上的bug图标（对于ltr语言，这是最左边的栏）。单击该bug图标后，文件树区域将切换到调试和运行区域。单击窗口标题栏中的齿轮图标，它将显示一个名为_launch.json_的文件. 这是要调试的启动应用的不同配置的地方。下面是在Chrome中启动Quasar应用程序的设置。对于Firefox版本，请查看上面提到的Vue指南。

{
  "type": "chrome",
  "request": "launch",
  "name": "Quasar App: chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}/src",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*"
  }
}

现在保存文件，然后在“调试和运行”窗格标题栏的下拉列表中选择该配置。在启动调试器之前，必须先运行应用程序。从命令行，使用quasar dev启动应用程序的dev模式。然后单击debug and run窗格中的绿色“go”按钮启动调试会话并附加到running应用程序。现在，您可以设置断点和控制step over/in/out等，所有这些都来自VSCode。您也可以启动内置的Chrome调试器，它将保持同步。如果您还安装了Vue devtools（强烈推荐），这可能会很有用。

TIP

如果您只想使用Chrome或Firefox调试器，但是您发现很难在浏览器的源代码选项卡中找到正确的源文件，那么可以在代码中使用debugger语句强制调试器停止在该行并调出正确的源代码。