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

Jecelyn Yeen

Ograniczanie liczby żądań WebSocket

Panel Sieć obsługuje teraz ograniczanie żądań web socket. Wcześniej ograniczanie przepustowości sieci nie działało w przypadku żądań web socket.

Otwórz panel Sieć, kliknij żądanie WebSocket i otwórz kartę Wiadomości, aby obserwować przesyłanie wiadomości. Wybierz Wolne 3G, aby zmniejszyć prędkość.

Ograniczanie liczby żądań WebSocket

Problem z Chromium: 423246

Nowy panel interfejsu Reporting API w panelu Aplikacja

Korzystając z nowego panelu interfejsu Reporting API, możesz sprawdzać raporty generowane na stronie i ich stan.

Interfejs Reporting API pomaga monitorować naruszenia bezpieczeństwa na stronie, wycofane wywołania interfejsu API i inne kwestie.

Otwórz stronę, która korzysta z interfejsu Reporting API (np. stronę demonstracyjną). W panelu Aplikacja przewiń w dół do sekcji Usługi działające w tle i otwórz panel Interfejs API do raportowania.

W sekcji Raporty znajdziesz listę raportów wygenerowanych na Twojej stronie wraz z ich stanem. Kliknij go, aby wyświetlić szczegóły raportu.

Sekcja Punkty końcowe zawiera przegląd wszystkich punktów końcowych skonfigurowanych w nagłówku Reporting-Endpoints.

Panel interfejsu API do raportowania

Problem z Chromium: 1205856

Poczekaj, aż element będzie widoczny lub klikalny w panelu Rejestrator.

Podczas odtwarzania nagrania ścieżki użytkownika panel Nagrywarka będzie teraz czekać, aż element będzie widoczny lub klikalny w widoku, lub spróbuje automatycznie przewinąć element do widoku, zanim odtworzy krok. Wcześniej odtwarzanie kończyło się niepowodzeniem od razu.

Oto przykład menu poza ekranem, które znajduje się poza obszarem widoku i po aktywacji przesuwa się do środka. Użytkownik musi otworzyć menu i kliknąć pozycję menu. Wcześniej ponowne odtwarzanie kończyło się niepowodzeniem, ponieważ element menu wciąż się wsuwał i nie był jeszcze widoczny w widocznym obszarze. Problem został rozwiązany.

Problem z Chromium: 1257499

Ulepszony styl, formatowanie i filtrowanie konsoli

Nadaj logowi odpowiedni styl za pomocą kodu zmiany znaczenia ANSI

Aby prawidłowo stylizować komunikaty konsoli, możesz teraz używać sekwencji znaków sterujących ANSI. Wcześniej konsola Narzędzi deweloperskich miała bardzo ograniczone (i częściowo nieprawidłowe) wsparcie dla sekwencji wyjścia ANSI.

Programiści Node.js często kolorują komunikaty logu za pomocą sekwencji ucieczki ANSI, często z pomocą niektórych bibliotek stylu, takich jak chalk, colors, ansi-colors czy kleur.

Dzięki tym zmianom możesz teraz bezproblemowo debugować aplikacje Node.js za pomocą Narzędzi deweloperskich, korzystając z odpowiednio pokolorowanych komunikatów konsoli. Otwórz to demo, aby zobaczyć to na własne oczy.

Więcej informacji o formatowaniu i stylowaniu komunikatów w konsoli za pomocą Narzędzi deweloperskich znajdziesz w dokumentacji Formatowanie i stylowanie komunikatów w konsoli.

stylizacja konsoli

Problemy z Chromium: 1282837, 1282076

Właściwa obsługa specyfikatorów formatu %s, %d, %i i %f

Konsola poprawnie wykonuje teraz konwersje typu %s, %d, %i i %f zgodnie z standardem konsoli. Wcześniej wyniki rozmów były niespójne.

obsługa specyfikatorów formatu w wiadomościach konsoli

Problemy z Chromium: 1277944, 1282076

Bardziej intuicyjny filtr grup w konsoli

Gdy filtrujesz komunikat konsoli, będzie on teraz wyświetlany, jeśli jego treść pasuje do filtra lub tytuł grupy (lub grupy nadrzędnej) pasuje do filtra. Wcześniej mimo filtra tytuł grupy konsoli był wyświetlany.

Oprócz tego, jeśli wyświetla się wiadomość w konsoli, jest też widoczna grupa (lub grupa nadrzędna), do której należy.

filtr grup w konsoli

Problem z Chromium: 1068788

Ulepszenia map źródłowych

Debugowanie rozszerzenia Chrome za pomocą plików mapy źródłowej

Teraz możesz debugować rozszerzenie Chrome za pomocą plików map źródłowych. Wcześniej narzędzia deweloperskie obsługiwały mapę źródłową tylko w wersji inline do debugowania rozszerzeń Chrome.

Debugowanie rozszerzenia Chrome za pomocą plików mapy źródłowej

Problem z Chromium: 212374

Ulepszona struktura folderów źródeł w panelu Źródła

Drzewo folderów źródłowych w panelu Źródła zostało ulepszone. Struktury folderów i ich nazwy (np. „../”, „./” itp.) są teraz mniej chaotyczne. Jest to wynik normalizacji bezwzględnych adresów URL źródeł w mapach źródeł.

Ulepszona struktura folderów źródeł w panelu Źródła

Problem z Chromium: 1284737

Wyświetlanie plików źródłowych robota w panelu Źródła

Pliki źródłowe instancji roboczej (np. instancji roboczej) z względnym adresem SourceURL są teraz wyświetlane w panelu Źródło. Wcześniej pliki źródłowe instancji roboczej nie były obsługiwane prawidłowo.

ALT_TEXT_HERE

Problem z Chromium: 1277002

Automatyczne aktualizacje ciemnego motywu w Chrome

Interfejs automatycznego ciemnego motywu został uproszczony. Teraz jest to pole wyboru, a wcześniej było menu.

Ponadto, gdy włączysz automatyczny ciemny motyw, opcja Emuluj prefers-color-scheme zostanie wyłączona i automatycznie ustawiona na prefers-color-scheme: dark.

Chrome 96 wprowadza testowanie origin automatycznego ciemnego motywu na Androidzie. Dzięki tej funkcji przeglądarka stosuje automatycznie wygenerowany ciemny motyw do stron z jasnym motywem, gdy użytkownik włączy ciemny motyw w systemie operacyjnym.

Automatyczne emulacja ciemnego motywu

Problem z Chromium: 1243309

Czytelny selektor kolorów i podzielony panel

Na urządzeniach z ekranem dotykowym możesz teraz wybierać kolory i zmieniać rozmiar schowarki w DevTools za pomocą palców lub rysika.

Oto przykład z ekranu dotykowego urządzenia Google Pixelbook.

Problemy z Chromium: 1284245, 1284995

Inne wyróżnione informacje

Oto kilka istotnych poprawek w tej wersji:

Pobierz kanały podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.