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

Ograniczanie żądań WebSocket

Panel Sieć obsługuje teraz ograniczanie żądań gniazda internetowego. Wcześniej ograniczanie sieci nie działało w przypadku żądań gniazda internetowego.

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

Problem z Chromium: 423246

Panel Nowy interfejs API do raportowania w panelu Aplikacja

W nowym panelu Interfejs API do raportowania możesz monitorować raporty wygenerowane na swojej stronie i ich stan.

Interfejs Reporting API ma pomagać w monitorowaniu naruszeń zabezpieczeń strony, wycofanych wywołań interfejsu API i innych kwestii.

Otwórz stronę, która używa interfejsu API do raportowania (np. stronę demonstracyjną). W panelu Aplikacja przewiń w dół do sekcji Usługi w tle i wybierz panel Interfejs API do raportowania.

W sekcji Raporty znajdziesz listę raportów wygenerowanych na Twojej stronie oraz 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.

Problem w Chromium: 1205856

Zespół pomocy czeka, aż element pojawi się lub będzie można kliknąć w panelu Dyktafon

Podczas ponownego odtwarzania nagrania zachowania użytkownika panel Dyktafon zaczeka, aż element stanie się widoczny lub kliknięty w widocznym obszarze, lub spróbuje automatycznie przewinąć go do tego obszaru, zanim odtworzy go ponownie. Wcześniej ponowne odtwarzanie kończyło się natychmiast.

Oto przykład menu poza ekranem, które wyświetla się poza widocznym obszarem i wsuwa się po aktywacji. Polega ona na przełączeniu menu i kliknięciu pozycji 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ł już rozwiązany.

Problem w Chromium: 1257499

Ulepszony styl, formatowanie i filtrowanie konsoli

Nadaj logowi odpowiedni styl za pomocą kodu ucieczki ANSI

Możesz teraz używać sekwencji ucieczki ANSI, aby odpowiednio dostosować styl komunikatów w konsoli. Wcześniej konsola Narzędzi deweloperskich miała bardzo ograniczoną (i częściowo uszkodzoną) obsługę sekwencji ucieczki 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 płynnie debugować aplikacje Node.js za pomocą Narzędzi deweloperskich z odpowiednimi, kolorowymi komunikatami w konsoli. Otwórz tę demo, aby ją zobaczyć.

Aby dowiedzieć się więcej o formatowaniu na temat określania stylu komunikatów konsoli za pomocą Narzędzi deweloperskich, zapoznaj się z artykułem na temat formatowania i stylu komunikatów w konsoli.

Problemy z Chromium: 1282837, 1282076

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

Konsola prawidłowo wykonuje teraz konwersje typu %s, %d, %i i %f zgodnie ze standardem konsoli. Wcześniej wynik rozmowy był niespójny.

Problemy z Chromium: 1277944, 1282076

Bardziej intuicyjny filtr grup w konsoli

Podczas filtrowania wiadomości w konsoli wyświetla się teraz komunikat w konsoli, jeśli jego treść pasuje do filtra lub tytułu grupy (albo grupy nadrzędnej) pasuje do filtra. Wcześniej tytuł grupy konsoli był wyświetlany pomimo filtra.

Poza tym jeśli wyświetli się komunikat w konsoli, będzie też widoczna grupa (lub grupa nadrzędna), do której należy.

Problem w Chromium: 1068788

Ulepszenia map źródłowych

Debugowanie rozszerzenia do Chrome z użyciem plików mapy źródłowej

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

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 – poprawiliśmy strukturę folderów i nazewnictwo (np. „../”, „./” itp.). Jest to wynikiem normalizacji bezwzględnych URL-i źródłowych w mapach źródłowych.

Problem z Chromium: 1284737

Wyświetl pliki źródłowe instancji roboczych 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.

Problem z Chromium: 1277002

Aktualizacje automatycznego ciemnego motywu w Chrome

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

Oprócz tego jeśli Automatyczny ciemny motyw jest włączony, menu Emular prefers-color-scheme jest wyłączone i automatycznie ustawione na prefers-color-scheme: dark (prefers-color-scheme: dark).

W Chrome 96 wprowadzamy wersję próbną origin Automatyczny ciemny motyw na Androida. Dzięki tej funkcji przeglądarka stosuje automatycznie generowany ciemny motyw do witryn o jasnej tematyce, jeśli użytkownik ma włączone ciemne motywy w systemie operacyjnym.

Problem z Chromium: 1243309

Czytelny selektor kolorów i podzielony panel

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

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

Problemy z Chromium: 1284245, 1284995

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

• Rozwiązaliśmy problem z edytowaniem plików cookie w panelu Pliki cookie. (1290196).
• Naciśnij Shift + Tab, aby wybrać poprzednie polecenie w menu poleceń. (1278743)
• Na karcie Problemy zgłaszaj problemy z żądaniami procesu wstępnego CORS. (1272445).
• Problemy ze wskazówkami dotyczącymi klienta użytkownika możesz zgłaszać na karcie Problemy. (1219359).
• Naprawiliśmy działanie Shift + Delete i Page up / Page down w panelach Źródła i Konsola. (1278461, 1285662)
• W panelu Źródła zamknij okno edytowania punktu przerwania po usunięciu punktu przerwania. (922513)
• Przy przełączaniu jasnego/ciemnego motywu w Narzędziach deweloperskich nie jest wymagane ponowne załadowanie. (1278738)

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