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

Już wkrótce pojawią się w internecie nowe typy kolorów i przestrzenie CSS. Równie ekscytujące jest wprowadzenie w Narzędziach deweloperskich nowych narzędzi ułatwiających tworzenie, konwertowanie i debugowanie kolorów w wysokiej rozdzielczości.

Panel Style obsługuje teraz 12 nowych przestrzeni kolorów i 7 nowych gatunków opisanych w specyfikacji poziomu kolorów CSS 4. Zobacz Przewodnik po kolorach CSS w wysokiej rozdzielczości, aby dowiedzieć się więcej o opcjach kolorów dostępnych w internecie.

Oto przykłady definicji kolorów CSS z atrybutami color(), lch(), oklab() i color-mix(). Przykłady definicji kolorów w CSS.

Podczas korzystania z funkcji color-mix() ostateczne kolory możesz wyświetlić w panelu Wynikowy. efekt połączenia kolorów w obliczonym panelu.

Selektor kolorów obsługuje wszystkie nowe przestrzenie kolorów z większą liczbą funkcji. Na przykład kliknij próbkę kolorów color(display-p3 1 0 1). Dodaliśmy również linię gamy, która ułatwia rozróżnienie gamy sRGB i display-p3, aby ułatwić zrozumienie gamy wybranych kolorów. Linia granic gamuty.

Narzędzia deweloperskie obsługują konwertowanie kolorów między formatami kolorów. Aby otworzyć wyskakujące okienko konwersji, kliknij ikonę Zmień format koloru lub po prostu kliknij próbkę koloru Shift w panelu Style.

Podczas konwersji ważne jest, aby wiedzieć, czy została przycięta, aby dopasować ją do dostępnego miejsca. Narzędzia deweloperskie umieszczają obok przekonwertowanego koloru ikonę ostrzeżenia, która informuje o tym klipie. Ostrzeżenie przed przycinaniem kolorów.

Ponadto możesz wybrać kolory na ekranie za pomocą nowego skrótu. Naciśnij „C”, aby aktywować zakraplacz, i naciśnij Escape, aby go dezaktywować. Narzędzie zakraplacza sprawdza kolory tylko w przestrzeni kolorów sRGB. Jeśli na przykład próbujesz wypróbować kolor color(display-p3 1 0 1), który znajduje się poza przestrzenią barw 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 kolorów zostało wycofane, aby zrobić miejsce na nowy format kolorów HD. Wycofanie ustawienia formatu kolorów.

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

Ulepszony interfejs użytkownika punktu przerwania

Nowy panel Punkty przerwania zapewnia szybki dostęp do często używanych funkcji, w szczególności do dezaktywowania, edytowania i usuwania punktów przerwania.

Najważniejsze informacje: – Obie opcje wyjątków wstrzymania zostały przeniesione do panelu Punkty przerwania i oznaczone tekstem, aby nie było ich wątpliwości. Wstrzymaj opcje wyjątków.

Punkty przerwania są grupowane według pliku, uporządkowane według numerów wierszy lub kolumn oraz 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 edycji punktu przerwania, aby otworzyć edytor punktów przerwania. Tutaj możesz wpisać warunek punktu przerwania lub przełączyć się na punkt logowania.

Więcej informacji o debugowaniu za pomocą Narzędzi deweloperskich znajdziesz w dokumentacji debugowania JavaScript.

Problemy z Chromium: 1407586, 1402891, 1402893

Skróty dotyczące Dyktafonu, które można dostosować

Używaj skrótów klawiszowych, aby szybciej nagrywać i odtwarzać wzorce przeglądania.

Dyktafon wprowadza kilka wygodnych skrótów klawiszowych, które umożliwiają szybsze nagrywanie i odtwarzanie działań użytkowników.

Nie pamiętasz skrótów? W porządku. Kliknij przycisk ?, aby w każdej chwili wyświetlić wszystkie skróty. Skróty Dyktafonu.

Te skróty możesz nawet dostosować w menu Ustawienia. Dostosuj skróty Dyktafonu.

Jeśli pracujesz w innym panelu i chcesz rozpocząć rejestrowanie przepływu użytkowników, na początek użyj polecenia Create a new record (Utwórz nowe nagranie) w Menu poleceń w Narzędziach deweloperskich. Utwórz nowe polecenie nagrywania.

Problem z Chromium: 1339771

Lepsze wyróżnienie składni w Angular

Narzędzia deweloperskie ulepszyły wyróżnianie składni szablonów HTML Angular, ułatwiając czytanie kodu i rozpoznawanie jego struktury.

Problemy z Chromium: 1385374, 1385678

Porządkowanie pamięci podręcznych w panelu aplikacji

Okienko Pamięć podręczna znajdziesz teraz w sekcji Pamięć wewnętrzna w panelu Aplikacja, a panel Pamięć podręczna stanu strony internetowej został przeniesiony do sekcji Usługi w tle. Pamięci podręczne w panelu aplikacji.

Problem z Chromium: 1407166

Inne ważne informacje

Oto kilka ważnych poprawek wprowadzonych w tej wersji:

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

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

Prześlij nam sugestię lub opinię na stronie crbug.com.
Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
zatweetuj na @ChromeDevTools.
Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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
Skopiuj ścieżkę JS do węzła DOM.
Aktualizacje panelu audytu, w tym nowy audyt, który wykrywa biblioteki JS i nowe słowa kluczowe umożliwiające dostęp do panelu kontroli z menu poleceń.
Dodatkowa wskazówka: sprawdzaj zapytania o multimedia w trybie urządzenia (film)

Chrome 71

Najedź kursorem na wynik wyrażenia aktywnego, aby wyróżnić węzeł DOM.
Zapisywanie węzłów DOM jako zmiennych globalnych
Informacje o inicjatorze i priorytetach teraz w importach i eksportach plików HAR
Otwórz menu poleceń z menu głównego
Punkty przerwania obrazu w obrazie
Dodatkowa wskazówka: użyj pola monitorEvents() do rejestrowania zdarzeń wywoływanych przez węzeł w konsoli (film)