Ketika membangun aplikasi React, terkadang sulit untuk melihat apa yang sebenarnya terjadi di dalam component. Terutama bila kita banyak melakukan props drilling, membuat component yang nested, atau menyimpan data pada state yang sering berubah-ubah. Debugging menjadi tantangan besar ketika membangun aplikasi dengan React.

Debugging aplikasi web biasa dilakukan menggunakan Browser Developer Tools, sebagai web developer tentu tak asing lagi ketika menggunakannya. Namun, sayangnya tools tersebut tidak bisa menginspeksi seperti apa React component menyimpan data. Oleh karena itu, React Developer Tools hadir untuk memudahkan Anda ketika ingin menginspeksi hierarki component lengkap dengan nilai props dan state yang ada di dalamnya. Kami sangat menyarankan Anda untuk memasang React Developer Tools sebagai alat tambahan ketika debugging aplikasi React.

React Developer Tools tersedia dalam bentuk ekstensi atau add-ons web browser Chrome dan Firefox. Anda bisa memasangnya melalui tautan berikut.

Setelah Anda memasang ekstensi tersebut maka setiap kali Anda membuka aplikasi React (dalam tahap development) akan muncul opsi/menu baru Components dan Profiler pada Browser Developer Tools.


Jika menu Components dipilih, Anda bisa menginspeksi React component dengan lebih mudah.


Anda juga bisa melihat nilai props dan state yang berada di dalam Component secara live.


Bahkan, Anda juga bisa mengubah nilai props dan state secara langsung.


Dengan React Developer Tools, diharapkan Anda dapat men-debug aplikasi React lebih baik lagi. Untuk penjelasan dan penggunaan lebih detail dari React Developer Tools, Anda bisa kunjungi dokumentasi resmi.


Sebelumnya : Controlled Component Pada React JS Selanjutnya : Tips Penggunaan JSX untuk Pemula