如何在 nx 工作区的 VSCode 中运行 NextJS 客户端调试器

Posted 2023-03-13

【中文标题】如何在 nx 工作区的 VSCode 中运行 NextJS 客户端调试器

【英文标题】：How to run NextJS client side debugger in VSCode in nx workspace

【发布时间】：2021-12-05 17:15:26

【问题描述】：

我在 nx 工作区中运行了 2 个前端应用程序，它们都是下一个 js 应用程序。客户端调试不起作用，因为添加的所有断点和日志点都显示为 unbounded。但是附加的服务器端调试器运行良好。

我有以下用于 vs 代码的 launch.json 文件。

  // 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": [
    
      "name": "Org Admin | Server Side",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": 
        "webpack:///./*": "$workspaceRoot/apps/org-admin/*"
      
    ,
    
      "name": "Org Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3001",
      "webRoot": "$workspaceFolder/apps/org-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta",
      "sourceMaps": true,
      "sourceMapPathOverrides": 
        "webpack:///./*": "$workspaceRoot/apps/org-admin/*"
      
    ,
    
      "name": "Super Admin | Server Side",
      "port": 9230,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": 
        "webpack:///./*": "$workspaceFolder/apps/super-admin/*"
      
    ,
    
      "name": "Super Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3002",
      "webRoot": "$workspaceFolder/apps/super-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta",
      "sourceMaps": true,
      "sourceMapPathOverrides": 
        "webpack:///./*": "$workspaceRoot/apps/org-admin/*"
      
    
  ]

我猜它是由于 typescript 和 nx 工作区配置而失败的，这在某种程度上与源映射有关。

NextJS 应用程序正在调试模式下运行，因为我在 .env 文件中添加了以下内容，这是我通过查看 nx GitHub 问题获得的。

NODE_OPTIONS=--inspect=0.0.0.0:9229

以下是我的目录结构

project
├── apps
│   ├── org-admin
│   │   ├── index.d.ts
│   │   ├── jest.config.js
│   │   ├── next.config.js
│   │   ├── next-env.d.ts
│   │   ├── pages
│   │   │   ├── _app.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── public
│   │   ├── specs
│   │   │   └── index.spec.tsx
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json
│   ├── org-admin-e2e
│   │   ├── cypress.json
│   │   ├── src
│   │   │   ├── fixtures
│   │   │   │   └── example.json
│   │   │   ├── integration
│   │   │   │   └── app.spec.ts
│   │   │   └── support
│   │   │       ├── app.po.ts
│   │   │       ├── commands.ts
│   │   │       └── index.ts
│   │   └── tsconfig.json
│   ├── super-admin
│   │   ├── index.d.ts
│   │   ├── jest.config.js
│   │   ├── next.config.js
│   │   ├── next-env.d.ts
│   │   ├── pages
│   │   │   ├── _app.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── public
│   │   ├── specs
│   │   │   └── index.spec.tsx
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json
│   └── super-admin-e2e
│       ├── cypress.json
│       ├── src
│       │   ├── fixtures
│       │   │   └── example.json
│       │   ├── integration
│       │   │   └── app.spec.ts
│       │   └── support
│       │       ├── app.po.ts
│       │       ├── commands.ts
│       │       └── index.ts
│       └── tsconfig.json
├── babel.config.json
├── jest.config.js
├── jest.preset.js
├── libs
├── nx.json
├── package.json
├── package-lock.json
├── README.md
├── tools
│   ├── generators
│   └── tsconfig.tools.json
├── tsconfig.base.json
└── workspace.json

【参考方案1】：

经过大量研究，以下 launch.json 帮助我在 nx 工作区中调试 nextjs 应用程序的服务器端和客户端

  // 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": [
    
      "name": "Org Admin | Server Side",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": 
        "webpack:///./*": "$workspaceRoot/apps/org-admin/*"
      
    ,
    
      "name": "Org Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3001",
      "webRoot": "$workspaceFolder/apps/org-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta"
    ,
    
      "name": "Super Admin | Server Side",
      "port": 9230,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": 
        "webpack:///./*": "$workspaceFolder/apps/super-admin/*"
      
    ,
    
      "name": "Super Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3002",
      "webRoot": "$workspaceFolder/apps/super-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta"
    
  ]