使用 Visual Studio Code 调试 GWT

Question

我正在尝试从 Eclipse 切换到 VS Code，因为我一直在将 VS Code 用于较小的脚本和类似的东西，我真的很喜欢它。在工作中，我们构建和维护一个使用 GWT 构建的 Web 应用程序，因此能够使用 Dev Mode 和 Super Dev Mode 之类的东西进行调试对我来说很重要。我一直在寻找与 Eclipse 可用的类似的 GWT 扩展，但似乎没有。有没有办法模仿 Eclipse 中的 Dev Mode 和 Super Dev Mode 所做的事情，但是使用 VS Code？

Answer 1

假设您运行的是超级开发模式，下面是一个 VS Code 调试启动配置的示例：

"launch": {
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8888",
      "sourceMapPathOverrides": {
        "http://localhost:9876/sourcemaps/MY_MODULE/com/path/to/class/*": "${workspaceFolder:MY_MODULE}/src/com/path/to/class/*",
        "http://localhost:9876/sourcemaps/MY_MODULE/com/some/other/class/*": "${workspaceFolder:OTHER_MODULE}/src/com/some/other/class/*",
    },
    "smartStep": true,
    "skipFiles": ["MY_MODULE-*.js"], // I choose to skip this file because it is very large and not handled well by VS Code
    "trace": "verbose",
    "webRoot": "${workspaceFolder:MY_MODULE}/war" // path to where your war is built out to
  }
],

获得要使用的源映射路径覆盖的一个好方法是浏览实际的源映射。运行超级开发模式，访问http://localhost:9876/sourcemaps 并将这些路径与您的本地目录匹配。在上面的示例中，我们有一个多项目工作区，其中一些项目位于不同的路径中，但仍位于相同的“MY_MODULE”下。因此，上面的示例位于 Workspace 配置文件中。如果您不使用工作区，则需要删除 ${workspaceFolder:X} 或替换为更合适的变量。