Nowości w Narzędziach deweloperskich (Chrome 83)

Kayce Basques

Emulacja ślepoty barw

Otwórz kartę Renderowanie i użyj nowej funkcji Naśladowanie niedowidzenia, aby lepiej poznać sposób, w jaki użytkownicy z różnymi rodzajami niedowidzenia widzą Twoją witrynę.

Emulacja niewyraźnego widzenia.

Emulacja niewyraźnego widzenia.

Narzędzia dla programistów mogą emulować niewyraźne widzenie i te typy ślepoty barw:

  • Protanopia: niemożność postrzegania czerwonego światła.
  • Deuteranopia: niemożność postrzegania zielonego światła.
  • Tritanopia: niezdolność do postrzegania niebieskiego światła.
  • Achromatopsja: niemożność postrzegania kolorów z wyjątkiem odcieni szarości (bardzo rzadka).

Istnieją mniej skrajne przypadki tych niedoborów widzenia barw, które są częstsze. Na przykład protanomalia to zmniejszona wrażliwość na czerwone światło (w przeciwieństwie do protanopii, która jest całkowitą niezdolnością do postrzegania czerwonego światła). Jednak te „nieprawidłowe” zaburzenia widzenia nie są tak wyraźnie zdefiniowane: każda osoba z takim zaburzeniem ma inne widzenie i może postrzegać rzeczy inaczej (może widzieć więcej lub mniej odpowiednich kolorów).

Projektując aplikacje internetowe z myślą o bardziej ekstremalnych symulacjach w DevTools, możesz mieć pewność, że będą one dostępne dla osób z protanomalią, deuteronomalią, tritanomalią i achromatopsją.

Prześlij opinię do problemu Chromium 1003700 lub dowiedz się więcej o wdrożeniu.

Emulowanie ustawień regionalnych

Możesz teraz emulować lokalizacje, ustawiając lokalizację w sekcji Czujniki > Lokalizacja. Otwórz menu poleceń i wpisz Sensors, aby otworzyć kartę Czujniki. Po wykonaniu tych czynności DevTools zmienia bieżącą domyślną lokalizację, co ma wpływ na:

  • Intl.* Interfejsy API, np. new Intl.NumberFormat().resolvedOptions().locale
  • inne interfejsy JavaScript API uwzględniające lokalizację, takie jak String.prototype.localeCompare i *.prototype.toLocaleString, np. 123_456..toLocaleString()
  • interfejsy DOM, takie jak navigator.language i navigator.languages;
  • nagłówek żądania HTTP Accept-Language.

Aby wypróbować tę funkcję, zapoznaj się z przykładem kodu zależnego od lokalizacji.

Prześlij opinię na temat problemu Chromium o numerze 1051822.

Debugowanie zasad umieszczania zasobów z innych domen (COEP)

Panel Sieć zawiera teraz informacje o debugowaniu dotyczące zasad umieszczania zasobów z innych domen.

Kolumna Stan zawiera teraz krótkie wyjaśnienie, dlaczego żądanie zostało zablokowane, a także link do nagłówków żądania, który umożliwia dalsze debugowanie:

Zablokowane żądania w kolumnie Stan

Więcej wskazówek dotyczących rozwiązywania problemów znajdziesz w sekcji Nagłówki odpowiedzi na karcie Nagłówki:

Więcej wskazówek znajdziesz w sekcji Nagłówki odpowiedzi

Prześlij opinię na temat problemu Chromium o numerze 1051466.

Nowe ikony punktów przerwania, warunków i punktów logowania

Panel Źródła zawiera nowe ikony punktów przecięcia, punktów przecięcia warunkowego i punktów logowania:

Nowe ikony zostały wprowadzone, aby interfejs był bardziej spójny z innymi narzędziami do debugowania GUI (które zwykle oznaczają punkty kontrolne na czerwono) oraz aby ułatwić odróżnienie tych 3 funkcji na pierwszy rzut oka.

Prześlij opinię do problemu Chromium o numerze 1041830.

Użyj nowego filtra słów kluczowych cookie-path w panelu Sieć, aby skupić się na żądaniach sieci, które ustawiają określoną ścieżkę cookie.

Aby poznać więcej słów kluczowych, takich jak cookie-path, filtruj żądania według usług.

Zamocuj po lewej stronie w menu poleceń

Otwórz menu poleceń i uruchom polecenie Dock to left, aby przenieść DevTools na lewą stronę widoku.

Narzędzia deweloperskie zadokowane po lewej stronie widocznego obszaru

Prześlij opinię na temat problemu Chromium o numerze 1011679.

Opcja Settings w menu głównym została przeniesiona

Opcja otwierania Ustawień w Menu głównym znajduje się teraz w sekcji Więcej narzędzi.

„Menu główne” otwarte z „Więcej narzędzi” skupionym na „Ustawieniach”

Prześlij opinię na temat problemu Chromium o numerze 1050855.

Panel Audyty to teraz panel Lighthouse

Zespoły DevTools i Lighthouse często otrzymują od programistów stron internetowych informacje, że słyszeli o możliwości uruchomienia Lighthouse w DevTools, ale gdy chcieli to zrobić, nie mogli znaleźć panelu Lighthouse. Dlatego panel sprawdzania jest teraz panelem Lighthouse.

Panel Lighthouse

Usuwanie wszystkich zastąpień lokalnych w folderze

Po skonfigurowaniu Zastąpień lokalnych możesz kliknąć folder prawym przyciskiem myszy i wybrać nową opcję Usuń wszystkie zastąpienia, aby usunąć wszystkie Zastąpienia lokalne w tym folderze.

Usuń wszystkie zastąpienia

Prześlij opinię na temat problemu Chromium o numerze 1016501.

Zaktualizowany interfejs długich zadań

Długie zadanie to kod JavaScriptu, który monopolizuje wątek główny przez długi czas, powodując zablokowanie strony internetowej.

Od jakiegoś czasu możesz wizualizować długie zadania w panelu Wydajność, ale w Chrome 83 interfejs wizualizacji długich zadań w panelu Wydajność został zaktualizowany. Część zadania, która wymaga dużo czasu, jest teraz oznaczona czerwonym pasiastym tłem.

Nowy interfejs długich zadań

Prześlij opinię na temat problemu Chromium o numerze 1054447.

Obsługa ikony z możliwością maskowania na panelu Manifest

Android Oreo wprowadził adaptacyjne ikony, które wyświetlają ikony aplikacji w różnych kształtach na różnych modelach urządzeń. Ikony z możliwością zamaskowania to nowy format ikon, który obsługuje ikony adaptacyjne. Dzięki niemu możesz mieć pewność, że ikona PWA będzie dobrze wyglądać na urządzeniach obsługujących standard ikon z możliwością zamaskowania.

Aby sprawdzić, czy ikona z możliwością maskowania będzie dobrze wyglądać na urządzeniach z Androidem Oreo, w pliku Manifest zaznacz nowe pole wyboru Pokaż tylko minimalny bezpieczny obszar dla ikon z możliwością maskowania. Aby dowiedzieć się więcej, przeczytaj artykuł Czy moje obecne ikony są gotowe?.

Pole wyboru „Pokaż tylko minimalny bezpieczny obszar dla ikon z możliwością maskowania”

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.