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

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

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

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 w celu lepszego zrozumienia gamy wybranego koloru. Linia granicy gamy.

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. Konwersja kolorów z różnych formatów.

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. Ostrzeżenie o przycięciu kolorów.

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

Aktywuj zakraplacz.

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

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

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

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

  • 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. Okno edytowania punktu przerwania.

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ć ruchy 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. Skróty Dyktafonu.

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

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

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

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. Pamięci podręczne w panelu aplikacji.

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) Ocenianie wyrażeń z uczestnikami zajęć prywatnych.

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.