Cách sử dụng Công cụ dành cho nhà phát triển React

Tìm hiểu công cụ rất hữu ích này mà chúng ta nhất thiết phải cài đặt khi xây dựng một ứng dụng React.

Một công cụ rất hữu ích mà chúng ta cần cài đặt khi xây dựng một ứng dụng React, như ứng dụng Next.js chẳng hạn, là React Developer Tools.

Có sẵn cho cả haiTrình duyệt ChromeFirefox, Công cụ dành cho nhà phát triển React là một công cụ cần thiết mà bạn có thể sử dụng để kiểm tra một ứng dụng React.

Họ cung cấp một trình kiểm tra để tiết lộ cây thành phần React xây dựng trang của bạn và đối với mỗi thành phần, bạn có thể đi và kiểm tra các đạo cụ, trạng thái, hook và nhiều hơn nữa.

Khi bạn đã cài đặt Công cụ nhà phát triển React, bạn có thể mở công cụ phát triển trình duyệt thông thường (trong Chrome, nhấp chuột phải vào trang, sau đó nhấp vàoInspect) và bạn sẽ tìm thấy 2 bảng mới:Các thành phầnHồ sơ.

Nếu bạn di chuyển chuột qua các thành phần, bạn sẽ thấy rằng trong trang, trình duyệt sẽ chọn các phần được hiển thị bởi thành phầ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 tham chiếu đếnthành phần mẹvà các đạo cụ được chuyển cho nó:

Bạn có thể dễ dàng điều hướng bằng cách nhấp vào các tên thành phần.

Bạn có thể nhấp vào biểu tượng con mắt trong thanh công cụ Công cụ dành cho nhà phát triển để kiểm tra phần tử DOM và cũng như nếu bạn sử dụng biểu tượng đầu tiên, biểu tượng có biểu tượng chuột (thuận tiện nằm dưới biểu tượng DevTools thông thường tương tự), bạn có thể di chuột vào một phần tử giao diện người dùng của trình duyệt để chọn trực tiếp thành phần React hiển thị nó.

Bạn có thể dùngbugbiểu tượng để ghi dữ liệu thành phần vào bảng điều khiển.

Điều này khá tuyệt vời vì khi bạn đã in dữ liệu ở đó, bạn có thể nhấp chuột phải vào bất kỳ phần tử nào và nhấn “Lưu trữ dưới dạng biến toàn cục”. Ví dụ ở đây, tôi đã làm điều đó vớiurlvà tôi có thể kiểm tra nó trong bảng điều khiển bằng cách sử dụng biến tạm thời được gán cho nó,temp1:

Sử dụngBản đồ nguồn, được Next.js tải tự động trong chế độ phát triển, từ bảng Thành phần, chúng ta có thể nhấp vào<>mã và DevTools sẽ chuyển sang bảng Nguồn, hiển thị cho chúng tôi mã nguồn thành phần:

CácHồ sơtab thậm chí còn tuyệt vời hơn, nếu có thể. Nó cho phép chúng tôighi lại một tương táctrong ứng dụng và xem điều gì sẽ xảy ra. Tôi chưa thể đưa ra một ví dụ vì nó cần ít nhất 2 thành phần để tạo tương tác và chúng tôi hiện chỉ có một. Tôi sẽ nói về điều này sau.

Tôi đã hiển thị tất cả ảnh chụp màn hình bằng Chrome, nhưng Công cụ nhà phát triển React hoạt động theo cách tương tự trong Firefox:

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: