React Developer Tools

Gunakan React Developer Tools untuk memeriksa komponen, menyunting props dan state, dan mengidentifikasi masalah kinerja.

You will learn

Cara memasang Alat Pengembang React

Ekstensi Browser

Cara termudah untuk melakukan debugging website yang dibangun dengan React adalah dengan memasang ekstensi browser Alat Pengembang React. Ekstensi ini tersedia untuk beberapa browser populer:

Sekarang, jika Anda mengunjungi sebuah website yang dibangun dengan React, Anda akan melihat panel Components dan Profiler.

Safari and browser lainnya

Untuk browser lainnya (misalnya, Safari), pasang paket npm react-devtools:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Selanjutnya buka alat pengembang dari terminal:

react-devtools

Lalu sambungkan website Anda dengan menambahkan tag <script> berikut ke awal <head> website Anda:

<html>
  <head>
    <script src="http://localhost:8097"></script>

Reload website Anda sekarang untuk melihatnya di alat pengembang.

Mobile (React Native)

Alat Pengembang React dapat digunakan untuk memeriksa aplikasi yang dibangun dengan React Native juga.

Cara termudah untuk menggunakan Alat Pengembang React adalah dengan memasangnya secara global:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Selanjutnya buka alat pengembang dari terminal:

react-devtools

Alat Pengembang React akan terhubung ke aplikasi React Native lokal yang sedang berjalan.

Lakukan reload aplikasi jika alat pengembang tidak terhubung setelah beberapa detik.

Pelajari lebih lanjut tentang debugging React Native.

PreviousEditor Setup