VSCode 为 midwayjs 配置远程调试

发表于 分类于 ， 本文字数： 1.1k 阅读时长 ≈ 1 分钟

本文将介绍如何在 VSCode 中为 midwayjs 配置远程调试。

笔者的开发框架是这样的：源码位于 wsl 中，然后将源代码挂载到 Docker 容器内部，容器负责开发环境的运行。在开发时，使用 VSCode 远程到 wsl，然后打开源码目录进行开发。

配置步骤

  1. 在 package.json 文件中，向 dev 中添加 --inspect=0.0.0.0:9229， 即 "cross-env NODE_ENV=local mwtsc --watch --inspect=0.0.0.0:9229 --run @midwayjs/mock/app.js"

  2. 将 midwayjs 中的远程调试端口 9229 暴露到主机中

  3. 修改 tsconfig.json，在 compilerOptions 中增加 {"inlineSourceMap": true} 配置

  4. 在 .vscode/launch.json 中，添加如下配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [        
            {
                "type": "node",
                "request": "attach",
                "name": "Midway Remote",
                "address": "127.0.0.1",
                "port": 9229,
                "restart": true,
                // 本地程序所在的目录
                "localRoot": "/home/xxx/app/docker-dev-envs/midwayjs",
                // 服务器对应程序所在的目录
                "remoteRoot": "/app/midwayjs"
            }
        ]
    }

参考

本文参考以下文章，在此致以诚挚谢意！

新版本如何在chrome中调试 · midwayjs/midway · Discussion #4122

调试 | Midwayhttps://github.com/eggjs/egg/issues/4700)