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

Jecelyn Yeen

Edytor siatki CSS

Funkcja, o którą często prosiliśmy. Możesz teraz wyświetlać podgląd i tworzyć podgląd siatki CSS za pomocą nowego edytora siatki CSS.

Edytor siatki CSS

Jeśli do elementu HTML na stronie zastosowano parametr display: grid lub display: inline-grid, w panelu Style pojawi się obok niego ikona. Kliknij ikonę, aby przełączyć edytor siatki CSS. Tutaj możesz zobaczyć podgląd potencjalnych zmian za pomocą ikon na ekranie (np. justify-content: space-around) i tworzyć wygląd siatki jednym kliknięciem.

Problem z Chromium: 1203241

Obsługa ponownych deklaracji const w konsoli

Konsola obsługuje teraz ponowną deklarację const, niezależnie od dotychczasowych let i class. Brak możliwości ponownego zadeklarowania stanowił częsty problem dla programistów stron internetowych, którzy używają konsoli do eksperymentowania z nowym kodem JavaScript.

Dzięki temu deweloperzy mogą skopiować kod i wkleić go do konsoli Narzędzi deweloperskich, aby sprawdzić, jak działa i przetestować ten kod, wprowadzić w nim niewielkie zmiany i powtórzyć cały proces bez odświeżania strony. Wcześniej narzędzia deweloperskie zgłaszały błąd składni, jeśli kod ponownie zadeklarował powiązanie const.

Zapoznaj się z przykładem poniżej. Ponowna deklaracja funkcji const jest obsługiwana w przypadku różnych skryptów REPL (patrz zmienna a). Pamiętaj, że te scenariusze nie są obsługiwane w konstrukcji:

  • Ponowna deklaracja skryptów strony przez funkcję const jest niedozwolona w skryptach REPL
  • Ponowna deklaracja funkcji const w tym samym skrypcie REPL jest niedozwolona (patrz zmienna b)

ponowne deklaracje stałe

Problem z Chromium: 1076427

Wyświetlający kolejność źródłową

Teraz możesz wyświetlić kolejność elementów źródłowych na ekranie, aby ułatwić kontrolę ułatwień dostępu.

Wyświetlający kolejność źródłową

Kolejność treści w dokumencie HTML jest ważna z punktu widzenia ułatwień dostępu i optymalizacji witryn pod kątem wyszukiwarek. Nowe funkcje CSS umożliwiają programistom tworzenie treści, których kolejność wyświetlania na ekranie znacznie się różni od tej w dokumencie HTML. To duży problem z ułatwieniami dostępu, ponieważ korzystanie z czytników ekranu może być inne niż w przypadku osób widzących.

Problem z Chromium: 1094406

Nowy skrót do wyświetlania szczegółów ramki

Aby wyświetlić szczegóły elementu iframe, kliknij go prawym przyciskiem myszy w panelu Elementy i wybierz Pokaż szczegóły ramki.

Pokaż szczegóły ramki

Spowoduje to wyświetlenie szczegółów elementu iframe w panelu aplikacji, gdzie możesz m.in. sprawdzić szczegóły dokumentu, stan zabezpieczeń i izolacji czy zasady uprawnień, aby debugować potencjalne problemy.

Widok szczegółów ramki

Problem z Chromium: 1192084

Ulepszona obsługa debugowania CORS

Błędy CORS są teraz widoczne na karcie Problemy. Błędy CORS mogą mieć wiele przyczyn. Kliknij, aby rozwinąć każdy problem i zapoznać się z potencjalnymi przyczynami i rozwiązaniami.

Problemy CORS na karcie Problemy

Problem z Chromium: 1141824

Aktualizacje panelu Sieć

Zmień nazwę etykiety XHR na Fetch/XHR

Nazwa etykiety XHR została zmieniona na Pobierz/XHR. Ta zmiana wyjaśnia, że filtr obejmuje żądania sieciowe XMLHttpRequest i Fetch API.

Etykieta pobierania/XHR

Problem z Chromium: 1201398

Filtruj typ zasobu Wasm w panelu Sieć

Możesz teraz kliknąć nowy przycisk Wasm, aby filtrować żądania sieci Wasm.

Filtruj według Wasm

Problem w Chromium: 1103638

Wskazówki dotyczące klienta użytkownika dotyczące urządzeń na karcie Warunki sieci

