Skip to content

Latest commit

 

History

History
361 lines (295 loc) · 18.3 KB

README.id.md

File metadata and controls

361 lines (295 loc) · 18.3 KB


Alat Kinerja React
🏆 Dinominasikan untuk React Open Source Awards 2020

Ekstensi Chrome yang kuat untuk meningkatkan pengembangan React dengan debugging lintas-waktu dan pemantauan kinerja lanjutan

Baca Artikel Kami di Medium untuk mempelajari lebih lanjut tentang proses di balik layar dan pengembangan Reactime!


Chrome Web Store Chrome Web Store Users Chrome Web Store Rating


🇷🇺   ВЕРСИ РUSIA   •   🇫🇷   VERSI PRANCIS   •   👩‍💻 README Pengembang

✨ Fitur Utama

🔍 Visualisasi State

  • Beberapa Tampilan: Visualisasikan state aplikasi Anda melalui Component Graphs, JSON Trees, Performance Graphs, dan Accessibility Trees
  • History Timeline: Lacak perubahan state seiring waktu melalui tampilan riwayat yang intuitif
  • Web Metrics: Pantau metrik kinerja penting secara real-time
  • Insight Aksesibilitas: Analisis accessibility tree aplikasi Anda pada setiap perubahan state

Pada halaman utama, terdapat dua pilihan utama di panel dropdown:

  • Timejump: Melihat dan menavigasi riwayat snapshot state aplikasi Anda. Anda dapat melompat ke titik mana pun dalam waktu untuk melihat bagaimana state berubah di setiap perubahan. Anda juga dapat menggunakan tombol play untuk memutar ulang setiap perubahan state secara otomatis.
  • Providers / Consumers: Memahami dependensi context aplikasi Anda dan bagaimana elemen-elemen tersebut berinteraksi, melalui visualisasi hubungan provider dan consumer.


⏱️ Debugging Lintas-Waktu

  • Snapshot State: Tangkap dan navigasi riwayat state aplikasi Anda
  • Playback Controls: Putar ulang perubahan state secara otomatis dengan kecepatan yang dapat disesuaikan
  • Jump Points: Langsung menuju state yang sebelumnya
  • Perbandingan Diff: Bandingkan state antar snapshot


📊 Analisis Kinerja

  • Metrik Komponen: Lacak waktu render dan potensi bottleneck pada kinerja
  • Perbandingan Seri: Bandingkan kinerja di berbagai set perubahan state
  • Deteksi Re-render: Identifikasi dan perbaiki siklus render yang tidak diperlukan
  • Web Vitals: Pantau Core Web Vitals dan metrik kinerja lainnya


🔄 Dukungan Framework Modern

  • Kompatibilitas penuh dengan Next.js, Remix, Recoil, dan Gatsby
  • Dukungan TypeScript untuk komponen berbasis class dan fungsional
  • Dukungan untuk React Hooks dan Context API

💾 Persistensi & Berbagi State

Reactime memudahkan proses menyimpan dan berbagi riwayat state aplikasi Anda:

  • Ekspor Riwayat State: Simpan snapshot yang direkam sebagai berkas JSON untuk analisis lebih lanjut atau dibagikan
  • Impor Sesi Sebelumnya: Unggah snapshot yang telah disimpan untuk membandingkan perubahan state di sesi yang berbeda
  • Analisis Lintas-Sesi: Bandingkan kinerja dan perubahan state antara berbagai sesi pengembangan


📚 Dokumentasi Interaktif

Reactime menyediakan dokumentasi komprehensif untuk membantu pengembang memahami arsitektur dan API-nya: Setelah melakukan clone pada repositori ini, pengembang dapat menjalankan npm run docs di level root, dan menyajikan /docs/index.html yang dihasilkan secara dinamis, yang menyediakan:

  • Diagram komponen interaktif
  • Definisi tipe dan interface
  • Gambaran umum arsitektur codebase
  • Referensi dan contoh API

🎉 Apa yang Baru!

Reactime 26.0 menghadirkan perombakan total pada pengalaman debugging React, dengan fitur-fitur:

  • Tampilan Data Context Baru

    • Visualisasi pertama untuk perubahan state hook useContext
    • Pemetaan jelas hubungan provider-consumer
    • Pemantauan nilai state context secara real-time
    • Visualisasi data provider yang terperinci

  • Debugging Lintas-Waktu yang Ditingkatkan

    • Antarmuka slider yang didesain ulang, ditempatkan di samping snapshot
    • Kontrol kecepatan pemutaran yang bervariasi
    • Navigasi state yang lebih intuitif
    • Visualisasi snapshot yang lebih baik

  • Perombakan UI Modern

    • Desain yang lebih segar dengan komponen membulat
    • Peningkatan tata letak yang intuitif
    • Dukungan mode gelap baru
    • Hierarki visual yang diperbarui

  • Peningkatan Teknis Besar

    • Mengatasi masalah koneksi yang terputus saat idle dan perpindahan tab
    • Mengembalikan visualisasi accessibility tree
    • Memperbaiki masalah penangkapan state pada useState berbasis fungsi
    • Meningkatkan keandalan dan kinerja ekstensi secara keseluruhan

Pembaruan ini membuat Reactime lebih kuat, andal, dan ramah pengguna dari sebelumnya, menetapkan standar baru bagi alat debugging React.

🚀 Memulai

