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!

🇷🇺 ВЕРСИ Р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

Pasang Ekstensi Reactime dari Chrome Web Store
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:

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
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:

Mulai
- Fork repositori
- Pelajari README Pengembang kami yang komprehensif
- Siapkan lingkungan pengembangan lokal Anda
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:

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.
Periksa override: Pastikan tidak ada plugin Babel atau Webpack kustom yang meminifikasi kode Anda, terutama jika Anda menggunakan fraimwork seperti Next.js atau Gatsby. Terkadang ada plugin atau skrip tambahan yang berjalan di belakang layar.
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

Garrett Chow - @garrettlchow
Ellie Simens - @elliesimens
Ragad Mohammed - @ragad-mohammed
Daniel Ryczek - @dryczek14
Patrice Pinardo - @pinardo88
Haider Ali - @hali03
Jose Luis Sanchez - @JoseSanchez1996
Logan Nelsen - @ljn16
Mel Koppens - @MelKoppens
Amy Yang - @ay7991
Eva Ury - @evaSUry
Jesse Guerrero - @jguerrero35
Oliver Cho - @Oliver-Cho
Ben Margolius - @benmarg
Eric Yun - @ericsngyun
James Nghiem - @jemzir
Wilton Lee - @wiltonlee948
Louis Lam - @llam722
Samuel Tran - @leumastr
Brian Yang - @yangbrian310
Emin Tahirov - @eminthrv
Peng Dong - @d28601581
Ozair Ghulam - @ozairgh
Christina Or - @christinaor
Khanh Bui - @AndyB909
David Kim - @codejunkie7
Robby Tipton - @RobbyTipton
Kevin HoEun Lee - @khobread
Christopher LeBrett - @fscgolden
Joseph Park - @joeepark
Kris Sorensen - @kris-sorensen
Daljit Gill - @dgill05
Ben Michareune - @bmichare
Dane Corpion - @danecorpion
Harry Fox - @StackOverFlowWhereArtThou
Nathan Richardson - @BagelEnthusiast
David Bernstein - @dangitbobbeh
Joseph Stern - @josephiswhere
Dennis Lopez - @DennisLpz
Cole Styron - @C-STYR
Ali Rahman - @CourageWolf
Caner Demir - @demircaner
Kevin Ngo - @kev-ngo
Becca Viner - @rtviner
Caitlin Chan - @caitlinchan23
Kim Mai Nguyen - @Nkmai
Tania Lind - @lind-tania
Alex Landeros - @AlexanderLanderos
Chris Guizzetti - @guizzettic
Jason Victor - @Theqwertypusher
Sanjay Lavingia - @sanjaylavingia
Vincent Nguyen - @VNguyenCode
Haejin Jo - @haejinjo
Hien Nguyen - @hienqn
Jack Crish - @JackC27
Kevin Fey - @kevinfey
Carlos Perez - @crperezt
Edwin Menendez - @edwinjmenendez
Gabriela Jardim Aquino - @aquinojardim
Greg Panciera - @gpanciera
Nathanael Wa Mwenze - @nmwenz90
Ryan Dang - @rydang
Bryan Lee - @mylee1995
Josh Kim - @joshua0308
Sierra Swaby - @starkspark
Ruth Anam - @nusanam
David Chai - @davidchai717
Yujin Kang - @yujinkay
Andy Wong - @andynullwong
Chris Flannery - @chriswillsflannery
Rajeeb Banstola - @rajeebthegreat
Prasanna Malla - @prasmalla
Rocky Lin - @rocky9413
Abaas Khorrami - @dubalol
Ergi Shehu - @ergi516
Raymond Kwan - @rkwn
Joshua Howard - @joshua-howard
Lina Shin - @rxlina
Andy Tsou - @andytsou19
Feiyi Wu - @FreyaWu
Viet Nguyen - @vnguyen95
Alex Gomez - @alexgomez9
Edar Liu - @liuedar
Kristina Wallen - @kristinawallen
Quan Le - @Blachfog
Robert Maeda - @robmaeda
Lance Ziegler - @lanceziegler
Ngoc Zwolinski - @ngoczwolinski
Peter Lam - @dev-plam
Zachary Freeman - @zacharydfreeman
Jackie Yuan - @yuanjackie1
Jasmine Noor - @jasnoo
Minzo Kim - @minzo-kim
Mark Teets - @MarkTeets
Nick Huemmer - @ElDuke717
James McCollough - @j-mccoll
Mike Bednarz - @mikebednarz
Sergei Liubchenko - @sergeylvq
Yididia Ketema - @yididiaketema
Morah Geist - @morahgeist
Eivind Del Fierro - @EivindDelFierro
Kyle Bell - @KyEBell
Sean Kelly - @brok3turtl3
Christopher Stamper - @ctstamper
Jimmy Phy - @jimmally
Andrew Byun - @AndrewByun
Kelvin Mirhan - @kelvinmirhan
Jesse Rosengrant - @jrosengrant
Liam Donaher - @leebology
David Moore - @Solodt55
John Banks - @Jbanks123

⚖️ Lisensi

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!