Debugowanie może być żmudne, a nawet bardziej frustrujące, gdy nie można łatwo zlokalizować błędu. Narzędzia programistyczne Chrome 106 (devtools) mają uprościć proces debugowania, czyniąc go łatwiejszym i szybszym.
Możesz teraz łatwo sortować pliki, optymalizować wyszukiwanie, ukrywać skrypty innych firm, uzyskiwać dostęp do szczegółowych raportów wydajności i wiele więcej omówionych w tym artykule. Te narzędzia deweloperskie są niezbędne, zwłaszcza dla programistów pracujących z frameworkami JavaScript, takimi jak Angular, React i Vue.js, które mają teraz interaktywną i uproszczoną konsolę do wizualizacji i debugowania ich kod.
Przyjrzyjmy się bliżej niektórym z tych nowych funkcji:
Aby w pełni skorzystać z nowych aktualizacji Chrome 106, pobierz Chrome Kanarek, Dev, Lub Beta jako domyślną przeglądarkę programistyczną. Będziesz mieć dostęp do najnowszych narzędzi dla programistów, które umożliwiają testowanie interfejsów API platformy internetowej oraz szybkie identyfikowanie problemów lub błędów w Twojej witrynie, aby zapewnić użytkownikom najlepszą obsługę klienta.
1. Pliki pogrupowane według autorstwa/wdrożenia
Możesz teraz przejść bezpośrednio do składników aplikacji, grupując pliki w stworzony/wdrożony na źródło płyta. Iść do Źródło > menu z trzema kropkami > Grupuj według autorstwa/wdrożenia. Teraz, kiedy otwierasz pliki, możesz zobaczyć tylko wdrożone pliki na panelu.
W poprzednich wersjach Chrome wszystkie pliki kodu źródłowego były widoczne w formacie nawigacja panelu, co utrudnia znalezienie pojedynczego pliku.
2. Uproszczone wyszukiwanie plików
Możesz ograniczyć wyszukiwanie w panelu źródłowym tylko do odpowiednich plików. W poprzednich wersjach Chrome pliki generowane przez platformę i inne strony trzecie pojawiały się w wynikach wyszukiwania, co utrudniało identyfikację wyszukiwanego elementu.
Ta aktualizacja to wersja devtools optymalizująca wyszukiwanie w przeglądarkach internetowych Ściągawki w wyszukiwarce Google. Aby skonfigurować to ustawienie, przejdź do Menu z trzema kropkami > Ukryj źródła listy ignorowanych.
Skrypty innych firm zapełniają twoją konsolę? Chrome 106 dodał rozszerzenie listy ignorowanych na mapie źródłowej, aby umożliwić ukrywanie skryptów generowanych automatycznie przez frameworki i inne strony trzecie.
Aby aktywować tę funkcję, przejdź do Ustawienia > Lista ignorowanych > Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych. Gdy ponownie otworzysz pliki, konsola pokaże tylko odpowiednie pliki powiązane z twoją aplikacją. Możesz teraz zobaczyć swój kod bez rozpraszania uwagi.
4. Szczegółowe ślady stosu
Zidentyfikowanie błędu na konsoli zajmie Ci mniej czasu dzięki nowej funkcji Chrome 106. Narzędzia dla programistów Chrome zapewniają szczegółowy widok operacji asynchronicznych i ich głównych przyczyn. W poprzednich wersjach widoczne były tylko zdarzenia, które doprowadziły do operacji. Najnowsze narzędzia devTools pokazują cały łańcuch operacji i ich przyczyny.
Google skonfigurował a console.createTask() metoda w Chrome 106. Ta metoda umożliwia platformom wykonywanie śledzenia stosu na konsoli. Debugowanie kodu JavaScript za pomocą narzędzi devtools jest równie proste jak debugowanie CSS za pomocą Chrome.
5. Śledź interakcje w panelu wydajności
Śledź nowe interakcje w Wydajność panelu, aby zidentyfikować potencjalne problemy z responsywnością Twojej aplikacji. W Chrome 106 wszystkie interakcje są widoczne na ścieżce Interakcje po operacji. Ścieżka pokazuje źródło interakcji i ich identyfikatory. Śledzenie pomaga zidentyfikować źródło i odpowiednio je przechwycić.
6. LCP Timing Insights w panelu wydajności
The Największa zawartość farby (LCP) szczegóły dotyczące czasu są teraz dostępne na stronie panel analiz wydajności. LCP to kluczowy wskaźnik wydajności sieci, który informuje o czasie renderowania obrazów lub bloków tekstu ładowanych na stronie internetowej. 2,5 sekundy lub mniej to dobry wynik wydajności.
Aby wyświetlić statystyki, przejdź do panel wydajności>menu z trzema kropkami-więcej opłat za przejazd>statystyki wydajności. Podczas ponownego odtwarzania nagrania, Detale panel pokaże czasy ładowania.
Dodatkowe aktualizacje w Chrome 106
Inne ulepszenia Chrome 106 obejmują:
- Możesz eksportować swoje nagrania skryptów bez problemów z rejestrator płyta. Przycisk eksportu miał problem w poprzednich wersjach.
- Masz teraz próbnik kolorów w pliku Style panelowe elementy SVG.
- Możesz zidentyfikować skrypty zniekształcające Twój układ w pliku Informacje o wydajności płyta.
- Ścieżki czcionek internetowych LCP można wyświetlać w pliku Informacje o wydajności płyta.
Te funkcje mogą poprawić sposób korzystania z narzędzi programistycznych przeglądarki.
Co zyskujesz dzięki Chrome 106
Najnowsze ulepszenia narzędzi deweloperskich w Chrome 106 przyspieszają proces debugowania. Nowe aktualizacje ułatwiają wizualizację operacji za pomocą uproszczonej i dynamicznej konsoli pozwala ukrywać pliki, wyłączać skrypty, rejestrować i mieć dogłębny wgląd w aplikację, kiedy debugowanie.
Dodatki Chrome 106 pozwolą Ci zarządzać aplikacją i optymalizować jej wydajność. Śmiało i ciesz się tymi korzyściami, aktualizując Chrome do najnowszej wersji 106.