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

Jecelyn Yeen

Ograniczanie liczby żądań WebSocket

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

Otwórz panel Sieć, kliknij żądanie gniazda internetowego i otwórz kartę Wiadomości, aby obserwować przesyłanie wiadomości. Aby ograniczyć szybkość, wybierz Wolne 3G.

Ograniczanie liczby żądań WebSocket

Problem w Chromium: 423246

Nowy panel Reporting API w panelu Application

Użyj nowego panelu Reporting API, aby monitorować 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 wybierz panel Interfejs Reporting API.

Sekcja Raporty zawiera listę raportów wygenerowanych na Twojej stronie i ich stan. 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 Reporting API

Problem w Chromium: 1205856

Obsługa oczekiwania, aż element będzie widoczny lub będzie można go kliknąć w panelu Rejestrator

Podczas odtwarzania nagrania przepływu użytkownika panel Rejestrator będzie teraz czekać, aż element będzie widoczny lub klikalny w obszarze widoku, albo spróbuje automatycznie przewinąć element do obszaru widoku przed odtworzeniem kroku. Wcześniej powtórka natychmiast się nie powiodła.

Oto przykład menu poza ekranem, które jest umieszczone poza obszarem widoku i wsuwa się po aktywacji. Proces użytkownika polega na przełączeniu menu i kliknięciu elementu menu. Wcześniej powtórka kończyła się niepowodzeniem na ostatnim etapie, ponieważ element menu nadal się przesuwał i nie był jeszcze widoczny w obszarze wyświetlania. Problem został już rozwiązany.

Problem z Chromium: 1257499

Ulepszone style, formatowanie i filtrowanie w konsoli

Prawidłowe formatowanie wiadomości dziennika za pomocą kodu ucieczki ANSI

Możesz teraz używać sekwencji ucieczki ANSI, aby prawidłowo formatować wiadomości w konsoli. Wcześniej konsola Narzędzi deweloperskich miała bardzo ograniczone (i częściowo uszkodzone) wsparcie dla sekwencji ucieczki ANSI.

Programiści Node.js często kolorują wiadomości dziennika za pomocą sekwencji ucieczki ANSI, zwykle 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 tę prezentację, aby zobaczyć ją 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.

styl konsoli,

Problemy z Chromium: 1282837, 1282076

Prawidłowa obsługa specyfikatorów formatu %s, %d, %i i %f

Konsola prawidłowo wykonuje teraz konwersje typów %s, %d, %i i %f zgodnie ze specyfikacją standardu konsoli. Wcześniej wynik rozmowy był niespójny.

obsługiwać specyfikatory formatu w wiadomościach konsoli;

Problemy z Chromium: 1277944, 1282076

Bardziej intuicyjny filtr grup w konsoli

Podczas filtrowania wiadomości konsoli jest ona teraz wyświetlana, jeśli jej treść pasuje do filtra lub tytuł grupy (lub grupy nadrzędnej) pasuje do filtra. Wcześniej tytuł grupy konsol był widoczny pomimo zastosowania filtra.

Dodatkowo, jeśli wyświetlany jest komunikat konsoli, jest teraz widoczna również grupa (lub grupa nadrzędna), do której należy.

filtr grup w konsoli

Problem w Chromium: 1068788

Ulepszenia map źródłowych

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

Możesz teraz debugować rozszerzenia do Chrome za pomocą plików mapy źródła. Wcześniej narzędzia deweloperskie obsługiwały tylko wbudowane mapy źródła na potrzeby debugowania rozszerzeń do Chrome.

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

Problem z Chromium: 212374

Ulepszone drzewo folderów źródłowych w panelu Źródła

Drzewo folderów źródłowych w panelu Źródła zostało ulepszone. Zawiera mniej niepotrzebnych elementów w strukturach folderów i nazwach (np. „../”, „./” itp.). W praktyce jest to wynik normalizacji bezwzględnych adresów URL źródeł w mapach źródeł.

Ulepszone drzewo folderów źródłowych w panelu Źródła

Problem w Chromium: 1284737

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

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

ALT_TEXT_HERE

Problem w Chromium: 1277002

Aktualizacje automatycznego ciemnego motywu w Chrome

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

Poza tym, gdy włączona jest opcja Automatyczny ciemny motyw, menu Emuluj prefers-color-scheme będzie wyłączone i automatycznie ustawione na prefers-color-scheme: dark.

W Chrome 96 wprowadzamy wersję próbną origin automatycznego ciemnego motywu na Androidzie. Dzięki tej funkcji przeglądarka stosuje automatycznie generowany ciemny motyw do witryn z jasnym motywem, gdy użytkownik włączył ciemne motywy w systemie operacyjnym.

Emulacja automatycznego ciemnego motywu

Problem w Chromium: 1243309

Selektor kolorów i podzielony panel zoptymalizowane pod kątem obsługi dotykowej

Teraz możesz wybierać kolor i zmieniać rozmiar panelu w Narzędziach deweloperskich za pomocą palców lub rysika na urządzeniach z ekranem dotykowym.

Oto przykład zrobiony za pomocą ekranu dotykowego Google Pixelbooka.

Problemy z Chromium: 1284245, 1284995

Różne wyróżnione informacje

Oto niektóre z najważniejszych poprawek w tej wersji:

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.