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

Jecelyn Yeen

Ograniczanie żądań WebSocket

Panel Sieć obsługuje teraz ograniczanie żądań przez gniazdo sieciowe. Wcześniej ograniczanie sieci nie działało w przypadku żądań sieciowych socket.

Otwórz panel Sieć, kliknij żądanie sieciowe i otwórz kartę Wiadomości, aby obserwować przenoszenie wiadomości. Aby zmniejszyć prędkość, wybierz Wolne 3G.

Ograniczanie żądań WebSocket

Problem z Chromium: 423246

Nowy panel interfejsu API do raportowania w panelu Aplikacja

Nowy panel Interfejs API do raportowania umożliwia monitorowanie raportów wygenerowanych na stronie i ich stanu.

Interfejs API do raportowania ułatwia monitorowanie naruszeń zabezpieczeń strony, wycofanych wywołań interfejsu API i nie tylko.

Otwórz stronę, która korzysta z 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.

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 interfejsu API do raportowania

Problem z Chromium: 1205856

Obsługa oczekiwania, aż element pojawi się/będzie można kliknąć w panelu Dyktafon

Podczas ponownego odtwarzania nagrania przepływu użytkownika panel Dyktafonu czeka, aż element stanie się widoczny lub klikalny w widocznym obszarze, lub będzie próbował automatycznie przewinąć element do widocznego obszaru, a następnie ponownie odtworzyć krok. Wcześniej ponowne odtwarzanie kończyło się niepowodzeniem natychmiast.

Oto przykład menu poza ekranem umieszczonego poza widocznym obszarem i wsuwanego po aktywowaniu. Aby przejść dalej, wystarczy przełączyć menu i kliknąć wybraną pozycję w menu. Wcześniej ponowne odtwarzanie kończyło się niepowodzeniem, ponieważ element menu wciąż się wysuwa i nie jest jeszcze widoczny w widocznym obszarze. Problem został już rozwiązany.

Problem z Chromium: 1257499

Lepsze style, formatowanie i filtrowanie w konsoli

Dostosuj styl komunikatów logu za pomocą kodu ANSI

Możesz teraz używać sekwencji zmiany znaczenia ANSI, aby odpowiednio modyfikować styl komunikatów konsoli. Wcześniej konsola DevTools miała bardzo ograniczoną (i częściowo uszkodzoną) obsługę sekwencji zmiany znaczenia ANSI.

Programiści Node.js często kolorują komunikaty dziennika za pomocą sekwencji zmiany znaczenia ANSI, często przy użyciu bibliotek stylów, takich jak kreda, colors, ansi-colors, kleur itp.

Dzięki tym zmianom możesz teraz bezproblemowo debugować aplikacje Node.js za pomocą Narzędzi deweloperskich i wyświetlać odpowiednie kolorowe komunikaty konsoli. Otwórz tę prezentację, aby samodzielnie się o tym przekonać.

Więcej informacji o formatowaniu i określaniu stylu wiadomości w konsoli za pomocą Narzędzi deweloperskich znajdziesz w artykule Formatowanie i styl wiadomości w Konsoli Play.

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 typu %s, %d, %i i %f zgodnie z opisem w standardzie konsoli. Wcześniej wynik rozmowy był niespójny.

obsługa specyfikatorów formatów w komunikatach 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 treść wiadomości pasuje do filtra lub tytuł grupy (bądź grupy nadrzędnej) jest zgodny z filtrem. Wcześniej tytuł grupy w konsoli był wyświetlany pomimo filtra.

Ponadto, jeśli wyświetlany jest komunikat 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ódeł

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

Teraz możesz debugować rozszerzenie do Chrome przy użyciu plików mapy źródeł. Wcześniej Narzędzia deweloperskie obsługiwały tylko wbudowaną mapę źródeł na potrzeby debugowania rozszerzeń do Chrome.

Debugowanie rozszerzenia do Chrome za pomocą 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 jest teraz czyste, a struktury i nazwy folderów są bardziej przejrzyste (np. „../”, „./” itp.). Jest to wynikiem normalizacji bezwzględnych adresów URL 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

Instancje robocze (np. zasoby robocze, mechanizmy service worker) ze względnym adresem URL 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 z Chromium: 1277002

Aktualizacja automatycznego ciemnego motywu Chrome

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

Poza tym przy włączonym automatycznym ciemnym motywie menu Emulation prefers-color-scheme (Emuluj preferujący kolor) będzie wyłączone i automatycznie ustawione na prefers-color-scheme: dark (preferowany kolor: ciemny).

W Chrome 96 na Androida wprowadzamy wersję próbną auto ciemnego motywu. Dzięki tej funkcji przeglądarka stosuje automatycznie wygenerowany ciemny motyw do witryn o jasnej tematyce, jeśli użytkownik wybrał w systemie operacyjnym ciemny motyw.

Emulacja automatycznego ciemnego motywu

Problem z Chromium: 1243309

Łatwy w dotyku selektor kolorów i podzielony panel

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

Oto przykład nagrany za pomocą ekranu dotykowego urządzenia Google Pixelbook.

Problemy z Chromium: 1284245, 1284995

Inne ważne informacje

Oto kilka ważnych poprawek wprowadzonych w tej wersji:

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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