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

Jecelyn Yeen

Debugowanie kolorów HD w panelu Stylów

W internecie pojawią się nowe typy i przestrzenie kolorów CSS. Nie mniej ekscytujące jest to, że w Narzędziach deweloperskich pojawiły się nowe narzędzia, które ułatwiają programistom tworzenie, konwertowanie i debugowanie kolorów o wysokiej rozdzielczości.

Panel Style obsługuje teraz 12 nowych przestrzeni barw i 7 nowych gamutów zgodnie ze specyfikacją CSS Level 4. Aby dowiedzieć się więcej o opcjach kolorów dostępnych w internecie, zapoznaj się z przewodnikiem po kolorach CSS w wysokiej rozdzielczości.

Oto przykłady definicji kolorów CSS z użyciem wartości color(), lch(), oklab() i color-mix().

Gdy używasz funkcji color-mix(), możesz wyświetlić końcowy kolor w panelu Obliczone.

Selektor kolorów obsługuje wszystkie nowe przestrzenie kolorów z większą liczbą funkcji. Kliknij na przykład próbkę koloru color(display-p3 1 0 1). Dodano też linię granicy gam, która odróżnia gamę sRGB od display-p3, aby ułatwić zrozumienie zakresu wybranego koloru.

Narzędzia dla programistów umożliwiają konwertowanie kolorów między formatami kolorów. Aby otworzyć okno konwersji, kliknij ikonę Zmień format koloru lub naciśnij Shift + kliknij próbnik kolorów w panelu Style.

Podczas konwertowania ważne jest, aby wiedzieć, czy konwersja została przycięta, aby pasowała do miejsca. Ostrzeżenie o przycięciu wyświetla się obok przekonwertowanego koloru.

Dodatkowo za pomocą nowego skrótu możesz wybierać kolory na ekranie. Naciśnij „c”, aby aktywować pipetę, i Escape, aby ją dezaktywować. Narzędzie zakraplacza próbkuje tylko kolory w przestrzeni kolorów sRGB. Jeśli na przykład spróbujesz pobrać próbkę koloru color(display-p3 1 0 1), który znajduje się poza przestrzenią kolorów sRGB, narzędzie pipeta przytnie kolor do najbliższego koloru w przestrzeni sRGB, czyli do magenta color(display-p3 0.92 0.2 0.97).

Na koniec: ustawienie Format kolorów zostało wycofane, aby zrobić miejsce dla nowego formatu kolorów HD.

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

Ulepszone punkty przerwania

Przeprojektowana karta Punkty graniczne zapewnia szybki dostęp do najczęściej używanych funkcji, w tym do dezaktywacji, edycji i usuwania punktów granicznych.

Oto najważniejsze zmiany: - Obie opcje wyjątków dotyczącej pauzy zostały przeniesione do panelu Punkty graniczne i oznaczone etykietami, aby były bardziej czytelne.

• Punkty przerwania są pogrupowane według pliku, uporządkowane według numerów wierszy lub kolumn i można je zwinąć.

• Po najechaniu kursorem na punkt przerwania lub plik dostępne są nowe opcje dezaktywacji, usuwania i edytowania punktów przerwania.

• Kliknij przycisk edycji punktu przerwania, aby otworzyć edytor punktów przerwania. Tutaj możesz podać warunek punktu przełamania lub przejść do punktu logowania.

Aby dowiedzieć się, jak debugować za pomocą Narzędzi deweloperskich, zapoznaj się z przewodnikiem po debugowaniu JavaScriptu.

Problemy z Chromium: 1407586, 1402891, 1402893

Dostosowywanie skrótów w nagrywarce

Za pomocą skrótów klawiszowych możesz szybciej nagrywać i odtwarzać ścieżki użytkownika.

Rejestrator zawiera kilka przydatnych skrótów klawiszowych, które umożliwiają szybsze nagrywanie i odtwarzanie ścieżek użytkownika.

Nie pamiętasz skrótów? Nie ma problemu. W każdej chwili możesz kliknąć przycisk ?, aby wyświetlić wszystkie skróty.

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

Jeśli pracujesz w innym panelu i chcesz rozpocząć nagrywanie ścieżki użytkownika, w Narzędziach deweloperskich kliknij Menu poleceń, a następnie wybierz polecenie Utwórz nowe nagranie.

Problem z Chromium: 1339771

Lepsze podświetlanie składni w Angular

W DevTools ulepszono wyróżnianie składni w przypadku szablonów HTML w Angular, co ułatwia czytanie kodu i rozpoznawanie jego struktury.

Problemy z Chromium: 1385374, 1385678

Reorganizowanie pamięci podręcznej w panelu Aplikacja

Panel Pamięć podręczna pamięci podręcznej można teraz znaleźć w sekcji Pamięć w panelu Aplikacja, a panel Pamięć podręczna stanu strony internetowej został przeniesiony do sekcji Usługi w tle.

Problem z Chromium: 1407166

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

• Narzędzia deweloperskie zostały zaktualizowane, aby podczas wczytywania map źródeł uwzględniać ustawienie Wyłącz pamięć podręczną. (1407084)
• Panel Elementy automatycznie ustawia teraz fokus na pierwszym pasującym elemencie w wynikach wyszukiwania. (1381853)
• różne poprawki zwiększające niezawodność mapy źródłowej i punktów przełamania. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• Aby ułatwić debugowanie, narzędzia DevTools obsługują teraz obliczanie wyrażeń z elementami prywatnymi klasy. (1381806)

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.

• Przesyłaj opinie 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.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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