Angular, React, Vue ve Svelte gibi web çerçeveleri, karmaşık web uygulamalarını büyük ölçekte yazmayı ve sürdürmeyi kolaylaştırır.
Ancak bu çerçeveler, tarayıcının uygulama modelinin üzerinde bir soyutlama katmanı oluşturur. Hatta bu soyutlamaları kullanan geliştiriciler tarafından yazılan kod genellikle okunaksız, küçültülmüş ve paketlenmiş koda dönüştürülür. Sonuç olarak, bu uygulamalarda hata ayıklamak ve profil oluşturmak için DevTools'un gücünden tam olarak yararlanmak geliştiriciler için zor olabilir.
Örneğin, Geliştirici Araçları'ndaki Performans paneliyle bir Angular uygulamasının profilini oluşturduğunuzda şunları görürsünüz:
Bu şekilde sunulan bilgilerle, kod tabanınızda hangi performans darboğazlarının olduğunu anlamak zor olabilir. Sonuçta, çerçeve yapılarıyla ilgili bağlam eksik ve gösterilen bilgilerin büyük bir kısmı küçültülmüş kod biçiminde. Ayrıca, doğrudan yazdığınız kodla ilgili etkinlik, çerçeve iç işleyişi ve aynı sayfada çalışıyor olabilecek diğer üçüncü taraf kodları arasında ayrım yapmak da zordur.
Çerçeve ve soyutlama yazarlarının yaygın bir motivasyonu, profil oluşturma verilerini çerçeve kavramları açısından sunan kendi DevTools uzantılarını uygulamaktır. Bu araçlar, belirli bir çerçeveyle oluşturulan uygulamalarda hata ayıklama ve profil oluşturma işlemlerinde çok faydalıdır. Ancak çoğu zaman, çerçeve verilerini kendi çerçeve profilinizdeki DevTools Performance panelindeki tarayıcı çalışma zamanı bilgileriyle ilişkilendirmeniz gerekir. Bu iki veri kaynağının bağımsız araçlarda ayrı ayrı sunulması, özellikle uygulama daha karmaşık hale geldikçe darboğazları tespit etmeyi ve düzeltmeyi zorlaştırır. Angular Geliştirici Araçları Profil Oluşturucu'daki bir profil görselleştirme örneğini aşağıda bulabilirsiniz:
İdeal bir dünyada, geliştiriciler iki veri kaynağının aynı zaman çizelgesine eşlenmiş olarak aynı bağlamda birlikte gösterildiği bir görünüme sahip olurdu.
Bu nedenle, Performans paneli Extensibility API'yi kullanarak Angular çalışma zamanı verilerini doğrudan Performans paneline getirmek için Angular ekibiyle işbirliği yaptık. Bu yayında, API'nin neler yapabileceğini ve bunu başarmak için Angular çerçevesinde nasıl kullanıldığını inceleyeceğiz. Bu uygulama, kendi araçlarını kullanarak ve Chrome Geliştirici Araçları'nı kullanan geliştiricilere yardımcı olarak geliştirici deneyimlerini iyileştirmek isteyen diğer çerçeveler ve soyutlamalar için örnek teşkil edebilir.
Performans paneli genişletilebilirlik API'si nedir?
API, tarayıcı verilerinin geri kalanıyla aynı zaman çizelgesi içinde Performans paneli izine kendi zamanlama girişlerinizi eklemenize olanak tanır. Bunu yapmanıza olanak tanıyan iki mekanizma vardır:
- User Timing API
console.timeStampAPI'si
User Timing API
Girişleri aşağıdaki gibi eklemek için performance.mark ve performance.measure simgelerini kullanabilirsiniz:
// Mark used to represent the start of some activity you want to measure.
// In this case, the rendering of a component.
const renderStart = performance.now();
// ... later in your code
performance.measure("Component rendering", {
start: renderStart,
detail: {
devtools: {
dataType: "track-entry",
track: "Components",
color: "secondary",
properties: [
["Render reason", "Props changed"],
["Priority", "low"]
],
}
}
});
Bu işlem, zaman çizelgenize aşağıdaki ölçümle birlikte Bileşenler parçasının eklenmesine neden olur:
Bu API, girişleri Performans zaman çizelgesi arabelleğine eklemenize ve aynı zamanda bunları Geliştirici Araçları Performans paneli kullanıcı arayüzünde görüntülemenize olanak tanır.
Bu API ve devtools nesnesi hakkında daha fazla bilgiyi belgelerde bulabilirsiniz.
console.timeStamp API'si
Bu API, User Timing API'nin basit bir alternatifidir. Aynı örneği kullanarak şunları yapabilirsiniz:
// Mark used to represent the start of some activity you want to measure.
// In this case, the rendering of a component.
const renderStart = performance.now();
// ... later in your code
console.timeStamp(
"Component rendering",
/* start time */ renderStart,
/* end time (current time) */ undefined,
/* track name */ "Components",
/* track group name */ undefined,
/* color */ "secondary"
);
Bu API, uygulamaları ölçmek için yüksek performanslı bir yöntem sunar: User Timing API alternatifinin aksine, arabelleğe alınmış veriler oluşturmaz. Bu API yalnızca Geliştirici Araçları'ndaki **Performans** paneline veri ekler. Bu nedenle, Geliştirici Araçları bir izleme kaydetmediğinde API'ye yapılan çağrılar no-op (hiçbir şey yapmaz) olur. Bu da API'yi önemli ölçüde hızlandırır ve performansa duyarlı sıcak yollar için uygun hale getirir. Tüm özelleştirme parametrelerini içeren bir nesne yerine konumsal bağımsız değişkenlerin kullanılması, API'nin mümkün olduğunca hafif tutulması amacına da hizmet eder.
Performans panelini genişletmek için console.timeStamp'i kullanma ve dokümanlarda iletebileceğiniz parametreler hakkında daha fazla bilgi edinin.
Angular'ın Geliştirici Araçları genişletilebilirlik API'sini nasıl entegre ettiği
Angular ekibinin, Chrome Geliştirici Araçları ile entegrasyon için genişletilebilirlik API'sini nasıl kullandığına göz atacağız.
console.timestamp ile ek yükten kaçınma
Angular'ın Performance panel genişletilebilirlik API'si ile enstrümanı 20. sürümden itibaren kullanılabilir. Geliştirici Araçları'ndaki performans verileri için istenen ayrıntı düzeyi, hızlı bir API gerektirir. Bu nedenle, enstrümantasyonu ekleyen çekme isteğinde (60217) console.timeStamp API'sinin kullanılması tercih edildi. Bu, uygulama çalışma zamanı performansının, profil oluşturma API'sinin olası ek yükünden etkilenmesini önler.
Araçlandırılmış veriler
Angular kodunun ne zaman ve neden çalıştığına dair iyi bir resim sunmak için başlatma ve oluşturma işlem hatlarının birden fazla bölümü izlenir. İzlenen bölümler arasında şunlar yer alır:
- Uygulama ve bileşen başlatma.
- Bileşen oluşturma ve güncelleme
- Etkinlik işleyiciler ve yaşam döngüsü kancalarının yürütülmesi.
- Diğer birçok özellik (ör. dinamik bileşen oluşturma ve blok oluşturmayı erteleme)
Renkle kodlama
Renk kodları, geliştiriciye belirli bir ölçüm girişinin hangi kategoriye ait olduğunu bildirmek için kullanılır. Örneğin, geliştirici tarafından yazılan TypeScript kodunun yürütülmesini işaretleyen girişler için kullanılan renkler, Angular derleyicisi tarafından üretilen kod için kullanılan renklerden farklıdır.
Aşağıdaki ekran görüntüsünde, bunun nasıl sonuçlandığını görebilirsiniz. Örneğin, giriş noktaları (değişiklik algılama ve bileşen işleme gibi) mavi, oluşturulan kod mor ve TypeScript kodu (etkinlik işleyiciler ve kancalar gibi) yeşil renkte gösterilir.
API'ye iletilen renk bağımsız değişkeninin bir CSS renk değeri değil, DevTools kullanıcı arayüzüyle eşleşen bir renkle eşlenmiş semantik bir jeton olduğunu unutmayın. Olası değerler primary, secondary ve tertiary, olup bunların -dark ve -light varyantları ile error rengi de mevcuttur.
Parça sayısı
Bu makalenin yazıldığı sırada, tüm Angular çalışma zamanı verileri aynı izlemeye ("🅰️ Angular" etiketli) ekleniyordu. Ancak izlemeye birden fazla parça ekleyebilir ve hatta parçalarınızı gruplandırabilirsiniz. Örneğin, console.timeStamp API'ye aşağıdaki çağrıların yapıldığını varsayalım:
console.timeStamp("Component 1", componentStart1, componentEnd1, "Components", "Client", "primary");
console.timeStamp("Component 2", componentStart2, componentEnd2, "Components", "Client", "primary");
console.timeStamp("Hook 1", hookStart, hookEnd, "Hooks", "Client", "primary");
console.timeStamp("Fetch data base", fetchStart, fetchEnd, "Server", "primary");
Veriler, aşağıdaki şekilde parçalar halinde düzenlenir:
Ayrı izler kullanmak, örneğin eşzamansız etkinlikleriniz, paralel olarak çalışan birden fazla işiniz veya kullanıcı arayüzünün farklı alanlarında ayrılmaya değer olacak kadar farklı etkinlik gruplarınız olduğunda yararlı olabilir.
Bu, Angular geliştiricileri için neden önemli?
Bu doğrudan entegrasyonun amacı, daha sezgisel ve kapsamlı bir performans analizi deneyimi sunmaktır. Angular'ın dahili performans verilerini doğrudan **Performans** panelinde göstererek geliştiriciler şunları elde eder:
- Gelişmiş Görünürlük: Bileşen oluşturma, değişiklik algılama döngüleri gibi Angular'a özgü performans etkinliklerini daha geniş tarayıcı zaman çizelgesinde görünür hale getirme.
- Daha İyi Anlama: Angular'ın dahili süreçleri hakkında bağlam açısından zengin bilgiler sayesinde performans darboğazlarını daha etkili bir şekilde belirleyebilirsiniz.
Entegrasyonu etkinleştirme
Genişletilebilirlik API'sinin kullanımı, Angular 20 sürümünden itibaren geliştirme derlemelerinde resmi olarak kullanıma sunulmuştur. Etkinleştirmek için uygulamanızda veya Geliştirici Araçları konsolunda genel yardımcı program `ng.enableProfiling()`'i çalıştırmanız gerekir. Entegrasyon hakkında daha fazla bilgiyi [Angular belgelerinde](https://angular.dev/best-practices/profiling-with-chrome-devtools) bulabilirsiniz.
Diğer Dikkat Edilmesi Gereken Noktalar
Dikkate alınması gereken bazı önemli noktalar.
Kaynak eşlemeleri ve küçültülmüş kod:
Kaynak eşlemeleri, paketlenmiş / küçültülmüş kod ile yazılmış karşılığı arasındaki boşluğu kapatmayı amaçlayan, yaygın olarak kullanılan bir araçtır. Bu nedenle...
Kaynak eşlemeleri, paketlenmiş uygulamalardaki küçültülmüş kod sorununu çözmüyor mu?
Kaynak haritaları gerçekten faydalı olsa da karmaşık küçültülmüş web uygulamalarının profili oluşturulurken karşılaşılan zorlukları tamamen ortadan kaldırmaz. Kaynak eşlemeleri, Geliştirici Araçları'nın küçültülmüş kodu orijinal kaynak kodunuza geri eşlemesine olanak tanıyarak hata ayıklamayı kolaylaştırır. Ancak performans analizi için yalnızca kaynak haritalarına güvenmek yine de bazı sınırlamalar getirebilir. Örneğin, yalnızca kaynak haritalarıyla çerçeve iç kısımlarının ve yazılan kodun görsel olarak nasıl ayrılacağını seçmek zordur. Öte yandan, genişletilebilirlik API'si bu ayrımı yapma ve geliştiricinin en uygun gördüğü şekilde sunma esnekliği sağlar.
Chrome Geliştirici Araçları Uzantıları:
DevTools API'yi kullanan Chrome uzantıları, Geliştirici Araçları'nı genişletmek için yaygın olarak kullanılan bir araçtır.
Bu API kullanıma sunulduğuna göre artık özel profiller (ör. Chrome Geliştirici Araçları uzantıları) gereksiz mi veya bunların kullanılması önerilmiyor mu?
Hayır, bu API, Chrome Geliştirici Araçları uzantıları gibi özel profil oluşturucuların geliştirilmesinin yerine geçmek veya bu tür geliştiricileri caydırmak için tasarlanmamıştır. Bu araçlar, belirli ihtiyaçlara göre uyarlanmış özel özellikler, görselleştirmeler ve iş akışları sunmaya devam edebilir. Performans paneli genişletilebilirlik API'si, özel verilerin Performans panelindeki tarayıcı görselleştirmeleriyle sorunsuz bir şekilde entegre edilmesini amaçlar.
Gelecek
Genişletilebilirlik API'sinin görünümü.
Daha fazla çerçeve ve soyutlamayla çalışma
Diğer çerçevelerin ve soyutlamaların, geliştiricilerinin profil oluşturma deneyimini iyileştirmek için API'yi kullanmaya başlaması bizi heyecanlandırıyor. Örneğin React, çerçevesi için API'nin deneysel olarak benimsenmesini uygulamıştır. Bu enstrüman, istemci ve sunucu bileşeni oluşturmanın yanı sıra React planlama API'leri verilerini de gösterir. Bu özellik ve nasıl etkinleştirileceği hakkında daha fazla bilgiyi React'in sayfasında bulabilirsiniz.
Üretim derlemeleri
Bu API'nin amaçlarından biri, üretim derlemelerinde enstrümantasyonu benimsemek ve etkinleştirmek için genel olarak çerçeveler ve soyutlama sağlayıcılarla birlikte çalışmaktır. Geliştiriciler, uygulamayı kullanıcılarının deneyimlediği şekilde profillendirebileceğinden bu durum, bu soyutlamalarla geliştirilen uygulamaların performansı üzerinde büyük bir etkiye sahip olabilir. Hızı ve düşük ek yükü nedeniyle console.timeStamp API'nin bu amaca ulaşmayı sağlayacağına inanıyoruz. Ancak şu anda çerçeveler hâlâ API ile denemeler yapıyor ve geliştiriciler için hangi tür enstrümanların daha ölçeklenebilir ve kullanışlı olduğunu araştırıyor.