node.js - วิธีการดีบักโค้ดหลังจาก await ใน Typescript ใน Vscode?

ฉันกำลังใช้ Vscode 1.33.1, Node 11.12, Typescript 3.4.3, vscode-chrome-debug-core 6.7.46 และฉันกำลังพยายามดีบักโปรเจกต์ React Native

ตราบใดที่ฉันไม่เจอ await ทุกอย่างทำงานได้อย่างสมบูรณ์ อย่างไรก็ตาม เมื่อฉันเจอบรรทัดที่มี await ฉันจะไม่เจอจุดหยุดใด ๆ หลังจากบรรทัด await (รวมถึงบรรทัด await ด้วย) โค้ดทำงานตามปกติ แต่ดีบักเกอร์เกิดปัญหา หากฉันวางจุดหยุดเพียงก่อนบรรทัด await และพยายาม step in/over/out มันจะกระโดดไปยังโค้ด index.bundle ที่ยุ่งเหยิง

สิ่งนี้เกิดขึ้นในหลายตำแหน่งในแอปของฉัน ดังนั้นจึงไม่ใช่กรณีที่เกิดขึ้นเพียงจุดเดียวเช่นกัน

นี่คือการกำหนดค่าที่กำลังใช้งานของฉันใน launch.json:

{
    "name": "Debug iOS (sim)",
    "program": "${workspaceRoot}/.vscode/launchReactNative.js",
    "type": "reactnative",
    "request": "launch",
    "platform": "ios",
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/.vscode/.react",
    "smartStep": true,
    "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "${workspaceFolder}/lib/**/*.js",
        "<node_internals>/**/*.js"
      ]
},

จากที่เห็นจากการตั้งค่า ผมได้ลองใช้ smartStep แล้ว (ซึ่ง Vscode บอกว่าไม่อนุญาตอยู่ดี), skipFiles (มันก็ข้ามไฟล์จริง ๆ เว้นแต่ผมจะเข้ามาด้วยตนเอง ดังนั้นมันทำงาน แต่ไม่ได้แก้ปัญหา) ผมยังได้ดูเรื่อง Debug Node.js Async/Await กับ Typescript+VSCode แต่ผมก็ได้ลอง smartStep แล้วและข้อกังวลของคำถามนั้นก็เป็นเรื่องเก่าและแก้ไขไปแล้วหลายเวอร์ชันก่อนหน้านี้

ฉันจะดีบักโค้ด Typescript ที่มี await อย่างถูกต้องได้อย่างไร?

อัปเดต: เมื่อฉันข้ามการดีบัก/การตั้งค่าของ Vscode และดีบักใน Chrome และเทอร์มินัลทั่วไป (เช่น react-native run-ios) มันทำงานได้อย่างสมบูรณ์แบบ ดังนั้นปัญหาน่าจะอยู่ที่ Vscode หรือการตั้งค่าของมัน

อัปเดต 2: ฉันกำลังตั้งเป้าไปที่ ES2017 และนี่คือ tsconfig ของฉัน:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "jsx": "react-native",
    "strict": true,
    "noImplicitAny": false,
     "moduleResolution": "node",
     "baseUrl": "./app",
     "paths": {
       "assets/*": ["assets/*"],
       "components/*": ["components/*"],
       "navigation/*": ["navigation/*"],
       "utils/*": ["utils/*"],
       "views/*": ["views/*"],
       "types/*": ["types/*"],
       "services/*": ["services/*"],
       "state/*": ["state/*"],
       "constants/*": ["constants/*"]
     },
     "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

คำตอบ #1

สำหรับการดีบัก ผมแนะนำให้คุณใช้ ndb (Node Debugger) จาก Google มันใช้เครื่องมือพัฒนา (dev tools) จาก Google Chrome บนโปรเจกต์ Node ของคุณ

เมื่อคุณติดตั้ง ndb อย่างถูกต้องแล้ว คุณสามารถรันไฟล์ของคุณได้อย่างง่ายดายผ่าน: ndb node index.js เป็นต้น

มันจะเริ่มตัวดีบักเกอร์โดยอัตโนมัติและรันคำสั่งของคุณ:

แหล่งภาพ: https://github.com/GoogleChromeLabs/ndb/blob/v1.1.4/README.md

สำหรับตัวผมเอง ผมคิดว่านี่ดีกว่าตัวดีบักของ VSCode มาก

เนื่องจากคุณต้องการรันไฟล์ TypeScript คุณควรเพิ่ม ts-node เป็น devDependency ใน package.json ของคุณ ซึ่งจะช่วยให้คุณรันไฟล์ TypeScript ได้โดยไม่ต้องคอมไพล์

คุณสามารถใช้ ndb แบบนี้ได้เลย: ndb ts-node index.ts

อย่างไรก็ตาม TypeScript ยังไม่ได้รับการสนับสนุนอย่างสมบูรณ์ในดีบักเกอร์ใด ๆ ในตอนนี้ หากคุณต้องการฟังก์ชันการดีบักครบถ้วน คุณก็น่าจะดีบักเวอร์ชัน JavaScript ที่คอมไพล์แล้ว - คุณสามารถปรับ tsconfig.json ของคุณให้โค้ดอ่านได้ง่ายขึ้นบ้าง

node.js - วิธีการดีบักโค้ดหลังจาก await ใน Typescript ใน Vscode?

คำตอบ #1

บทความที่เกี่ยวข้อง