'%3e%3cpath%20d='M18.4512%200.5H1.54788C0.969086%200.500348%200.499884%200.969781%200.5%201.5488V18.4521C0.500348%2019.0309%200.969781%2019.5001%201.5488%2019.5H10.6494V12.1523H8.18164V9.27637H10.6494V7.15986C10.6494%204.70542%2012.1478%203.36948%2014.3373%203.36948C15.386%203.36948%2016.2871%203.44764%2016.5498%203.48255V6.04785H15.04C13.8488%206.04785%2013.6182%206.61389%2013.6182%207.44467V9.27637H16.4663L16.0952%2012.1523H13.6182V19.5H18.4512C19.0303%2019.5001%2019.4999%2019.0308%2019.5%2018.4517C19.5%2018.4515%2019.5%2018.4514%2019.5%2018.4512V1.54788C19.4998%200.969086%2019.0302%200.499884%2018.4512%200.5Z'%20fill='%236B7280'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1312_2913'%3e%3crect%20x='0.5'%20y='0.5'%20width='19'%20height='19'%20rx='5'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}
'%3e%3cpath%20d='M18.1297%200.5C18.1297%200.5%2018.1297%200.5%2018.1297%200.5H1.87029C1.11346%200.5%200.5%201.11346%200.5%201.87029V18.1297C0.5%2018.8865%201.11346%2019.5%201.87029%2019.5H18.1297C18.8865%2019.5%2019.5%2018.8865%2019.5%2018.1297V1.87029C19.5%201.11346%2018.8865%200.5%2018.1297%200.5C18.1297%200.5%2018.1297%200.5%2018.1297%200.5ZM7.23941%2013.7045C7.23941%2014.3434%206.72148%2014.8613%206.08257%2014.8613C5.44366%2014.8613%204.92573%2014.3434%204.92573%2013.7045V9.05741C4.92573%208.4185%205.44366%207.90057%206.08257%207.90057C6.72148%207.90057%207.23941%208.4185%207.23941%209.05741V13.7045ZM6.08264%206.95007H6.06757C5.29117%206.95007%204.78903%206.41561%204.78903%205.74764C4.78903%205.0646%205.30653%204.54492%206.09801%204.54492C6.88948%204.54492%207.37654%205.0646%207.39162%205.74764C7.39162%206.41561%206.88948%206.95007%206.08264%206.95007ZM15.5821%2013.7046C15.5821%2014.3435%2015.0642%2014.8613%2014.4254%2014.8613C13.7865%2014.8613%2013.2687%2014.3435%2013.2687%2013.7046V11.1375C13.2687%2010.2016%2012.9337%209.56339%2012.0965%209.56339C11.4574%209.56339%2011.0768%209.99391%2010.9095%2010.4095C10.8483%2010.5582%2010.8334%2010.7661%2010.8334%2010.9741V13.7073C10.8334%2014.3447%2010.3167%2014.8613%209.67938%2014.8613C9.03988%2014.8613%208.52227%2014.3432%208.52472%2013.7037C8.5296%2012.429%208.53589%2010.3876%208.53217%209.08236C8.53032%208.43776%209.0588%207.90057%209.70342%207.90057H10.6084C10.7326%207.90057%2010.8334%208.00128%2010.8334%208.12553C10.8334%208.3496%2011.1506%208.45216%2011.3174%208.30254C11.6612%207.99424%2012.1608%207.7372%2012.9184%207.7372C14.4407%207.7372%2015.5821%208.73205%2015.5821%2010.87V13.7046Z'%20fill='%236B7280'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1312_2914'%3e%3crect%20x='0.5'%20y='0.5'%20width='19'%20height='19'%20rx='5'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}
React Developer Tools là một công cụ mạnh mẽ giúp bạn kiểm tra, chỉnh sửa các thành phần React, quản lý props và state, cũng như xác định vấn đề về hiệu suất của ứng dụng React của bạn. Trong bài viết này, chúng ta sẽ hướng dẫn bạn cách cài đặt React Developer Tools để sử dụng dễ dàng trong quá trình phát triển ứng dụng React của bạn.
Bước 1: Cài đặt Tiện ích Mở rộng Trình duyệt
Cách đơn giản và nhanh chóng nhất để gỡ lỗi các trang web được xây dựng bằng React là cài đặt tiện ích mở rộng trình duyệt React Developer Tools. Hiện tại, nó có sẵn cho một số trình duyệt phổ biến như Chrome, Firefox và Edge.
Đối với Chrome
- Bước đầu tiên, hãy truy cập trình duyệt Chrome của bạn.
- Sau đó, bạn sẽ cần cài đặt tiện ích mở rộng React Developer Tools từ Chrome Web Store. Bạn có thể tìm kiếm "React Developer Tools" trong cửa sổ tiện ích mở rộng hoặc truy cập vào liên kết sau và nhấn nút "Add to Chrome" để cài đặt:
React Developer Tools - Chrome Web Store - Khi cài đặt hoàn tất, bạn sẽ thấy biểu tượng React Developer Tools xuất hiện ở góc trình duyệt.
- Bây giờ, khi bạn truy cập một trang web được xây dựng bằng React, hãy mở Developer Tools của Chrome và chuyển đến tab "Components" để bắt đầu kiểm tra các thành phần React của trang web.
Đối với Firefox
- Mở trình duyệt Firefox.
- Truy cập trang cài đặt tiện ích mở rộng của Firefox.
- Tìm "React Developer Tools" và nhấn nút "Add to Firefox" để cài đặt tiện ích mở rộng.
- Sau khi cài đặt xong, bạn sẽ thấy biểu tượng React Developer Tools xuất hiện trên thanh công cụ của Firefox.
- Khi bạn truy cập một trang web React, mở Developer Tools và chuyển đến tab "Components" để sử dụng công cụ này.
Đối với Edge
- Mở trình duyệt Edge.
- Truy cập Microsoft Edge Add-ons Store.
- Tìm "React Developer Tools" và nhấn nút "Get" để cài đặt tiện ích mở rộng.
- Khi cài đặt xong, bạn sẽ thấy biểu tượng React Developer Tools xuất hiện trên thanh công cụ của Edge.
- Khi bạn truy cập một trang web React, mở Developer Tools và chuyển đến tab "Components" để sử dụng công cụ này.
Bước 2: Cài đặt React Developer Tools cho Trình duyệt Khác
Nếu bạn đang sử dụng một trình duyệt khác như Safari hoặc muốn cài đặt React Developer Tools trực tiếp từ npm, hãy làm theo hướng dẫn sau:
Cài đặt qua npm
-
Mở cửa sổ Terminal trên máy tính của bạn.
-
Sử dụng npm hoặc Yarn để cài đặt gói
react-devtoolstoàn cục:# Yarn yarn global add react-devtools # npm npm install -g react-devtools
Kết nối với trang web của bạn
-
Sau khi cài đặt xong, mở cửa sổ Terminal và chạy lệnh sau để khởi động React Developer Tools:
react-devtools -
Bây giờ, bạn cần kết nối trang web của mình với React Developer Tools. Để làm điều này, thêm đoạn mã sau vào phần
<head>của trang web của bạn:<html> <head> <script src="http://localhost:8097"></script> </head> <!-- Các phần khác của trang web --> </html> -
Lưu lại và tải lại trang web của bạn trong trình duyệt. Trang web sẽ kết nối với React Developer Tools qua cổng 8097.
Việc cài đặt React Developer Tools là một bước quan trọng trong quá trình phát triển ứng dụng React của bạn. Nó giúp bạn dễ dàng kiểm tra và gỡ lỗi các thành phần React, theo dõi props và state, và xác định các vấn đề về hiệu suất. Hãy sử dụng công cụ này để nâng cao chất lượng và hiệu suất của ứng dụng React của bạn.
