Nowości w Narzędziach dla deweloperów (Chrome 111)

Jecelyn Yeen

Debugowanie koloru HD w panelu Style

Wprowadzamy w internecie nowe typy kolorów i spacje w CSS. Ciekawe jest również wprowadzenie w Narzędziach deweloperskich nowych narzędzi, które pomagają programistom w tworzeniu, konwertowaniu i debugowaniu kolorów w wysokiej rozdzielczości.

Panel Style obsługuje teraz 12 nowych przestrzeni kolorów i 7 nowych zakresów kolorów zgodnie ze specyfikacją CSS Color Level 4. Zapoznaj się z przewodnikiem po kolorach CSS w wysokiej rozdzielczości, aby dokładnie poznać opcje kolorów dostępne w internecie.

Oto przykłady definicji kolorów CSS za pomocą atrybutów color(), lch(), oklab() i color-mix().

Podczas korzystania z funkcji color-mix() możesz wyświetlić ostateczne dane wyjściowe w kolorze w panelu Obliczone.

Selektor kolorów obsługuje wszystkie nowe przestrzenie kolorów z większą liczbą funkcji. Na przykład kliknij próbkę koloru color(display-p3 1 0 1). Dodaliśmy również linię granicy zakresu, która pozwala rozróżnić gamy sRGB i display-p3, co pozwala lepiej zrozumieć gamę wybranego koloru.

Narzędzia deweloperskie obsługują konwertowanie kolorów z różnych formatów. Kliknij ikonę Zmień format koloru, aby otworzyć wyskakujące okienko konwersji, lub kliknij Shift i kliknij próbkę koloru w panelu Style.

Przy konwertowaniu warto wiedzieć, czy została ona przycięta w zależności od miejsca wyświetlania. Obok przekonwertowanego koloru Narzędzia deweloperskie umieszczają ikonę ostrzeżenia o przypadku tego klipu.

Dodatkowo za pomocą nowego skrótu możesz wybierać kolory z ekranu. Naciśnij „c”. aby aktywować zakraplacz, a potem naciśnij Escape, aby go dezaktywować. Narzędzie zakraplacza sprawdza tylko kolory z przestrzeni kolorów sRGB. Jeśli na przykład spróbujesz pobrać kolor color(display-p3 1 0 1), który znajduje się poza przestrzenią kolorów sRGB, narzędzie zakraplacza dopasuje kolor do najbliższego koloru w przestrzeni sRGB, czyli purpurowego color(display-p3 0.92 0.2 0.97).

Uwaga: ustawienie Format koloru zostało wycofane, by zrobić miejsce na nowy format kolorów HD.

Problemy z Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

Ulepszony UX punktu przerwania

Nowy panel Punkty przerwania zapewnia szybki dostęp do często używanych funkcji, takich jak dezaktywacja, edytowanie i usuwanie punktów przerwania.

Oto kilka najważniejszych kwestii: – Obie opcje wyjątku wstrzymania zostały przeniesione do panelu Punkty przerwania i oznaczone tekstem, aby był bardziej zrozumiały.

• Punkty przerwania są grupowane według pliku i uporządkowane według numerów wierszy lub kolumn. Można je zwijać.

• Dostępne są nowe opcje dezaktywowania, usuwania i edytowania punktów przerwania po najechaniu kursorem na punkt przerwania lub plik.

• Kliknij przycisk edytowania punktu przerwania, aby otworzyć edytor punktów przerwania. W tym miejscu możesz wpisać warunek punktu przerwania lub przełączyć się na punkt logowania.

Aby dowiedzieć się, jak debugować je za pomocą Narzędzi deweloperskich, przeczytaj dokumentację na temat debugowania JavaScriptu.

Problemy z Chromium: 1407586, 1402891, 1402893

Skróty z możliwością dostosowania Dyktafonu

Używaj skrótów klawiszowych, aby szybciej nagrywać i odtwarzać informacje o ruchu użytkownika.

Dyktafon wprowadza kilka wygodnych skrótów klawiszowych, które umożliwiają szybsze nagrywanie i odtwarzanie ścieżek użytkownika.

Nie pamiętasz skrótów? To żaden problem. W dowolnym momencie kliknij przycisk ?, aby wyświetlić wszystkie skróty.

Możesz nawet dostosować te skróty w menu Ustawienia.

Jeśli używasz innego panelu i chcesz rozpocząć nagrywanie ścieżki użytkownika, użyj polecenia Utwórz nowe nagranie w menu poleceń w Narzędziach deweloperskich.

Problem z Chromium: 1339771

Ulepszone wyróżnienie składni w Angular

W Narzędziach deweloperskich ulepszyliśmy podświetlanie składni w szablonach HTML Angular, co ułatwiło odczytywanie kodu i rozpoznawanie jego struktury.

Problemy z Chromium: 1385374, 1385678

Uporządkuj pamięci podręczne w panelu Aplikacja

Okienko Pamięć podręczna znajduje się teraz w sekcji Miejsce na dane w panelu Aplikacja. Panel Pamięć podręczna stanu strony internetowej przenieśliśmy do sekcji Usługi w tle.

Problem w Chromium: 1407166

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

• Zaktualizowaliśmy Narzędzia deweloperskie, by podczas wczytywania map źródłowych uwzględniały ustawienie Wyłącz pamięć podręczną. (1407084).
• Panel Elementy natychmiast automatycznie ustawia ostrość na pierwszym pasującym elemencie w wynikach wyszukiwania. (1381853)
• Różne poprawki poprawiające niezawodność mapy źródeł i punktów przerwania. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• Aby ułatwić debugowanie, Narzędzia deweloperskie obsługują teraz ocenianie wyrażeń z członkami klas prywatnych. (1381806)

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   > 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.