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

Jecelyn Yeen

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

Ograniczanie żądań WebSocket

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.

Panel interfejsu API do raportowania

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 odbywał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ę prezentację, aby ją zobaczyć.

Więcej informacji o formatowaniu i określaniu stylu komunikatów w konsoli za pomocą Narzędzi deweloperskich znajdziesz w artykule dotyczącym formatowania i stylizacji wiadomości w konsoli.

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

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

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.

filtr grup w konsoli

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

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

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.

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

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.

ALT_TEXT_HERE

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.

Automatyczne emulacja ciemnego motywu

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:

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.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59