Login

Dùng debugger trong VS Code thay vì rải console.log khắp nơi

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Rải console.log hoặc print khắp code là cách debug quen thuộc của hầu hết người mới học, và nó vẫn có chỗ dùng. Nhưng khi chương trình phức tạp hơn, debugger mới là công cụ giúp bạn nhìn thấy mọi thứ cùng lúc mà không phải sửa code. Bài này hướng dẫn dùng debugger trong VS Code từ cơ bản.

Debugger làm được gì mà console.log không làm được?

  • Dừng chương trình tại đúng dòng bạn muốn để quan sát trạng thái.
  • Xem mọi biến trong phạm vi hiện tại mà không cần đoán trước biến nào cần in.
  • Chạy từng dòng để theo dõi luồng thực thi.
  • Xem call stack: hàm nào đã gọi hàm hiện tại.
  • Không phải xóa log sau khi sửa xong, vì bạn không thêm gì vào code.

Bước 1: Đặt breakpoint

Mở file code và nhấp vào lề bên trái số dòng, một chấm đỏ xuất hiện. Đó là breakpoint, chương trình sẽ dừng ngay trước khi thực thi dòng này. Bạn cũng có thể nhấn F9 để bật tắt breakpoint tại dòng đang đặt con trỏ.

Ví dụ với đoạn code Node.js sau, đặt breakpoint ở dòng total += price:

function sumPrices(items) {let total = 0;for (const item of items) {const price = item.price * item.qty;total += price;}return total;}console.log(sumPrices([{ price: 10, qty: 2 }, { price: 5, qty: 3 }]));

Bước 2: Chạy ở chế độ debug

Nhấn F5. Với Node.js, VS Code thường tự nhận ra file và chạy được ngay. Với các ngôn ngữ khác (Python, PHP, Java...) bạn cần cài extension tương ứng. Khi cần cấu hình riêng, VS Code tạo file .vscode/launch.json, ví dụ:

{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Chay file hien tai","program": "${file}"}]}

Bước 3: Điều khiển luồng chạy

Khi chương trình dừng ở breakpoint, thanh công cụ debug xuất hiện với các nút chính:

NútPhímTác dụng
ContinueF5Chạy tiếp đến breakpoint kế
Step OverF10Chạy dòng hiện tại, không đi vào hàm con
Step IntoF11Đi vào bên trong hàm được gọi ở dòng này
Step OutShift+F11Chạy hết hàm hiện tại, quay về nơi gọi
RestartCtrl+Shift+F5Khởi động lại phiên debug
StopShift+F5Dừng debug

Bước 4: Quan sát dữ liệu

Bảng bên trái cung cấp nhiều khung hữu ích:

  • Variables: giá trị các biến local và global ở thời điểm dừng.
  • Watch: nhập biểu thức bạn muốn theo dõi, ví dụ total hoặc items.length, và xem nó đổi qua từng bước.
  • Call Stack: chuỗi hàm đã dẫn đến đây; nhấp vào từng mức để xem biến ở mức đó.
  • Debug Console: gõ biểu thức bất kỳ để tính ngay trong ngữ cảnh đang dừng.

Các loại breakpoint nâng cao

  1. Conditional breakpoint: chuột phải lên chấm đỏ, chọn Edit Breakpoint, nhập điều kiện như item.qty > 2. Chương trình chỉ dừng khi điều kiện đúng, rất hữu ích với vòng lặp hàng nghìn lần.
  2. Logpoint: in thông điệp ra console mà không dừng, giống console.log nhưng không sửa code.
  3. Hit count: dừng ở lần chạy thứ n của dòng.
  4. Exception breakpoint: dừng đúng lúc có exception ném ra, bạn thấy ngay trạng thái dẫn đến lỗi.

Khi nào vẫn nên dùng log?

Log vẫn có giá trị trong một số trường hợp: lỗi chỉ xảy ra trên server production nơi không gắn debugger được, luồng bất đồng bộ cần xem thứ tự thời gian, hoặc khi bạn cần ghi lại vết để phân tích sau. Điều quan trọng là chọn công cụ đúng cho việc: debugger để khám phá lỗi lúc phát triển, log có cấu trúc để quan sát hệ thống chạy thật.

Kết luận

Hãy thử debugger ngay với đoạn code nhỏ phía trên: đặt breakpoint, nhấn F5, bấm F10 vài lần và quan sát biến total thay đổi. Sau vài lần bạn sẽ thấy việc tìm lỗi nhanh và chính xác hơn rất nhiều so với đoán mò bằng log.

Thực hành debugger sẽ dễ hơn khi có bài tập cụ thể. Bạn có thể xem thêm các khóa học lập trình tại codebem.com để luyện tay với nhiều ngôn ngữ.

author_photo
Nguyễn Đình Cường

0 comment