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

Kayce Basques

Emuluj wady wzroku

Otwórz kartę Renderowanie i użyj nowej funkcji Emuluj wady wzroku, aby uzyskać lepsze efekty. pojęcie to, jak użytkownicy z wadami wzroku odbierają Twoją witrynę.

Naśladowanie niewyraźnego widzenia.

Naśladowanie niewyraźnego widzenia.

Narzędzia deweloperskie mogą emulować niewyraźne widzenie oraz te typy zaburzeń rozpoznawania barw:

  • Protanopia: niezdolność do zauważenia jakiegokolwiek czerwonego światła.
  • Deuteranopia: niezdolność do postrzegania zielonego światła.
  • Tritanopia: niezdolność do patrzenia na światło niebieskie.
  • Achromatopsja: niezdolność postrzegania żadnego koloru z wyjątkiem odcieni szarości (bardzo rzadkie).

Występują mniej ekstremalne wersje zaburzeń rozpoznawania barw i w rzeczywistości występują częściej. Na przykład protanomalia cechuje się mniejszą wrażliwością na światło czerwone (w przeciwieństwie do protanopii, jest całkowita niezdolność do dostrzegania czerwonego światła). Jednak atrybuty „-omalia” wady wzroku są nie do końca jasno określoną: każda osoba z taką wadą wzroku jest inna i może dostrzegać pewne rzeczy inaczej (może dostrzec więcej/mniej odpowiednich kolorów).

Aplikacje internetowe zaprojektowane z myślą o bardziej ekstremalnych symulacjach w Narzędziach deweloperskich również dla osób z protanomaliami, deuteranomaliami, tritanomaliami i achromatomalią.

Wyślij opinię do problemu z Chromium nr 1003700 lub dowiedz się więcej o implementacji.

Emuluj języki

Możesz teraz emulować ustawienia regionalne, ustawiając lokalizację w sekcji Czujniki > Lokalizacja. Otwórz polecenie Menu i wpisz Sensors, aby uzyskać dostęp do karty Czujniki. Po wykonaniu tych działań w Narzędziach deweloperskich zmienia bieżący język domyślny, wpływając na następujące elementy:

  • Intl.* interfejsów API, np. new Intl.NumberFormat().resolvedOptions().locale
  • inne interfejsy API JavaScript zależne od języka, takie jak String.prototype.localeCompare czy *.prototype.toLocaleString, np. 123_456..toLocaleString()
  • Interfejsy DOM API, np. navigator.language i navigator.languages
  • nagłówek żądania HTTP Accept-Language,
.

Zapoznaj się z przykładowym kodem zależnym od regionu, aby samodzielnie wypróbować tę funkcję.

Wyślij opinię do problemu nr 1051822 w Chromium.

Debugowanie zasad dotyczących umieszczania treści z innych domen (COEP)

Panel Sieć zawiera teraz informacje debugowania dotyczące zasady umieszczania treści z różnych domen.

Kolumna Stan zawiera teraz krótkie wyjaśnienie, dlaczego żądanie zostało zablokowane. aby wyświetlić nagłówki tego żądania w celu dalszego debugowania:

Zablokowane prośby w kolumnie Stan

Sekcja Nagłówki odpowiedzi na karcie Nagłówki zawiera więcej wskazówek dotyczących rozwiązywania problemów problemy:

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

Wyślij opinię do problemu nr 1051466 w Chromium.

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

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

Wprowadziliśmy nowe ikony, aby ujednolicić interfejs z innymi narzędziami do debugowania interfejsu GUI. (punkty przerwania są zwykle oznaczone kolorem czerwonym) i w celu ułatwienia rozróżnienia wystarczy spojrzeć.

Wyślij opinię do problemu nr 1041830 w Chromium.

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

Więcej o specjalnych słowach kluczowych, takich jak cookie-path, znajdziesz w artykule Filtrowanie żądań według właściwości.

Zadokuj po lewej w menu poleceń

Otwórz menu poleceń i uruchom polecenie Dock to left, aby przenieść Narzędzia deweloperskie na lewo widoczny obszar.

Narzędzia deweloperskie zadokowane po lewej stronie widocznego obszaru

Wyślij opinię do problemu nr 1011679 w Chromium.

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

Opcja otwierania Ustawień z Menu głównego jest teraz dostępna w sekcji Więcej narzędzi.

Menu główne otwórz menu „Więcej narzędzi” zaznaczono opcję „Ustawienia”

Wyślij opinię do problemu nr 1050855 w Chromium.

Panel Audyty zmienił nazwę na Lighthouse

Zespoły DevNarzędzia i Lighthouse często otrzymywały od programistów stron internetowych opinie, że można uruchomić Lighthouse z poziomu Narzędzi deweloperskich, ale gdy chcieli to wypróbować, nie można znaleźć kolumny „Lighthouse” więc panel Audyty zmieni się na Lighthouse.

Panel Lighthouse

Usuwanie wszystkich lokalnych zastąpień w folderze

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

Usuń wszystkie zastąpienia

Wyślij opinię do problemu nr 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 do zablokowania strony.

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. Długie zadanie fragment zadania jest teraz oznaczony pasiastym czerwonym tłem.

Nowy interfejs długich zadań

Wyślij opinię do problemu nr 1054447 w Chromium.

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

Na Androidzie Oreo wprowadzono ikony adaptacyjne, które wyświetlają ikony aplikacji w różnych kształtach na różnych modelach urządzeń. Ikony możliwe do przesuwania 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, które obsługują maskowanie. standardowych ikon.

W pliku manifestu włącz nowe pole wyboru Pokaż 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. Otwórz stronę Are my gotowe?, aby dowiedzieć się więcej.

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

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

  • Prześlij nam sugestię lub opinię na crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.