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 web socket i otwórz kartę Wiadomości, aby obserwować przesyłanie wiadomości. Wybierz Wolne 3G, aby ograniczyć szybkość.

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, przestarzałe 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 w tle i kliknij 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.

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

Problem z Chromium: 1257499

ulepszone stylizowanie, formatowanie i filtrowanie konsoli;

poprawnie stylizować komunikaty w logach za pomocą kodu ucieczki 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.

Deweloperzy Node.js często kolorują komunikaty logowania za pomocą sekwencji escape ANSI, często przy użyciu bibliotek stylów takich jak chalk, colors, ansi-colors, kleur itp.

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ść jest zgodna z filtrem lub tytuł grupy (lub grupy nadrzędnej) jest zgodny z filtrem. Wcześniej tytuł konsoli był wyświetlany pomimo filtra.

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 grupy 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 Worker (np. worker sieciowy, worker usługi) z względnym adresem URL źródła są teraz wyświetlane w panelu Source (Źródło). Wcześniej pliki źródłowe robota 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.

Emulacja automatycznego ciemnego motywu

Problem z Chromium: 1243309

Selektor kolorów i panel podzielony na części dotykowe

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

Oto przykład zdjęcia zrobionego na urządzeniu z ekranem dotykowym Google Pixelbook.

Problemy z Chromium: 1284245, 1284995

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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.