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(). Przykłady definicji kolorów w CSS

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

Selektor kolorów obsługuje wszystkie nowe przestrzenie barw 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. Linia graniczna gammy.

Narzędzia dla programistów obsługują konwersję 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. Konwersja kolorów między formatami kolorów.

Podczas konwertowania ważne jest, aby wiedzieć, czy konwersja została przycięta, aby pasowała do miejsca. Obok przekonwertowanego koloru pojawi się ikona ostrzeżenia, która poinformuje Cię o przycięciu. Ostrzeżenie o przyciętym kolorze.

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

Aktywuj zakraplacz.

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

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. Opcje wyjątków wstrzymania.

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

  • Po najechaniu kursorem na punkt przerwania lub plik dostępne są nowe opcje dezaktywacji, usuwania i edytowania punktów przerwania. Nowe opcje dezaktywacji 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. Okno edycji punktu przerwania

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

Korzystaj ze skrótów klawiszowych, aby 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.Skróty w Dyktafonie.

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

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.Utwórz nowe polecenie nagrywania.

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. Wyróżnianie składni w szablonach HTML w Angular.

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. Pamięć podręczna w panelu Aplikacja.

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) Obliczanie wyrażeń z prywatnymi elementami klasy.

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.