การดีบัก - ดีบักและรีสตาร์ทเมื่อมีการเปลี่ยนแปลง TypeScript ใน VSCode

ฉันต้องการดีบักและตั้งเบรกพอยต์ในไฟล์ TypeScript และรีสตาร์ทตัวดีบักเมื่อมีการเปลี่ยนแปลง (เหมือน nodemon คอยเฝ้าดูการเปลี่ยนแปลง) ด้วยการตั้งค่าตัวดีบักของ VSCode

จนถึงตอนนี้ฉันสามารถรันผ่าน VSCode และรีสตาร์ทเมื่อมีการเปลี่ยนแปลงโดยไม่ต้องดีบั๊ก

นี่คือ launch.json ของฉัน:

{
    "name": "Launch Typescript Server Debugger",
    "request": "launch",
    "type": "node",
    "cwd": "${workspaceRoot}",
    "protocol": "inspector",
    "stopOnEntry": false,
    "program": "${workspaceRoot}/node_modules/nodemon/bin/nodemon",
    "args": [
      "--watch",
      "src/**/*.ts",
      "--ignore",
      "src/**/*.spec.ts",
      "--exec",
      "${workspaceRoot}/node_modules/.bin/ts-node",
      "--inspect",
      "src/app.ts"
    ],
    "restart": true,        
    "env": { "NODE_ENV": "dev"}
  }      

มีไอเดียอะไรไหม?

คำตอบ #1

สงสัยว่าทำไมถึงมีความคิดเห็น WTF มากมายขนาดนี้กับคำถามที่ธรรมชาติเหมือนปกตินี้ นี่คือวิธีที่ฉันทำมัน:

เราต้องการ nodemon เพื่อรีสตาร์ทแอปของเราหลังจากมีการเปลี่ยนแปลง, เราต้องการ ts-node/register เพื่อรัน TypeScript ของเรา, และเราต้องการตั้งค่าสคริปต์ตัวเรียกใช้งานของ vscode เพื่อเชื่อมต่อดีบักเกอร์ใหม่หลังจากแอปถูกคอมไพล์อีกครั้ง ดังนั้นติดตั้ง nodemon, ts-node และเพิ่มสคริปต์นี้ใน package.json:

"watch:debug": "nodemon --inspect=5858 -e ts,tsx --exec node -r ts-node/register ./src/index.ts"

จากนั้นใน launch.json ให้เพิ่มการกำหนดค่า:

{
  "name": "Attach to Process",
  "type": "node",
  "request": "attach",
  "restart": true,
  "port": 5858,
  "outFiles": [],
  "sourceMaps": true
},

นั่นแหละ ตอนนี้ฉันสามารถเริ่มแอปของฉันด้วย yarn watch:debug และแนบดีบักเกอร์ได้แล้ว หากคุณยังพบปัญหา ให้ตรวจสอบที่รีโป Github ของฉันที่นี่

คำตอบ #2

คุณควรลองดู ts-node-dev ซึ่งในความเห็นของผมมันเร็วกกว่า nodemon ในแง่ของการเฝ้าดูการคอมไพล์ เพราะมัน แบ่งปัน กระบวนการคอมไพล์ Typescript ระหว่างการรีสตาร์ท ด้านล่างเป็นตัวอย่างการตั้งค่า launch.json ของ vscode เพื่อให้คุณสามารถตั้ง break point (debug) รวมถึงรีโหลดเมื่อมีการเปลี่ยนแปลงได้

{
  "version": "1.0.0",
  "configurations": [
    {
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "name": "Local Server",
      "restart": true,
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ts-node-dev",
      "skipFiles": [ "<node_internals>/**" ],
      "type": "node",
      "runtimeArgs": [ "--respawn" ],
      "args": [ "${workspaceFolder}/src/script/local.server.ts" ]
    }
  ]
}

ตอนนี้คุณสามารถกด F5 หรือใช้แผงดีบักเพื่อเริ่มการดีบัก/รีโหลดแบบสดได้

ฉันห่อหุ้มไลบรารีขนาดเล็กสำหรับสิ่งนี้ไว้ให้ ถ้าคุณเกิดพัฒนาโดยใช้ aws lambda

https://github.com/vcfvct/ts-lambda-local-dev