Cảm ơn bạn vì đã xem đến số 13 của chuỗi bài Tìm hiểu ReactJs - hôm nay chúng ta sẽ cùng tìm hiểu về 1 công cụ kiểm tra(inspect) React rất hiệu quả. Đây là một chrome extension được cung cấp bởi Facebook, các bạn cài đặt ở đây.
Nếu như bạn đã từng code web html trên chrome bạn sẽ thấy chrome có 1 tính năng debug khá hay đó là inspect, giúp ta kiểm tra các element trong trang web.
Thì giờ đây chúng ta cũng có thể làm được như thế với React Extension này, sau khi cài vào chrome các bạn mở 1 bài react lên, ở đây mình mở lại bài trước đã học: Bài 12: ReactJS - tìm hiểu về Animations trong React, Bên góc phải trên sẽ xuất hiện icon React, sau đó ta vào phần inspect của chrome như bình thường, lúc này ở bên phải cùng sẽ xuất hiện thêm 1 tab tên React ta click vào để xem các thành phần React cấu thành nên trang web này.
Nếu như chỉ xem ở phần Elements chúng ta sẽ chỉ thấy các thành phần HTML đã được render do đó sẽ khá khó khăn để kiểm tra, còn với tab React chúng ta có thể xem được component nào được render ra, là cha hay con của component nào cùng với state, props event... Các bạn cài đặt rồi nghiên cứu thêm nha. Chúc các bạn học tốt.
Chào anh, cảm ơn anh vì khóa học. Đến bài thứ 13 này em không thấy tab React xuất hiện như trong hình. Tuy góc bên phải vẫn thấy icon react sáng lên.
Trả lờiXóa