หนังสือ
TypeScript
บทที่ 9. การทดสอบและการแก้ไขข้อผิดพลาด
การใช้งานโปรแกรมดีบักเกอร์

TypeScript:
การใช้งานโปรแกรมดีบักเกอร์

วิธีการ:

เพื่อเริ่มใช้เดบักเกอร์กับ TypeScript สิ่งที่คุณต้องการคือ IDE ที่รองรับ (เช่น Visual Studio Code) และการตั้งค่า launch.json นี่คือตัวอย่างง่ายๆสำหรับแอปพลิเคชัน Node.js:

// app.ts
function greet(name: string) {
    console.log(`Hello, ${name}!`);
}

const userName = 'Ada';
greet(userName);

เพื่อเดบักสิ่งนี้, สร้างไฟล์ launch.json ใต้โฟลเดอร์ .vscode:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/app.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/build/**/*.js"]
        }
    ]
}

จากนั้น, ตั้งจุดหยุดในฟังก์ชัน greet ของคุณโดยการคลิกที่ด้านซ้ายของหมายเลขบรรทัดใน IDE ของคุณ กด F5 เพื่อเริ่มการเดบัก และสังเกตแอปพลิเคชันของคุณหยุดที่จุดหยุด คุณสามารถเลื่อนเมาส์ไปที่ตัวแปร, ดูนิพจน์, และเดินทางผ่านโค้ดของคุณได้อย่างง่ายดาย

ลงลึก

กลับไปในวันก่อนเมื่อสภาพแวดล้อมการพัฒนาแบบรวม (IDEs) ยังไม่ดีนักระบบการเดบักมักจะทำด้วยคำสั่งการพิมพ์ (หรือการเดบักด้วย console.log) มันทำงานได้ ประมาณนั้น แต่เหมือนกับการพยายามหาเข็มในกองหญ้าขณะที่ตามัว

เดบักเกอร์สมัยใหม่เหมือนเป็น Swiss Army knife สำหรับการตรวจสอบปัญหา ด้วยการพัฒนาของ TypeScript และ Node.js มีเดบักเกอร์หลายชนิดที่ใช้ได้ ตั้งแต่ตัวตรวจสอบแบบในตัวของ Node.js ไปจนถึงเครื่องมือพัฒนาเว็บสำหรับการเดบักทางด้านไคลเอนต์

ตัวตรวจสอบของ Node.js ทำงานโดยการติดกับแอปพลิเคชันที่กำลังรันอยู่; มันสื่อสารผ่าน Chrome DevTools Protocol ทำให้เบราว์เซอร์ Chrome ของคุณเป็นคอนโซลเดบักที่ทรงพลัง การรวมกันนี้ช่วยให้มีเซสชันการเดบักที่มีปฏิสัมพันธ์ทางภาพและละเอียดยิ่งขึ้นเมื่อเทียบกับการปฏิบัติการเดบักแบบระบบคอมมานด์ไลน์

ดูเพิ่มเติม

สำหรับการอ่านเพิ่มเติมและเคล็ดลับโปร ตรวจสอบที่:

การใช้ Shell แบบโต้ตอบ (REPL)การเขียนการทดสอบ