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

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.

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ą domyślnie obsługiwane:

• 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)

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.

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.

Zostanie wyświetlony widok szczegółów elementu iframe w panelu Aplikacje, gdzie możesz przejrzeć szczegóły dokumentu, stan izolacji, zasady uprawnień i inne ustawienia, które pozwalają debugować potencjalne problemy.

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.

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.

Problem z Chromium: 1201398

Filtruj typ zasobu Wasm w panelu Sieć

Możesz teraz kliknąć nowy przycisk Wasm, aby filtrować żądania sieci 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ę.

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.

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.

Problem z Chromium: 1199137

Latarnia morska 7.5 w panelu Lighthouse

Panel Lighthouse działa teraz w wersji Lighthouse 7.5. Pole „Brak wyraźnej szerokości i wysokości” ostrzeżenie zostało usunięte w przypadku obrazów, które mają atrybut aspect-ratio zdefiniowany 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 polecenie „Uruchom ponownie ramkę” menu kontekstowego 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.

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

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 rozwijać funkcję Dyktafonu.

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