Nowości w Narzędziach deweloperskich (Chrome 94)

Używanie Narzędzi deweloperskich w wybranym języku

Narzędzia deweloperskie w Chrome obsługują teraz ponad 80 języków, dzięki czemu możesz pracować w wybranym przez siebie języku.

Otwórz Ustawienia i wybierz preferowany język w sekcji Preferencje > . Język i ponownie załaduj Narzędzia deweloperskie.

Ustawienia szerokość="800" wysokość="494">

Problem z Chromium: 1163928

Nowe urządzenia Nest Hub na liście urządzeń

Możesz teraz symulować wymiary urządzeń Nest Hub i Nest Hub Max w trybie urządzenia.

Kliknij Toggle Device Toolbar   Przełącz pasek narzędzi urządzenia  , a potem pod listą urządzeń wybierz Nest Hub lub Nest Hub Max.

Urządzenie Nest Hub w trybie urządzenia

Problem z Chromium: 1223525

Wersje próbne punktu początkowego w widoku szczegółów ramki

Informacje o testach origin w witrynie znajdziesz teraz w widoku szczegółów ramki w panelu Aplikacje.

Wersje próbne origin zapewniają dostęp do nowej lub eksperymentalnej funkcji, która umożliwia tworzenie funkcji, które Twoi użytkownicy mogą wypróbować przez ograniczony czas, zanim staną się dostępne dla wszystkich.

Otwórz stronę z testami origin (np. stronę demonstracyjną). W panelu Aplikacja przewiń w dół do sekcji Klatki i wybierz górną ramkę.

Wersje próbne punktu początkowego w widoku szczegółów ramki

Problem z Chromium: 607555

Nowa plakietka zapytań dotyczących kontenerów CSS

Obok elementów kontenera (elementów nadrzędnych, które pasują do kryteriów określonych w regułach @container) dodawana jest nowa plakietka container. Kliknij plakietkę, aby przełączyć wyświetlanie na stronie nakładki wybranego kontenera i wszystkich jego elementów podrzędnych.

Plakietka zapytań dotyczących kontenerów CSS

Problem z Chromium: 1146422

Nowe pole wyboru do odwracania filtrów sieci

Aby odwrócić filtry w panelu Sieć, użyj nowego pola wyboru Odwróć.

Możesz na przykład wpisać „kod-stanu: 404” do filtrowania żądań sieciowych o stanie 404. Zaznacz pole wyboru Odwróć, aby wykluczyć filtr (pokaż wszystkie żądania sieciowe, które nie mają stanu 404).

Odwróć filtry sieci

Problem w Chromium: 1054464

Niedługo wycofamy pasek boczny konsoli

Pasek boczny konsoli zostanie usunięty, a interfejs filtrów zostanie przeniesiony na pasek narzędzi. Czy masz jakieś uwagi lub chcesz podzielić się opinią? Poinformuj nas o tym za pomocą tego narzędzia do śledzenia problemów.

Komunikat o wycofaniu paska bocznego konsoli

Problem z Chromium: 1232937

Wyświetlaj nieprzetworzone nagłówki Set-Cookie na karcie Problemy i panelu Sieć

Narzędzia deweloperskie wyświetlają teraz na karcie Problemy nieprzetworzone nagłówki Set-Cookie.

Wcześniej Narzędzia deweloperskie nie wyświetlały w panelu Network nieprawidłowych plików cookie (nieprawidłowego nagłówka Set-Cookie). Po dodaniu w panelu Sieć nowego filtra response-header-set-cookie użytkownicy mogą filtrować nieprzetworzoną odpowiedź nagłówka Set-Cookie. Narzędzia deweloperskie połączą nieprzetworzone nagłówki Set-Cookie na karcie Problemy z panelem Sieć.

Surowy plik „Set-Cookie” nagłówków na karcie Problemy i panelu Sieć.

Problem z Chromium: 1179186

Spójne akcesoria wyświetlania natywnego jako właściwości w konsoli

Konsola spójnie wyświetla teraz natywne metody dostępu jako własne właściwości.

Na przykład podczas oceny wyrażenia new Int8Array([1, 2, 3]) w konsoliKonsoli natywne metody dostępu, takie jak length, byteOffset, nie były wyświetlane w podglądzie. Dzięki tej najnowszej aktualizacji natywne akcesory są wyświetlane w podglądzie, a po rozwinięciu ich wartości są szybko oceniane.

Spójne akcesoria wyświetlania natywnego jako właściwości w konsoli

Problemy z Chromium: 1076820, 1199247

Prawidłowe zrzuty stosu błędów dla wbudowanych skryptów z #sourceURL

Narzędzia deweloperskie poprawnie interpretują wbudowane skrypty za pomocą funkcji #sourceURL i wyświetlają prawidłowe zrzuty stosu błędów na potrzeby debugowania.

Wcześniej w Narzędziach deweloperskich wyświetlała się nieprawidłowa lokalizacja skryptów w tekście z elementem #sourceURL – względem otaczającego dokumentu, a nie otwierającego tagu <script>.

Prawidłowe zrzuty stosu błędów dla wbudowanych skryptów z #sourceURL

Problemy z Chromium: 1183990, 578269

Zmień format koloru w panelu Obliczone

Możesz teraz zmienić format koloru dowolnego elementu w panelu „Obliczony” przez naciśnięcie klawisza Shift i kliknięcie podglądu koloru.

Shift + kliknij podgląd koloru, aby zmienić format koloru

Problem z Chromium: 1226371

Zastępowanie etykiet niestandardowych etykietkami natywnymi HTML

Narzędzia deweloperskie wykorzystują teraz natywne etykietki HTML we wszystkich komponentach. Narzędzia deweloperskie od dawna miały implementację niestandardowej etykietki ze względu na brak stylu natywnej etykietki HTML.

Niestety obsługa niestandardowej etykietki jest skomplikowana i regularnie napotykamy skomplikowane błędy.

Po zmianie wagi rozwiązań niestandardowych okazało się, że etykietki natywnego kodu HTML są wystarczające w Narzędziach deweloperskich, a ich zastosowanie zapobiega wielu problemom, z którymi mierzą się użytkownicy.

Etykietka narzędzi deweloperskich

Problem z Chromium: 1223391

[Funkcja eksperymentalna] Ukryj problemy na karcie Problemy

Włącz eksperyment z menu ukrywania problemów, aby ukryć problemy na karcie Problemy. Dzięki temu możesz skupić się na ważnych dla Ciebie kwestiach.

Aby go ukryć, na karcie Problem najedź kursorem na problem, kliknij menu problemów Więcej po prawej stronie i wybierz Ukryj problemy tego typu.

Eksperymentalne menu kontekstowe ukrywania problemu

Problem z Chromium: 1175722

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.