Hướng dẫn chạy debug c trên visual code năm 2024

Visual studio code là ứng dụng code phổ biến hiện nay đối với các lập trình viên được phát triển bởi Microsoft. Microsoft đã rất nổi tiếng với IDE lập trình Visual Studio. Đối với các anh em lập trình ASP.Net hay C# với ứng dụng Winform hay WPF đã quá quen với IDE này và các anh em cũng quen với sư nặng nề của ứng dụng này. Đối với máy tính thời sinh viên 4GB RAM thì khó thể gánh được ứng dụng này.

• Đối với Visual studio code thì lại là 1 câu chuyện khác. Lập trình viên có thể cài các Extention mà họ cần mà không cần thiết cài một ứng dụng quá nặng như Visual studio. Đây là ưu điểm cũng là nhược điểm của VScode. Đối với VisualStudio tôi có thể debug một cách dễ dàng với 1 Break point màu đỏ rất đẹp ở đây nhưng khi lập trình ứng dụng ReactJS trong VScode, tôi đã không thể dễ dàng debug trực tiếp ứng dụng ReactJS của mình mà phải thông qua console.log() trên browser. Điều này thật quá khó chịu đối với các state của ReactJS thì thật khó theo dõi luồng của code đang chạy
• Sau đây tôi sẽ hướng dẫn các bạn Debug trực tiếp ứng dụng ReactJS trong VScode. Hãy quên console.log() đi nhé các bạn😊😊😊. Lét go👌👌

2. Tải 1 ứng dụng ReactJS và sử dụng trình Editor là VScode

• Bước 1. Tạo 1 ứng dụng ReactJS sử dụng câu lệnh sau trên Terminal npx create-react-app my-app
• Khi download thành công ứng dụng ReactJS bạn chuyển tới thư mục my-app bằng lệnh cd my-app và chạy ứng dụng myapp bằng câu lệnh`npm start`
• Bạn sẽ thấy ứng dụng ReactJS mặc định như sau
• Mở ứng dụng ReactJS đang chạy với VScode bằng lệnh`code .`
• Bạn sẽ thấy đoạn code trong file App.js như sau:
  Vậy là xong bước thứ nhất cài đặt 1 ứng dụng ReactJS.

3. Thiết lập debug ứng dụng ReactJS trong VScode

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

Như vậy là đã xong phần thiết lập.

4. Thực hiện việc debug ReactJS trực tiếp trên VScode

5. Kết luận

Như vậy tôi đã hướng dẫn các bạn debug trực tiếp ứng dụng ReactJS trong VScode. Hy vọng nó sẽ giúp các bạn tìm ra các bug một cách nhanh nhất. Hẹn gặp lại các bạn trong các bài viết tiếp theo. See you!

Debug là một công việc mà hầu hết người lập trình đều phải thực hiện để tìm lỗi trong phần mềm của mình. Visual Studio đã hỗ trợ khá mạnh tính năng này để giúp đơn giản hơn trong việc tìm lỗi sản phẩm. Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng tính năng Debug trên phiên bản mới nhất của Visual Studio, hiện tại là bản 2015. Các thao tác sẽ được thực hiện trên Visual Studio Enterprise 2015.

Sơ lược về Debug của Visual Studio

Debug trong Visual Studio cho phép bạn chạy chương trình từng bước để xem sự thay đổi giá trị của biến, trả về của hàm,… qua đó phát hiện những lỗi logic trong chương trình.

Một số thành phần cơ bản

• Breakpoints: Là điểm mà chương trình sẽ dừng lại để cho phép bạn chạy từng bước các dòng code. Có thể đặt nhiều breakpoint trong chương trình.
• Các cửa sổ theo dõi biến: Giúp bạn theo dõi sự thay đổi của biến hoặc hàm cho mỗi bước chạy. Nếu một biến có sự thay đổi giá trị thì sẽ có màu đỏ để phân biệt. Có 3 loại:
  • Autos: Hiển thị tự động các biến, hoặc hàm trả về trong các dòng code trước.
  • Locals: Tương tự Autos nhưng chỉ hiển thị các biến liên quan trong nội bộ hàm hoặc khối lệnh.
  • Watch: cửa sổ tùy chỉnh cho phép bạn xem chỉ các biến mà bạn yêu cầu hoặc giá trị tùy chỉnh bất kỳ. Visual Studio cho phép bạn mở tối đa 4 cửa sổ Watch.

• Thanh công cụ Debug: cung cấp các nút lệnh để bạn thực hiện Debug chương trình.

• Cửa sổ Call Stack: Chứa lời gọi hàm trong ngăn xếp. Nếu chỉ debug ở mức độ cơ bản thì cũng không cần quan tâm cửa sổ này lắm.
• Cửa sổ Diagnostic Tool: Chứa các công cụ chẩn đoán nâng cao. Cung cấp biểu đồ thời gian thực bộ nhớ, CPU,… mà chương trình sử dụng. Ngoài ra nó còn hiển thị các sự kiện được bắt và thời gian bắt.

Thực hiện Debug chương trình

Để bắt đầu thực hiện Debug, ta click vào rìa bên trái tại dòng code cần bắt đầu debug để đặt breakpoint. Breakpoint sẽ có màu đỏ như hình dưới. Lưu ý là có thể đặt nhiều breakpoint khác nhau. Để xóa một breakpoint ta click vào nó một lần nữa.

Sau khi đặt Breakpoints, ta bắt đầu chạy chương trình dưới chế độ Debug bằng cách nhấn phím F5. Chương trình sẽ chạy bình thường cho tới khi gặp một breakpoint như hình dưới.

Lúc này bạn sẽ sử dụng các nút lệnh trên thanh công cụ Debug để tiến hành chạy từng bước.

Các nút điều khiển Debug cơ bản:

• Step Over (F10): chạy lần lượt các câu lệnh, tuy nhiên sẽ không đi vào trong hàm con mà chỉ lướt qua.
• Step Into (F11): chạy lần lượt các câu lệnh và đi vào hàm con.
• Step Out (Shift + F11): Lướt qua hàm con hiện tại để trở về hàm trước. Ngoài ra có thể dùng nó để nhảy qua breakpoint kế tiếp.

Các thủ thuật nâng cao

Trong quá trình Debug, bạn có thể di chuột đến bất kỳ biến nào để xem giá trị hoặc thay đổi giá trị của biến. Ngoài ra có thể ghim popup tại màn hình để tiện theo dõi.

Disable breakpoint

Nếu bạn có nhiều Breakpoints trong chương trình, muốn tạm không dùng một breakpoint nào đó mà không xóa nó. Bạn có thể disable bằng cách di chuột vào breakpoint đó, một popup hiện ra và chọn Disable breakpoint. Breakpoint bị disable sẽ có màu trắng như trong hình.

Debug có điều kiện

Visual Studio hỗ trợ bạn tính năng Debug có điều kiện. Nghĩa là chỉ thực hiện debug tại breakpoint khi thỏa một điều kiện nào đó. Để thực hiện bạn cũng di chuột vào breakpoint cần đặt điều kiện và chọn Settings trong popup hiện ra.

Lúc này bạn tick chọn Conditions và gõ vào một điều kiện phù hợp. Có thể thêm điều kiện bằng cách chọn Add condition. Lúc này breakpoint đã được đặt điều kiện (sẽ có hình dấu cộng) và sẽ chỉ dừng lại để debug khi thỏa điều kiện đó.

Trên đây là những kiến thức cơ bản khi sử dụng Debug trong Visual Studio 2015. Hi vọng sẽ giúp ích được cho các bạn.