Ta strona została przetłumaczona przez Cloud Translation API.

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. 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, co pozwala lepiej zrozumieć gamę 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 tym klipie. 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 następnie 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.

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 najważniejsze informacje: – Obie opcje wyjątków wstrzymania zostały przeniesione do panelu Punkty przerwania i oznaczone tekstem, który jest bardziej zrozumiały. Opcje wstrzymania wyjątków.

Punkty przerwania są pogrupowane 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. 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)

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.
Opublikuj tweeta na stronie @ChromeDevTools.
Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Wizualizacja danych o skuteczności w panelu Skuteczność
Podświetl węzły tekstowe w drzewie DOM
Kopiowanie ścieżki JS do węzła DOM
Aktualizacje panelu kontroli, w tym nowa kontrola wykrywająca biblioteki JS i nowe słowa kluczowe umożliwiające dostęp do panelu Kontrole z poziomu menu poleceń
Dodatkowa wskazówka: sprawdzaj zapytania o multimedia w trybie urządzenia (film)

Chrome 71

Najedź kursorem na wynik Live Expression, aby podświetlić węzeł DOM.
Przechowywanie węzłów DOM jako zmiennych globalnych
Inicjator i informacje o priorytetach są teraz dostępne w importach i eksportach HAR
Otwieranie menu poleceń z menu głównego
Punkty przerwania obrazu w obrazie
Dodatkowa wskazówka: użyj metody monitorEvents(), aby zarejestrować w konsoli zdarzenia uruchomione przez węzeł (film)