Debug React
April 29, 2021
Khi viết bất kì một chương trình nào thì việc có bug là một điểu không thể tránh khỏi và việc debug là không thể thiếu đổi với một developer. Khi học khoá học react trên udemy thì mình thấy có phần hướng dẫn debug cho framework này. Sau đây mình xin viết lại những gì mình hiểu về phần này
- Console
Đây là một cách thông dụng để gỡ lỗi ứng dụng là: Console (console.log, console.warn, console.error). Sau đó, chạy ứng đụng trên trình duyệt để kiểm tra trạng thái ứng dụng trong phần trình kiểm tra, chẳng hạn, bạn sẽ làm console.log(count)
Phương pháp này được thực hiện một cách nhanh chóng và cho ta thấy được toàn cảnh của ứng dụng nên đây cũng làm một trong số những nguyên nhân mà nó được sử dụng phổ biến và nhiều người biết đến nhất - React Developer Tools
Một tiện ích mở rộng dành cho các trình duyệt: Chrome , Firefox triển khai chức năng gỡ lỗi dành riêng cho React để công cuộc debug trở nên dễ dàng hơn : React Developer Tools
Bước 1 – Cài đặt Tiện ích mở rộng
Nhấp vào nút Thêm vào Chrome . Sau đó nhấp vào nút Thêm tiện ích mở rộng để xác nhận:
Chrome sẽ cài đặt tiện ích mở rộng và một thông báo thành công và một biểu tượng mới sẽ xuất hiện ở góc trên bên phải của trình duyệt bên cạnh thanh địa chỉ:
Nếu biểu tượng không xuất hiện, bạn có thể thêm nó bằng cách nhấp vào mảnh ghép, sau đó nhấp vào biểu tượng đinh ghim bằng Công cụ dành cho nhà phát triển React:
Bước 2 – Sử dụng
Sau khi cài đặt thành công , mở ứng dụng trên trình duyệt và bạn sẽ tìm thấy 2 bảng điều khiển mới: Components và Profiler .
Components
Nó cho phép bạn xem cấu trúc phần tử ứng dụng và trạng thái được liên kết với nó.
Nếu bạn chọn bất kỳ thành phần nào trong cây, bảng điều khiển bên phải sẽ hiển thị cho bạn một tham chiếu đến Components cha và các props được chuyển đến nó:
Profiler
Nó cho phép ghi lại một tương tác trong ứng dụng và xem điều gì sẽ xảy ra.
Mình xin phép được kết thúc bài viết tại đây. Đây là lần đầu mình viết Blog nên còn rất nhiều sai sót rất mong nhận được sự góp ý thêm từ mọi người để mình cải thiện trong lần tới ạ