Bagaimana profil Bereaksi kode sumber asli menggunakan Xcode / Instruments / Time Profiler

19

Kami menggunakan React Native 0.59.10dan React-Redux 5.0.7, dan sedang mengalami masalah kinerja yang terikat CPU, di mana tindakan Redux kami menyelesaikan ~ 0,25s untuk diselesaikan.

Kami telah membuat profil menggunakan konfigurasi Time Profiler di Instrumen, tetapi tidak ada kode JS kami yang dilambangkan.

Melakukan debug jarak jauh di Chrome tampaknya hanya men-debug halaman "inspektur jarak jauh", yang sama sekali tidak membantu.

Apakah ada cara untuk membangun / melampirkan peta sumber, atau melambangkan alamat memori yang terlihat di bawah, ke nama / panggilan fungsi JS?

Instrumen Callstack

javascript ios xcode react-native instruments Craig Otis
sumber
Jika Anda menggunakan expo, Anda dapat menjalankan aplikasi secara langsung di chrome dan debug di sana.
Mykybo
Tidak, kami menggunakan sejumlah komponen asli yang baik, dan sebagai hasilnya Expo bukanlah suatu pilihan.
Craig Otis

Jawaban:

1

Firefox Profiler

Memahami Firefox Profiler

Firefox Profiler memiliki dokumentasi terkini yang tersedia di profiler.firefox.com/docs/. Namun berikut ini dapat memiliki beberapa informasi yang berpotensi berguna untuk masalah spesifik Tokek.

Anda dapat memeriksa beberapa pertanyaan umum tentang Profiler Firefox.

Melaporkan Masalah Kinerja memiliki panduan langkah demi langkah untuk mendapatkan profil saat diminta oleh pengembang Firefox.

1. Garis Waktu

Garis waktu memiliki beberapa baris penanda penelusuran (segmen berwarna) yang menunjukkan peristiwa menarik. Arahkan kursor ke mereka untuk melihat informasi lebih lanjut. Di bawah penanda penelusuran adalah baris yang terkait dengan aktivitas di berbagai utas.

Kiat: Utas yang dianotasi dengan "[default]" ada di proses induk (alias "UI", alias "browser chrome", alias "utama") dan yang dianotasi dengan "[tab]" ada di konten Web (alias "anak") memproses.

masukkan deskripsi gambar di sini

Kiat: Tugas yang sudah berjalan lama dalam proses induk akan memblokir semua input atau gambar dengan UI browser (alias "UI jank") sedangkan tugas yang sudah berjalan lama dalam proses konten akan memblokir interaktivitas dengan halaman tetapi masih memungkinkan pengguna untuk menggeser dan zoom sekitar berkat APZ.

Menelusuri penanda

Red: Ini menunjukkan bahwa loop peristiwa sedang tidak responsif. Perhatikan bahwa acara dengan prioritas tinggi seperti vsync tidak termasuk di sini. Juga perhatikan bahwa ini menunjukkan apa yang akan terjadi seandainya ada suatu peristiwa yang menunggu dan belum tentu ada peristiwa yang tertunda selama itu.

Black: Ini menunjukkan panggilan IPC sinkron.

2. Panggil Pohon

masukkan deskripsi gambar di sini

Pohon Panggilan menunjukkan sampel yang disusun oleh 'Waktu Berjalan' yang akan menampilkan data berdasarkan waktu jam dinding. Ada nama abu-abu yang lebih terang di sebelah kanan elemen pohon yang menunjukkan dari mana kode berasal. Ketahuilah bahwa elemen dapat berasal dari JavaScript, Gecko, atau pustaka sistem. Perhatikan bahwa jika beberapa fungsi belum dinamai dengan benar, simbolisasi mungkin belum selesai.

Tip: Anda bisa mengklik kanan pada nama fungsi untuk mendapatkan opsi untuk menyalin namanya ke clipboard.

3. Berbagi profil Klik "Bagikan ..."> Bagikan yang mengakui bahwa URL yang Anda buka dan ekstensi Firefox Anda akan dimasukkan dalam data profil yang dikirim ke server. Jika Anda memilih rentang waktu yang berbeda, URL yang diungkapkan dengan menekan "Permalink" akan berubah sehingga Anda dapat yakin bahwa penerima URL akan melihat hal yang sama seperti yang Anda lihat.

Vignesh Kumar A
sumber
Apakah profiler Firefox berperilaku berbeda dari Safari atau profiler Chrome? Dalam pengalaman saya, mereka memprofilkan tab / halaman debugging jarak jauh itu sendiri, bukan menjalankan aplikasi Asli Bereaksi.
Craig Otis