Instalasi

  1. Pasang Ekstensi Reactime dari Chrome Web Store
  2. Pasang ekstensi React Developer Tools yang diperlukan jika Anda belum memasangnya

Prasyarat

  • Aplikasi React Anda harus berjalan dalam mode development
  • Ekstensi React Developer Tools harus terpasang
  • Peramban Chrome (disarankan versi 80 atau lebih tinggi)

Menjalankan Reactime

Ada dua cara untuk membuka panel Reactime:

  1. DevTools

    • Buka Chrome DevTools (F12 atau ⌘+⌥+I)
    • Buka tab "Reactime"
    • Ini akan membuka Reactime sebagai panel di dalam Chrome DevTools, terintegrasi bersama alat pengembangan Anda yang lain

  2. Context Menu

    • Klik kanan di mana saja pada aplikasi React Anda
    • Pilih "Reactime" dari context menu
    • Ini akan membuka Reactime di jendela popup terpisah yang dapat Anda ubah ukuran dan posisinya secara mandiri

Setelah diluncurkan, Reactime secara otomatis akan mulai memantau perubahan state dan metrik kinerja aplikasi Anda.

🤝 Berkontribusi di Reactime

Kami menyambut kontribusi dari pengembang di semua tingkatan! Untuk panduan terperinci tentang cara berkontribusi:

  1. Mulai

    • Fork repositori
    • Pelajari README Pengembang kami yang komprehensif
    • Siapkan lingkungan pengembangan lokal Anda

  2. Proses Build

    • Ikuti petunjuk build di README Pengembang kami
    • Uji perubahan Anda secara menyeluruh
    • Ajukan pull request

Bergabunglah dengan komunitas kontributor kami yang terus berkembang dan bantu membentuk masa depan alat debugging React! Untuk panduan kontribusi dan informasi arsitektur proyek yang lebih rinci, silakan lihat 👩‍💻 README Pengembang dan 🙋 Contributing README.

🛠️ Pemecahan Masalah

❓ Mengapa Reactime tidak merekam perubahan state baru?

Reactime kehilangan koneksi dengan tab yang Anda pantau. Cukup klik tombol "reconnect" untuk melanjutkan pekerjaan Anda.

❓ Mengapa Reactime tidak menemukan hooks saya?

Reactime mendeteksi dan memantau hooks dengan menelusuri kode React Anda yang belum di-minify di mode development. Jika proses build Anda meminifikasi atau meng-uglify kode—even untuk build development—Reactime mungkin tidak bisa mendeteksi dan melacak hooks Anda dengan benar. Untuk memperbaikinya:

  1. Pastikan build benar-benar development: Periksa konfigurasi bundler atau build tool Anda (misalnya, Webpack, Babel, Vite, dll.) untuk memastikan aplikasi tidak di-minify atau di-uglify dalam mode development.
    • Misalnya, dengan Webpack, pastikan Anda menjalankan mode: 'development' yang menonaktifkan minification default.
    • Pada proyek Create React App, cukup jalankan npm start atau yarn start yang secara otomatis mengonfigurasi build development yang tidak di-minify.
  2. Periksa override: Pastikan tidak ada plugin Babel atau Webpack kustom yang meminifikasi kode Anda, terutama jika Anda menggunakan framework seperti Next.js atau Gatsby. Terkadang ada plugin atau skrip tambahan yang berjalan di belakang layar.
  3. Restart & rebuild: Setelah mengubah konfigurasi build, lakukan rebuild atau restart server development Anda agar konfigurasi baru diterapkan. Lalu segarkan tab peramban Anda agar Reactime dapat mendeteksi hooks yang tidak di-minify.

Setelah mengubah konfigurasi build, rebuild atau restart server pengembangan Anda agar konfigurasi baru diterapkan. Kemudian, refresh tab peramban sehingga Reactime dapat mendeteksi hooks Anda yang tidak di-minify.

❓ Mengapa Reactime mengatakan bahwa tidak ada aplikasi React yang ditemukan?

Reactime awalnya dijalankan menggunakan dev tools global hook dari API Chrome. Proses ini memerlukan waktu untuk dimuat. Coba refresh aplikasi Anda beberapa kali hingga Reactime muncul.

❓ Mengapa saya harus mengaktifkan React Dev Tools?

Reactime bekerja berdampingan dengan React Developer Tools untuk mengakses Fiber tree aplikasi React; di balik layar, Reactime menjelajahi Fiber tree melalui global hook dari React Developer Tools, dan mengambil semua informasi relevan yang diperlukan untuk ditampilkan kepada pengembang.

❓ Saya menemukan bug di Reactime

Reactime adalah proyek open-source, dan kami ingin mendengar masukan Anda untuk meningkatkan pengalaman pengguna. Silakan baca 👩‍💻 README Pengembang, dan buat pull request (atau issue) untuk mengusulkan dan berkolaborasi dalam perubahan pada Reactime.

❓ Kecocokan versi Node

Dengan rilis Node v18.12.1 (LTS) pada 4/11/22, skrip telah diperbarui menjadi 'npm run dev' | 'npm run build' untuk menjaga kompatibilitas mundur.
Untuk versi Node v16.16.0, silakan gunakan skrip 'npm run devlegacy' | 'npm run buildlegacy'

✍️ Penulis

⚖️ Lisensi

Proyek ini dilisensikan di bawah MIT License - lihat berkas LICENSE untuk detail selengkapnya.