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

Emulowanie ślepoty barw

Otwórz kartę Renderowanie i skorzystaj z nowej funkcji Emuluj wady wzroku, aby lepiej zrozumieć, jak osoby z różnymi wadami wzroku korzystają z Twojej witryny.

Emulowanie niewyraźnego widzenia.

Narzędzia deweloperskie mogą emulować niewyraźne widzenie i te rodzaje zaburzeń widzenia barw:

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

Istnieją mniej ekstremalne wersje tych zaburzeń widzenia barw, które są w rzeczywistości bardziej powszechne. Na przykład protanomalia to zmniejszona wrażliwość na czerwone światło (w przeciwieństwie do protanopii, czyli całkowitej niezdolności do postrzegania czerwonego światła). Jednak te zaburzenia widzenia z końcówką „-omaly” nie są tak wyraźnie zdefiniowane: każda osoba z takim zaburzeniem widzenia jest inna i może widzieć rzeczy inaczej (może być w stanie dostrzec więcej lub mniej odpowiednich kolorów).

Projektując aplikacje internetowe pod kątem bardziej ekstremalnych symulacji w Narzędziach deweloperskich, masz pewność, że będą one dostępne dla osób z protanomalią, deuteranomalią, tritanomalią i achromatopsją.

Wyślij opinię na temat problemu nr 1003700 w Chromium lub dowiedz się więcej o wdrażaniu.

Emulowanie ustawień regionalnych

Możesz teraz emulować ustawienia regionalne, ustawiając lokalizację w sekcji Czujniki > Lokalizacja. Otwórz menu poleceń i wpisz Sensors, aby otworzyć kartę Czujniki. Po wykonaniu tych działań Narzędzia deweloperskie zmodyfikują bieżące domyślne ustawienia regionalne, co wpłynie na:

• Intl.* interfejsy API, np. new Intl.NumberFormat().resolvedOptions().locale
• inne interfejsy JavaScript API uwzględniające ustawienia regionalne, np.String.prototype.localeCompare i *.prototype.toLocaleString, np. 123_456..toLocaleString();
• Interfejsy API 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żnym od ustawień regionalnych.

Prześlij opinię na temat problemu z Chromium nr 1051822.

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

Panel Sieć zawiera teraz informacje do debugowania zasad umieszczania zasobów z innych domen.

W kolumnie Stan znajduje się teraz krótkie wyjaśnienie, dlaczego żądanie zostało zablokowane, oraz link do wyświetlenia nagłówków tego żądania w celu dalszego debugowania:

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

Prześlij opinię na temat problemu z Chromium nr 1051466.

Nowe ikony punktów przerwania, warunkowych punktów przerwania i punktów rejestrowania

Panel Źródła ma nowe ikony punktów przerwania, warunkowych punktów przerwania i punktów rejestrowania:

• Punkty przerwania są oznaczone czerwonymi kółkami.
• Warunkowe punkty przerwania są oznaczone kółkami w połowie czerwonymi, a w połowie białymi.
• Punkty logowania są oznaczone czerwonymi kółkami z ikonami konsoli.

Nowe ikony mają sprawić, że interfejs będzie bardziej spójny z innymi narzędziami do debugowania GUI (które zwykle oznaczają punkty przerwania na czerwono) i ułatwić odróżnianie od siebie 3 funkcji na pierwszy rzut oka.

Prześlij opinię na temat problemu z Chromium nr 1041830.

Wyświetlanie żądań sieciowych, które ustawiają konkretną ścieżkę pliku cookie

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

Więcej specjalnych słów kluczowych, takich jak cookie-path, znajdziesz w artykule Filtrowanie próśb według usług.

Zadokuj po lewej stronie w menu poleceń.

Otwórz menu poleceń i uruchom polecenie Dock to left, aby przenieść Narzędzia deweloperskie na lewą stronę obszaru wyświetlania.

Prześlij opinię na temat problemu nr 1011679 w Chromium.

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

Opcja otwierania Ustawień z menu głównego znajduje się teraz w sekcji Więcej narzędzi.

Prześlij opinię na temat problemu z Chromium nr 1050855.

Panel Audyty to teraz panel Lighthouse.

Zespoły Narzędzi deweloperskich i Lighthouse często otrzymywały od programistów stron internetowych informacje, że słyszeli, że można uruchomić Lighthouse z Narzędzi deweloperskich, ale gdy próbowali to zrobić, nie mogli znaleźć panelu „Lighthouse”. Dlatego panel Audyty został zmieniony na panel Lighthouse.

Usuwanie wszystkich lokalnych zastąpień w folderze

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

Prześlij opinię na temat problemu 1016501 w Chromium.

Zaktualizowany interfejs długich zadań

Długie zadanie to kod JavaScript, który przez długi czas monopolizuje wątek główny, powodując zawieszenie 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 „Długotrwałe zadanie” jest teraz oznaczona czerwonym tłem w paski.

Wyślij opinię do Chromium issue #1054447.

Obsługa ikon z możliwością maskowania w panelu Manifest

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

W panelu Manifest zaznacz nowe pole wyboru Pokazuj tylko minimalny bezpieczny obszar dla ikon z możliwością maskowania, aby sprawdzić, czy ikona z możliwością maskowania będzie dobrze wyglądać na urządzeniach z Androidem Oreo. Więcej informacji znajdziesz w artykule Czy moje obecne ikony są gotowe?.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Skontaktuj się z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.