Wskazówki dotyczące klienta użytkownika są teraz stosowane do urządzeń w polu Klient użytkownika na karcie Warunki sieci.

User-Agent Client Hints to nowe rozszerzenie interfejsu Client Hints API, które umożliwia deweloperom uzyskiwanie dostępu do informacji o przeglądarce użytkownika w sposób zapewniający ochronę prywatności i ergonomię.

Wskazówki dotyczące klienta użytkownika dotyczące urządzeń na karcie Warunki sieci

Problem w Chromium: 1174299

Zgłoś problemy z trybem osobliwości na karcie Problemy

Narzędzia deweloperskie zgłaszają teraz problemy z trybem osobliwości i trybem ograniczonego osobliwości.

Tryb osobliwości i tryb ograniczonego osobliwości to starsze tryby przeglądarki, które powstały przed powstaniem standardów internetowych. Tryby te emulują działanie układów z prestandardowych czasów, które często powodują nieoczekiwane efekty wizualne.

Podczas debugowania problemów z układem programiści mogą sądzić, że są one spowodowane przez błędy CSS lub HTML napisane przez użytkowników, a rzeczywistym problemem jest tryb kompatybilny, w którym znajduje się strona. W Narzędziach deweloperskich znajdziesz wskazówki, jak rozwiązać ten problem.

Zgłoś problemy z trybem osobliwości na karcie Problemy

Problem z Chromium: 622660

Uwzględnij przecięcia w obliczeniach w panelu Wydajność

Narzędzia deweloperskie pokazują teraz przebiegi Compute na wykresie płomieniowym. Te zmiany pomogą Ci wykrywać zdarzenia obserwatorów interakcji i debugować ich potencjalne ograniczenia wydajności.

Oblicz przecięcia w panelu Wydajność

Problem z Chromium: 1199137

Latarnia morska 7.5 w panelu Lighthouse

Panel Lighthouse działa teraz w wersji Lighthouse 7.5. Ostrzeżenie „Brak wyraźnej szerokości i wysokości” zostało usunięte w przypadku obrazów z atrybutem aspect-ratio zdefiniowanym w CSS. Wcześniej Lighthouse wyświetlała ostrzeżenia dotyczące obrazów bez zdefiniowanej szerokości i wysokości.

Pełną listę zmian znajdziesz w informacjach o wersji.

Problem w Chromium: 772558

Wycofane menu kontekstowe „Uruchom ponownie ramkę” w stosie wywołań

Opcja Uruchom ponownie ramkę została wycofana. Ta funkcja wymaga dalszego rozwoju, ponieważ obecnie nie działa prawidłowo i często ulega awarii.

Wycofane menu kontekstowe Uruchom ponownie ramkę

Problem z Chromium: 1203606

[Funkcja eksperymentalna] Monitor protokołów

Narzędzia deweloperskie w Chrome korzystają z protokołu Chrome Dev Tools Protocol (CDP) do instrumentowania, inspekcji, debugowania i profilowania przeglądarek Chrome. Monitor protokołów umożliwia wyświetlanie wszystkich żądań i odpowiedzi CDP wysyłanych przez Narzędzia deweloperskie.

Dodaliśmy 2 nowe funkcje ułatwiające testowanie CDP:

  • Nowy przycisk Zapisz umożliwia pobieranie nagranych wiadomości jako pliku JSON
  • Nowe pole, które umożliwia bezpośrednie wysyłanie nieprzetworzonego polecenia CDP

Monitor protokołów

Problemy z Chromium: 1204004, 1204466

[Funkcja eksperymentalna] Dyktafon lalek

Puppeteer Dyktafon generuje teraz listę kroków na podstawie Twojej interakcji z przeglądarką. Wcześniej Narzędzia deweloperskie generowały skrypt Puppeteer bezpośrednio. Dodaliśmy nowy przycisk Eksportuj, który umożliwia wyeksportowanie kroków jako skryptu Puppeteer.

Po zarejestrowaniu kroków możesz je odtworzyć za pomocą nowego przycisku Odtwórz ponownie. Aby dowiedzieć się, jak rozpocząć nagrywanie, postępuj zgodnie z tymi instrukcjami.

Pamiętaj, że jest to eksperyment na wczesnym etapie. Planujemy z czasem ulepszać i rozszerzać funkcje Dyktafonu.

Dyktafon lalek

Problem z Chromium: 1199787

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