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

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia elementów

Nowa plakietka podsiatki CSS

Panel Elementy otrzyma nową plakietkę subgrid dla podsiatki. Ta funkcja jest obecnie eksperymentalna w Chrome Canary.

Aby sprawdzić i debugować zagnieżdżoną siatkę, która jest siatką podrzędną, a tym samym dziedziczy liczbę i rozmiar ścieżek z elementu nadrzędnego, kliknij plakietkę. Przełącza nakładkę, która pokazuje kolumny, wiersze i ich numery na górze elementu w widocznym obszarze.

Plakietka podrzędnej siatki i nakładka w widocznym obszarze.

Listę wszystkich plakietek w panelu Elementy znajdziesz w artykule Informacje o plakietkach.

Problem z Chromium: 1442536.

Szczegółowość selektora w etykietkach

W sekcji Elementy > Style najedź kursorem na nazwę selektora, aby w etykietce zobaczyć jego wagę właściwości.

Etykietka z masą specyficzności selektora.

Problem z Chromium: 1204932.

Wartości niestandardowych właściwości CSS w etykietkach

W sekcji Elementy > Style najedź kursorem na nazwę niestandardowej właściwości CSS, aby zobaczyć jej wartość w etykietce.

Etykietka z wartością niestandardowej właściwości CSS.

Zespół Narzędzi deweloperskich chce podziękować 丝 i Suyanowi za wprowadzenie tych ulepszeń.

Problem z Chromium: 1380779.

Ulepszenia źródeł

Wyróżnianie składni CSS

W przypadku wstępnie przetworzonych plików CSS panel Źródła takich jak SASS, SCSS i LESS to:

Ulepszone podświetlanie składni CSS i obsługa wbudowanych edytorów w sekcji Źródła.

Problemy z Chromium: 1302261, 1392085.

Skrót do ustawiania warunkowych punktów przerwania

Teraz możesz szybciej ustawiać warunkowe punkty przerwania za pomocą skrótu. Aby otworzyć okno punktu przerwania, przytrzymaj Command (MacOS) lub Control (Windows / Linux) i kliknij numer wiersza w lewej kolumnie w sekcji Źródła > Edytor.

Numer wiersza w lewej kolumnie oraz okno z punktem przerwania.

Problem z Chromium: 1405767.

Aplikacja > Łagodzenie śledzenia przekierowań

Eksperyment Łagodzenie śledzenia przekierowań w Chrome pozwala identyfikować i usuwać stan witryn, które prawdopodobnie śledzą witryny za pomocą techniki śledzenia odrzuceń. W panelu Aplikacja > Usługi w tle znajdziesz nową kartę Łagodzenie śledzenia przekierowań, na której możesz ręcznie wymusić stosowanie działań łagodzących śledzenie, a także wyświetlić listę witryn, których stany zostały usunięte.

Wypróbuj tę funkcję zabezpieczeń:

  1. Blokuj pliki cookie innych firm w Chrome. Otwórz i włącz Menu z 3 kropkami. > Ustawienia > Zabezpieczenia. Prywatność i bezpieczeństwo > Pliki cookie i inne dane witryn > Zaznaczono opcję. Blokuj pliki cookie innych firm.
  2. W usłudze chrome://flags ustaw dla eksperymentu Ograniczanie śledzenia przekierowań wartość Włączono z usunięciem.
  3. Sprawdź tę stronę demonstracyjną, otwórz Aplikacja > Usługi w tle > Łagodzenie śledzenia przekierowań, kliknij na stronie link odsyłający, poczekaj (10 sekund), aż Chrome zarejestruje odrzucenie, i kliknij Wymuś uruchomienie, aby natychmiast usunąć stan.

Łagodzenie śledzenia przekierowań informuje o usunięciu stanu.

Dodatkowo karta Problemy ostrzega o nadchodzącym usunięciu stanu.

Problem z Chromium: 1432303.

Lighthouse 10.2.0

Panel Lighthouse korzysta teraz z Lighthouse w wersji 10.2.0. W szczególności test Największe wyrenderowanie treści zawiera tabelę z obliczeniami fazowymi symulowanego i ograniczania narzędzi deweloperskich. Zobacz też pełną listę zmian.

Tabela etapów LCP.

Podstawowe informacje na temat korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Domyślnie ignoruj skrypty treści

Opcja Ustawienia. Ustawienia > Lista ignorowanych > Pole wyboru. Skrypty treści wstrzykiwane przez rozszerzenia są teraz domyślnie włączone.

Po włączeniu tego ustawienia:

  • Debuger ignoruje takie skrypty i nie zatrzymuje się na zgłoszonych przez nie wyjątkach.
  • Panel Źródła > Stos wywołań pomija ignorowane klatki. Aby wyłączyć pomijanie, zaznacz Pole wyboru. Pokaż klatki z listy ignorowanych.
  • Konsola zwija ignorowane klatki w zrzutach stosu. Kliknij Pokaż więcej ramek, aby rozwinąć widok, lub Pokaż mniej, aby ponownie zwinąć.

Skrypty treści wstrzykiwane przez włączone domyślnie rozszerzenia. Aby go znaleźć, otwórz Ustawienia, a potem listę Ignoruj.

Dodatkowo pola wyboru na liście ignorowanych stały się bardziej zrozumiałe.

Problemy z Chromium: 1440958, 1364501.

Sieć > Odpowiedź z domyślnym drukiem

W panelu Sieć > Odpowiedź domyślnie wyświetlają się zminimalizowane treści odpowiedzi w formacie ładno, podobnie jak w przypadku panelu Źródła.

Włączono drukowanie ładunkowe w oknie odpowiedzi na karcie Sieć.

Dodatkowo pliki SVG otrzymują podświetlenie składni.

Wyróżnianie składni SVG.

Problemy z Chromium: 1382752, 1385374.

Różne wyróżnienia

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Ustawienia. Ustawienia > Urządzenia: do listy ciągów agentów dodano Facebook na Androida w wersji 407 na Pixelu 6.
  • Sieć: dodano skrót Wyczyść dziennik sieci (1444991):
    • MacOS: Command + K
    • Windows/Linux: Control + L
  • Usunęliśmy opcję rozwijaną w menu Dyktafon > Nagrywanie N > Panel Statystyki wydajności (1414773).
  • Arkusze stylów, których nie udało się wczytać, są ukryte w drzewie nawigacji (1386059).
  • Skuteczność: poprawiliśmy nieprawidłowe wyświetlanie rozwijanej ścieżki Interakcje (1432510).
  • Elementy: arkusze stylów, których nie udało się wczytać, są teraz podkreślane falistymi liniami (1440626).
  • Debuger nie wykonuje automatycznie czynności w WebAssembly, gdy nie ma wtyczki dla danego języka (1443342).
  • W przypadku plików CSS skrót, który przesuwa kursor o jedno słowo, jest przywracany w sekcji Źródła > Edytor (1241848):
    • MacOS: Alt + strzałka
    • Windows/Linux: Ctrl + strzałka

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

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59