Series VS Code Bài 3: Refactoring Thần Tốc Và Nghệ Thuật Debug Không Dùng "Print"

Khi dự án của bạn phình to lên hàng ngàn dòng code, việc quản lý và tìm sửa lỗi sẽ trở thành ác mộng nếu bạn vẫn giữ những thói quen cũ. Đã bao nhiêu lần bạn phải dùng tính năng Tìm & Thay thế (Find & Replace) để đổi tên một cái hàm, để rồi làm hỏng luôn cả những file không liên quan? Đã bao nhiêu lần bạn chèn hàng chục dòng console.log(), var_dump() hay fmt.Println() vào code, để rồi lúc deploy lên Production lại quên xóa và làm lộ thông tin nhạy cảm?

Hôm nay, hãy để VS Code chỉ cho bạn cách làm việc của một chuyên gia thông qua hai vũ khí: Refactoring thông minh và Trình Debug chuyên nghiệp.

1. Refactoring Thông Minh: Đổi Tên Toàn Cục Và Trích Xuất Hàm

Nhiều bạn thường nhầm lẫn giữa việc dùng Ctrl + D (chọn từ trùng nhau) với việc đổi tên biến. Ctrl + D chỉ đơn thuần là tìm kiếm text. Nếu ở một file khác cũng có một từ trùng tên nhưng thuộc về một ngữ cảnh hoàn toàn khác, Ctrl + D sẽ phá nát code của bạn.

Phím tắt thần thánh: F2 (Rename Symbol)

Nhờ vào kiến trúc LSP (Language Server Protocol) mà chúng ta đã nói ở Bài 1, VS Code thực sự "hiểu" cấu trúc code của bạn.

• Khi bạn đặt con trỏ chuột vào một tên biến, tên hàm hoặc tên Class và ấn F2, sau đó nhập tên mới và ấn Enter.
• VS Code sẽ tự động lùng sục khắp toàn bộ dự án, tìm chính xác những nơi biến đó được sử dụng (kể cả ở các file khác) để đổi tên đồng bộ. Những từ trùng tên nhưng ở scope khác sẽ được giữ nguyên an toàn tuyệt đối.

Trích xuất hàm trong 2 giây (Extract Method) Khi bạn viết một đoạn code quá dài trong một hàm và muốn tách một phần logic ra thành một hàm con riêng biệt để tái sử dụng:

1. Bôi đen đoạn code muốn tách.
2. Ấn tổ hợp phím Ctrl + . (Mac: Cmd + .) để mở menu Quick Fix.
3. Chọn Extract to function in global scope hoặc Extract to method.
4. VS Code sẽ tự động cắt đoạn code đó ra, tạo một hàm mới ở bên dưới, tự động tính toán các tham số cần truyền vào và thay thế đoạn code cũ bằng một lời gọi hàm gọn gàng.

2. Tạm Biệt console.log và var_dump: Làm Chủ Trình Debug

Việc dùng lệnh in log để tìm lỗi (Print Debugging) giống như việc bạn cố gắng nhìn qua một khe cửa hẹp. Bạn chỉ thấy được dữ liệu tại đúng thời điểm đó. Nếu muốn xem bước tiếp theo dữ liệu biến đổi thế nào, bạn lại phải viết thêm một dòng log nữa và chạy lại từ đầu. Quá lãng phí thời gian!

Hãy nhấn vào biểu tượng chiếc bọ và nút Play bên thanh trái (Ctrl + Shift + D) để mở giao diện Run and Debug.

Trụ cột 1: Breakpoint (Điểm dừng dòng thời gian) Thay vì chèn lệnh in log, hãy rê chuột vào lề trái của dòng code (cạnh số dòng) và click vào để hiện lên một chấm đỏ. Đó chính là Breakpoint.

• Khi bạn chạy ứng dụng ở chế độ Debug, chương trình sẽ chạy đến đúng dòng đó và đóng băng toàn bộ hệ thống lại.
• Lúc này, dòng thời gian dừng lại. Bạn có thể thong thả nhìn sang bảng Variables ở bên trái để xem tại thời điểm này, tất cả các biến trong hệ thống đang mang giá trị là gì mà không cần in ra màn hình.

Trụ cột 2: Các nút điều khiển dòng thời gian Khi code đã dừng tại Breakpoint, trên đỉnh VS Code sẽ xuất hiện một thanh công cụ nhỏ giúp bạn "bước đi" trong code:

• Step Over (F10): Cho phép bạn chạy tiếp xuống dòng bên dưới.
• Step Into (F11): Nếu dòng hiện tại là một lời gọi hàm, nút này sẽ đưa bạn chui thẳng vào bên trong cái hàm đó để xem chi tiết.
• Step Out (Shift + F11): Chạy nốt hàm hiện tại và nhảy ngược trở ra ngoài hàm cha.
• Continue (F5): Thả xích cho chương trình chạy tiếp bình thường cho đến khi gặp Breakpoint tiếp theo.

Tuyệt chiêu giấu kín: Logpoint (In log không để lại dấu vết)

Nếu bạn đang debug một hệ thống đang chạy và không muốn làm đóng băng ứng dụng (vì sẽ làm gián đoạn trải nghiệm người dùng khác), nhưng vẫn muốn xem giá trị của biến? Hãy dùng Logpoint.

• Click chuột phải vào lề dòng code, chọn Add Logpoint.
• Nhập thông điệp bạn muốn in ra, ví dụ: Giá trị hiện tại của user là: {user.name}.
• Khi ứng dụng chạy qua dòng này, nó sẽ tự động in dòng chữ đó ra tab Debug Console của VS Code nhưng không hề dừng chương trình và không hề chỉnh sửa file code gốc của bạn. Khi debug xong, bạn chỉ cần tắt Logpoint đi là sạch sẽ!

Tóm lại là...

Sử dụng thành thạo F2 để Refactor giúp bạn tự tin tái cấu trúc hệ thống mà không sợ hiệu ứng cánh bướm làm lỗi code ở nơi khác. Trong khi đó, việc từ bỏ thói quen debug bằng lệnh in log để chuyển sang dùng Breakpoint và Logpoint sẽ nâng tầm tư duy xử lý hệ thống của bạn lên một đẳng cấp hoàn toàn mới: chuyên nghiệp, sạch sẽ và tiết kiệm hàng tá thời gian.

Ở bài học số 4, chúng ta sẽ cùng nhau biến VS Code thành một trung tâm điều khiển từ xa với kỹ năng: Remote Development (Kết nối gõ code trực tiếp trên VPS qua SSH hoặc chui vào trong Docker Container mà không cần cài đặt môi trường ở máy local).