Xcode / Instruments / Time Profiler kullanarak React Native source code nasıl profillenir


19

React Native 0.59.10ve React-Redux kullanıyoruz ve 5.0.7Redux eylemlerimizin tamamlanması için ~ 0.25s aldığı CPU'ya bağlı bir performans sorunu yaşıyoruz.

Instruments'ta Time Profiler yapılandırmasını kullanarak profilli olduk, ancak JS kodumuzun hiçbiri sembolize edilmedi.

Chrome'da uzaktan hata ayıklama, tamamen yararsız olan "uzak denetçi" sayfasında hata ayıklama gibi görünüyor.

JS işlev adlarına / çağrılarına bir kaynak harita oluşturmanın / eklemenin veya aşağıda görülen bellek adreslerini sembolize etmenin bir yolu var mı?

Instruments Callstack


Expo kullanıyorsanız, uygulamayı doğrudan kromda çalıştırabilir ve orada hata ayıklayabilirsiniz.
Mykybo

Hayır, çok sayıda yerel bileşen kullanıyoruz ve sonuç olarak Expo bir seçenek değil.
Craig Otis

Yanıtlar:


1

Firefox Profiler

Firefox Profiler'ı Anlama

Firefox Profiler'da profiler.firefox.com/docs/ adresinde daha güncel belgeler bulunmaktadır. Bununla birlikte, aşağıdakiler Gecko'ya özgü problemler için potansiyel olarak yararlı bazı bilgilere sahip olabilir.

Firefox Profilers hakkında sık sorulan sorulara göz atabilirsiniz.

Performans Sorunu Bildirme, Firefox geliştiricileri tarafından istendiğinde profil edinmek için adım adım açıklamalı bir kılavuz içerir.

1. Zaman Çizelgesi

Zaman çizelgesinde, ilginç olayları gösteren çeşitli izleme işaretleri (renkli segmentler) vardır. Daha fazla bilgi görmek için fareyle üzerine gelin. İzleme işaretlerinin altında, çeşitli dişlerdeki aktiviteye karşılık gelen satırlar bulunur.

İpucu: "[varsayılan]" ile ek açıklamalı konular üst öğe (aka "kullanıcı arayüzü", diğer adıyla "tarayıcı krom", diğer adıyla "ana") ve "[tab]" ile açıklamalı olanlar Web içeriğinde (aka "child") süreçleri.

resim açıklamasını buraya girin

İpucu: Üst işlemdeki uzun süren görevler, tarayıcı kullanıcı arayüzüyle ("UI jank" olarak da bilinir) tüm giriş veya çizimleri engellerken içerik işlemindeki uzun süren görevler sayfa ile etkileşimi engelleyecek, ancak kullanıcının kaydırma yapmasına ve APZ sayesinde yakınlaşın.

İzleme işaretleri

Red: Bunlar, olay döngüsünün yanıt vermiyor olduğunu gösterir. Vsync gibi yüksek öncelikli olayların buraya dahil edilmediğini unutmayın. Ayrıca bunun, bekleyen bir olay olsaydı ne olacağını göstereceğini ve uzun süredir bekleyen bir olay olması gerekmediğini de unutmayın.

Black: Bunlar senkronize IPC çağrılarını gösterir.

2. Çağrı Ağacı

resim açıklamasını buraya girin

Çağrı Ağacı, verileri Duvar Saati'ne göre gösterecek olan 'Çalışma Süresi' tarafından düzenlenen örnekleri gösterir. Ağaç öğelerinin sağında, kodun nereden geldiğini gösteren daha açık gri isimler vardır. Öğelerin JavaScript, Gecko veya sistem kitaplıklarından olabileceğini unutmayın. Bazı işlevler henüz düzgün adlandırılmamışsa, sembolizasyonun henüz tamamlanamayabileceğini unutmayın.

İpucu: Adını panoya kopyalama seçeneği elde etmek için bir işlev adına sağ tıklayabilirsiniz.

3. Profili paylaşma Açtığınız URL'lerin ve Firefox uzantılarınızın sunucuya gönderilen profil verilerine ekleneceğini onaylayarak "Paylaş ..."> Paylaş'ı tıklayın. Farklı bir zaman aralığı seçerseniz, "Kalıcı Bağlantı" düğmesine basıldığında ortaya çıkan URL değişecektir, böylece URL alıcısının gördüğünüz şeylerin aynısını göreceğinden emin olabilirsiniz.


Firefox profil oluşturucusu Safari veya Chrome profilcilerden farklı mı davranıyor? Deneyimlerime göre, çalışan React Native uygulamasını değil, uzak hata ayıklama sekmesini / sayfasını kendileri profilliyorlar.
Craig Otis
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.