Z radością ogłaszamy, że Angular DevTools - rozszerzenie Chrome DevTools, którego możesz używać do sprawdzania struktury swoich aplikacji i profilowania ich wydajności.

Możesz dowiedzieć się więcej o Angular DevTools w poniższym filmie i zainstalować go ze sklepu Chrome Web Store .

Lepsze wrażenia z debugowania kątowego

Przeprowadziliśmy ankietę w Google, która potwierdziła obserwacje, które otrzymaliśmy od zewnętrznych programistów - większość ludzi potrzebuje lepszych narzędzi do debugowania swoich aplikacji.

Na podstawie wyników badań zewnętrznych i wewnętrznych zidentyfikowaliśmy następujące obszary, które wymagają największej uwagi:

• Ulepszenia komunikatów o błędach
• Zrozumienie wykonywania wykrywania zmian
• Zrozumienie hierarchii wtryskiwaczy i tworzenia instancji dostawcy
• Wizualizacja struktury elementów

Funkcje Angular DevTools

Aby rozwiązać pozostałe problemy i zapewnić widok specyficzny dla Angular w oparciu o funkcje Chrome DevTools, opracowaliśmy Angular DevTools we współpracy z Rangle.io . Zespół Rangle stworzył pierwsze narzędzie do debugowania Angulara - Augury , które służyło społeczności przez lata. Pracując razem, opracowaliśmy Angular DevTools od podstaw, wykorzystując ponownie lekcje wyciągnięte z Augury.

W obecnej wersji Angular DevTools skupia się na:

• Wizualizacja struktury elementu
• Zrozumienie wykonywania wykrywania zmian

Zapewnia również przegląd cykli wykrywania zmian, pomagając znaleźć wąskie gardła wydajności, aby zapewnić użytkownikom 60 klatek na sekundę.

Angular DevTools obsługuje aplikacje zbudowane w Angular v9 i nowszych z włączoną opcją Ivy.

Kompletny łańcuch narzędzi programistycznych

W Angular ciężko pracowaliśmy nad dostarczeniem kompletnego zestawu narzędzi dla współczesnego programisty internetowego. Wraz z Angular CLI, usługą językową, narzędziami PWA i komponentami, Angular DevTools zapewnia ważny brakujący element, który pomoże ci lepiej zrozumieć strukturę aplikacji i wydajność środowiska uruchomieniowego.

W przyszłych wydaniach Angular DevTools będziemy pracować nad wypełnieniem luki w funkcjonalności za pomocą Augury, biorąc pod uwagę najbardziej wpływowe funkcje w oparciu o Twoje żądania. Cieszymy się, że możemy podzielić się z Tobą tą pracą! Mamy nadzieję, że przyniesie to wyższy poziom pewności i przejrzystości w procesie tworzenia oprogramowania.

Specjalne podziękowania kierujemy do Aleksandra Bodurri i Sumit Arora, którzy pracowali razem z zespołem Angular nad DevTools.