Chào anh em, làm developer thì thời gian ngồi "bắt bug" thường nhiều gấp mấy lần thời gian viết code mới.

Nhiều anh em, kể cả những người đã code lâu năm, vẫn giữ thói quen sử dụng console.log() (với Node.js), dd() (với PHP/Laravel), hay fmt.Println() (với Golang) để in giá trị biến ra Terminal nhằm tìm lỗi.

Cách làm này không sai, nhưng nó chậm và kém hiệu quả, nhất là khi anh em phải trace các luồng dữ liệu phức tạp đi qua nhiều layer, event broker hay thao tác với database. Hôm nay, chúng ta sẽ khai phá sức mạnh của Debugger được tích hợp sẵn trong VS Code, giúp anh em bắt bug chuyên nghiệp và nhàn hạ hơn rất nhiều.

1. Tại sao nên dùng Debugger tích hợp của VS Code?

Thay vì phải sửa code (thêm lệnh in), lưu lại, đợi server reload rồi dò dẫm trong mớ log hỗn độn ở Terminal, Debugger cho phép bạn:

• Dừng chương trình (Pause) tại bất kỳ dòng code nào bằng Breakpoint.
• Kiểm tra ngay lập tức toàn bộ các biến trong scope hiện tại (kể cả các object lồng nhau phức tạp hay thông tin connection của database/Redis).
• Thay đổi giá trị biến on-the-fly (ngay lúc code đang chạy) để test các case khác nhau mà không cần restart lại server.
• Đi từng bước (Step-by-step) qua từng dòng code, chui vào tận trong lõi của thư viện (vendor/node_modules) để xem chuyện gì thực sự xảy ra.

2. File launch.json - Trái tim của hệ thống Debug

Để bắt đầu, bạn cần cho VS Code biết bạn đang code bằng ngôn ngữ gì và muốn chạy chương trình ra sao. Tất cả được cấu hình trong file .vscode/launch.json. Chuyển sang tab Run and Debug (phím tắt Ctrl + Shift + D), click vào "create a launch.json file".

Ví dụ, nếu bạn đang làm một project backend bằng Node.js, file launch.json cơ bản sẽ trông như thế này:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Khởi chạy Backend Node.js",
            "program": "${workspaceFolder}/src/index.js",
            "skipFiles": ["<node_internals>/**"]
        }
    ]
}

Mẹo: VS Code hỗ trợ tự động tạo launch.json cho hầu hết các ngôn ngữ phổ biến như Go, PHP (thông qua Xdebug), Python, v.v.

3. Các thao tác Debug "Sống Còn"

Một khi đã bấm F5 để khởi chạy chế độ Debug, thanh công cụ Debug (Debug Toolbar) sẽ xuất hiện. Hãy thuộc lòng các phím tắt sau:

• F9 (Toggle Breakpoint): Đánh dấu đỏ ở đầu dòng code. Khi chương trình chạy đến dòng này, nó sẽ bị "đóng băng" ngay lập tức. Cực kỳ hữu ích khi bạn muốn dừng luồng xử lý giỏ hàng ngay trước khi query vào Database để kiểm tra payload.
• F10 (Step Over): Chạy sang dòng code tiếp theo. Nếu dòng hiện tại là một function, nó sẽ chạy xong function đó rồi mới dừng ở dòng dưới.
• F11 (Step Into): Chui thẳng vào bên trong function đang gọi. Cần thiết khi bạn viết Clean Architecture và muốn nhảy từ Controller xuống Use Case hoặc Repository để xem logic.
• Shift + F11 (Step Out): Thoát ra khỏi function hiện tại và quay về nơi gọi nó.
• F5 (Continue): Cho phép chương trình chạy tiếp cho đến khi gặp Breakpoint tiếp theo.

4. Tận dụng tối đa tab DEBUG CONSOLE (Từ Bài 1)

Nhớ lại Bài 1 khi chúng ta giải phẫu Bottom Panel, tab DEBUG CONSOLE chính là vũ khí tối thượng lúc này.

Khi code đang bị tạm dừng bởi Breakpoint, thay vì chỉ có thể nhìn các biến ở tab Variables bên trái, bạn có thể click xuống DEBUG CONSOLE và trực tiếp gõ code!

• Bạn có thể gõ tên biến để kiểm tra giá trị hiện tại của nó.
• Bạn có thể thực thi các hàm thao tác chuỗi/mảng ngay tại chỗ để test logic trước khi viết vào file.
• Nếu bạn đang check một logic xử lý thanh toán, bạn có thể gõ thẳng user.balance = 50000 vào Debug Console để ép giá trị biến, sau đó bấm F10 đi tiếp để xem hệ thống phản ứng thế nào với số dư giả lập này.

Lời kết

Kết thúc Bài 3, hy vọng anh em đã sẵn sàng xóa bỏ những dòng console.log() hay dd() thừa thãi ra khỏi mã nguồn của mình. Code sạch hơn, fix bug nhanh hơn và nhìn chuyên nghiệp hơn rất nhiều!