Angular DevTools, Angular uygulamaları için hata ayıklama ve profil oluşturma yetenekleri sağlayan bir tarayıcı uzantısıdır.
Angular DevTools'u Chrome Web Mağazası'ndan veya Firefox Eklentileri'nden yükleyin.
Chrome veya Firefox DevTools'u herhangi bir web sayfasında F12 veya Ctrl+Shift+I (Windows veya Linux) ve Fn+F12 veya Cmd+Option+I (Mac) tuşlarına basarak açabilirsiniz. Tarayıcı DevTools açık ve Angular DevTools yüklü olduğunda, "Angular" sekmesi altında bulabilirsiniz.
HELPFUL: Chrome'un yeni sekme sayfası yüklü uzantıları çalıştırmaz, bu nedenle Angular sekmesi DevTools'ta görünmez. Görmek için başka herhangi bir sayfayı ziyaret edin.
Uygulamanızı Açma
Uzantıyı açtığınızda dört ek sekme göreceksiniz:
| Sekmeler | Ayrıntılar |
|---|---|
| Components | Uygulamanızdaki bileşenleri ve direktifleri keşfetmenize ve durumlarını önizlemenize veya düzenlemenize olanak tanır. |
| Profiler | Uygulamanızın profilini çıkarmanıza ve değişiklik algılama yürütme sırasındaki performans darboğazını anlamanıza olanak tanır. |
| Injector Tree | Environment ve Element Injector hiyerarşisini görselleştirmenize olanak tanır |
| Router Tree | Uygulamanızın yönlendirme ağacını görselleştirmenize olanak tanır. |
Transfer State gibi diğer sekmeler deneyseldir ve devtools ayarları üzerinden etkinleştirilebilir; henüz belgelenmemiştir.
HELPFUL: Chromium tabanlı tarayıcı kullanıcıları için, Performans paneli entegrasyonu ilginizi çekebilir.
Angular DevTools'un sağ üst köşesinde bir bilgi düğmesi bulunur ve bu düğme bir açılır pencere açar. Bilgi açılır penceresi, diğerlerinin yanı sıra sayfada hangi Angular sürümünün çalıştığını ve devtools sürümünü içerir.
Angular uygulaması algılanamadı
Angular DevTools'u açarken "Angular application not detected" hata mesajı görürseniz, bu, sayfadaki bir Angular uygulamasıyla iletişim kuramadığı anlamına gelir. Bunun en yaygın nedeni, incelediğiniz web sayfasının bir Angular uygulaması içermemesidir. Doğru web sayfasını incelediğinizden ve Angular uygulamasının çalıştığından emin olun.
Üretim yapılandırmasıyla derlenmiş bir uygulama algılandı
"We detected an application built with production configuration. Angular DevTools only supports development builds." hata mesajı görürseniz, bu, sayfada bir Angular uygulaması bulunduğu ancak üretim optimizasyonlarıyla derlendiği anlamına gelir. Üretim için derleme yaparken, Angular CLI performansı artırmak için sayfadaki JavaScript miktarını en aza indirmek amacıyla çeşitli hata ayıklama özelliklerini kaldırır. Bu, DevTools ile iletişim kurmak için gereken özellikleri de içerir.
DevTools'u çalıştırmak için uygulamanızı optimizasyonlar devre dışı bırakılmış şekilde derlemeniz gerekir. ng serve bunu varsayılan olarak yapar.
Dağıtılmış bir uygulamada hata ayıklamanız gerekiyorsa, yapılandırmanızda optimization yapılandırma seçeneği ({"optimization": false}) ile optimizasyonları devre dışı bırakın.