Components sekmesi, seçili bileşen veya direktif için canlı bir signal grafiği gösterebilir. Grafik, o bileşendeki signal'lerin, computed'ların, effect'lerin ve diğer reaktif düğümlerin birbirine nasıl bağlı olduğunu gösterir; bu da reaktif veri akışlarını anlamayı ve hatalarını ayıklamayı kolaylaştırır.
Signal grafiğini açma
Components sekmesinde bir bileşen veya direktif seçin. Özellik paneli başlığında Show Signal Graph düğmesine tıklayın. Signal grafiği bileşen ağacının yanında açılır.
Doğrudan belirli bir signal'e de gidebilirsiniz: özellikler görünümünde özelliğin yanındaki signal grafiği düğmesine tıklayın veya özelliğin birden fazla eylemi varsa eylemler menüsünü açıp Show in signal graph seçeneğini seçin.
Show Signal Graph düğmesi, incelenen uygulama signal grafiği API'sini desteklediğinde otomatik olarak görünür. Etkinleştirilecek bir ayar yoktur.
Grafiği okuma
Grafikteki düğümler, seçili bileşene katılan reaktif düğümleri temsil eder:
- Signal:
signal()ile oluşturulan yazılabilir bir signal. - Computed:
computed()ile oluşturulan türetilmiş bir değer. - Effect:
effect()veyaafterRenderEffect()ile oluşturulan bir yan etki. - Linked signal:
linkedSignal()ile oluşturulan yazılabilir bir signal. - Template: render edilirken signal'leri okuyan bileşen şablonu.
- Resource: Bir
resource()veyarxResource()'a ait signal'ler, daraltılabilir bir kümede gruplanır. İçindeki tek tek düğümleri görmek için küme düğümünde Expand'e tıklayın.
Düğümler arasındaki çizgiler reaktif bağımlılıkları gösterir: her düğüm, okuduğu üreticilere (yukarı akış) ve kendisini okuyan bağımlılara (aşağı akış) bağlanır.
TIP: Düğümler, reaktif düğümün debugName değeriyle etiketlenir. Signal'lerinize, computed'larınıza ve özellikle genellikle bir sınıf üyesine atanmayan effect'lerinize bir debugName vermek, grafiği okumayı çok daha kolay hale getirir:
effect(
() => {
// ...
},
{debugName: 'name in graph'},
);Grafikte arama
Bir düğümü ada göre bulmak için grafik araç çubuğundaki arama simgesine tıklayın. Angular DevTools tüm eşleşmeleri vurgular ve aralarında gezinmenizi sağlar.
Bir düğümü inceleme
Bir düğüme tıklayarak ayrıntılar panelini açın. Panel, düğümün mevcut değerini genişletilebilir bir ağaç olarak gösterir ve şu eylemleri sunar:
- View source: Düğümün tanımına Sources sekmesinde (Chrome) veya Debugger sekmesinde (Firefox) gidin. Kaynak konumu mevcut değilse bu eylem devre dışıdır.
- Set breakpoint: Signal güncellendiğinde yürütmeyi duraklatın. Kesme noktaları yalnızca Chromium tabanlı tarayıcılarda kullanılabilir.
- Watch signal: Signal'in güncellemelerini ve geçersiz kılınmalarını tarayıcı konsoluna kaydedin. İzlemeyi durdurmak için eyleme tekrar tıklayın.
- Highlight upstream / downstream: Düğümün bağımlılıklarının veya kendisine bağımlı olanların yollarını izleyin.
Bileşen hiç signal kullanmıyorsa Angular DevTools, grafik yerine "No signals in this component" mesajını gösterir.
Sürüm desteği
Signal grafiği, Angular 19 veya sonraki bir sürümle oluşturulmuş ve geliştirme modunda çalışan bir uygulama gerektirir.