Ta strona została przetłumaczona przez Cloud Translation API.

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

Kayce Basques

Cześć! Oto nowości w Narzędziach deweloperskich w Chrome w Chrome 76.

Automatycznie uzupełniaj wartościami CSS

Przy dodawaniu deklaracji stylu do węzła DOM czasami wartość deklaracji jest łatwiejsza do zapamiętania niż jej nazwa. Na przykład po pogrubieniu węzła <p> wartość bold może być łatwiejsza do zapamiętania niż nazwa font-weight. Interfejs autouzupełniania panelu Styl obsługuje teraz wartości CSS. Jeśli pamiętasz odpowiednią wartość słowa kluczowego, ale nie pamiętasz nazwy właściwości, wpisz ją, a funkcja autouzupełniania pomoże Ci znaleźć odpowiednią nazwę.

Po wpisaniu tekstu „bold” panel Style zostanie automatycznie uzupełniony o wartość „font-weight: bold”.

Rysunek 1. Gdy wpiszesz bold, panel Style zostanie automatycznie uzupełniony o font-weight: bold.

Prześlij opinię na temat tej nowej funkcji do problemu nr 931145 w Chromium.

Nowy interfejs ustawień sieci

Wcześniej w panelu Network (Sieć) występował problem z obsługą, który powodował, że opcje takie jak menu ograniczania były nieosiągalne, gdy okno Narzędzi deweloperskich było wąskie. Aby rozwiązać ten problem i usprawnić panel Sieć, kilka rzadziej używanych opcji przenieśliśmy do nowej panelu Ustawienia sieci .

Ustawienia sieci

Rysunek 2. Ustawienia sieci.

Te opcje zostały przeniesione do sekcji Ustawienia sieci: Użyj dużych wierszy żądania, Grupuj według ramki, Pokaż podsumowanie, Zarejestruj zrzuty ekranu. Rysunek 3 mapuje stare lokalizacje na nowe.

Mapowanie starych lokalizacji do nowych.

Rysunek 3. Mapowanie starych lokalizacji do nowych.

Prześlij opinię na temat tej zmiany w interfejsie do problemu nr 892969 w Chromium.

Wiadomości WebSocket w eksportach HAR

Podczas eksportowania pliku HAR z panelu Sieć w celu udostępnienia dzienników sieciowych współpracownikom plik HAR zawiera teraz komunikaty WebSocket. Właściwość _webSocketMessages zaczyna się od podkreślenia, które wskazuje, że jest to pole niestandardowe.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Prześlij opinię na temat tej nowej funkcji do problemu nr 496006 w Chromium.

Przyciski importowania i eksportowania HAR

Łatwiej udostępniaj logi sieciowe współpracownikom za pomocą nowych przycisków Eksportuj wszystko jako plik HAR z zawartością i Importuj plik HAR . Importowanie i eksportowanie plików HAR było dostępne w Narzędziach deweloperskich już od jakiegoś czasu. Nowa funkcja ułatwia znalezienie przycisków.

Nowe przyciski HAR.

Rysunek 4. Nowe przyciski HAR.

Prześlij opinię na temat tej zmiany w interfejsie, przesyłając problem nr 904585 w Chromium.

Łączne wykorzystanie pamięci w czasie rzeczywistym

Panel Pamięć pokazuje teraz całkowite wykorzystanie pamięci w czasie rzeczywistym.

Łączne wykorzystanie pamięci w czasie rzeczywistym.

Rysunek 5. U dołu panelu Pamięć widać, że strona używa łącznie 43,4 MB pamięci. 209 KB/s oznacza, że całkowite wykorzystanie pamięci wzrasta o 209 KB na sekundę.

Zapoznaj się też z artykułem Monitor wydajności, aby śledzić wykorzystanie pamięci w czasie rzeczywistym.

Prześlij opinię na temat tej nowej funkcji do problemu nr 958177 w Chromium.

Numery portów rejestracji mechanizmów Service Worker

Panel Skrypty service worker zawiera teraz w tytułach numery portów, co ułatwia śledzenie, które mechanizmy Service Worker są debugowane.

Porty mechanizmu Service Worker.

Rysunek 6. Porty mechanizmu Service Worker.

Prześlij opinię na temat tej zmiany w interfejsie, korzystając z problemu z Chromium nr 601286.

Sprawdź zdarzenia pobierania w tle i synchronizacji w tle

Skorzystaj z nowej sekcji Usługi w tle w panelu Aplikacja, aby monitorować zdarzenia pobierania w tle i synchronizacji w tle. Ze względu na to, że zdarzenia pobierania w tle i synchronizacji w tle występują w tle, nie byłoby zbyt przydatne, by narzędzia deweloperskie zarejestrowały tylko zdarzenia pobierania w tle i synchronizacji w tle, gdy były one otwarte. Po rozpoczęciu rejestrowania zdarzenia pobierania w tle i synchronizacji w tle będą rejestrowane także po zamknięciu karty, a nawet po zamknięciu Chrome.

Przejdź do panelu Aplikacja, otwórz kartę Pobieranie w tle lub Synchronizacja w tle, a następnie kliknij Rejestruj , aby rozpocząć rejestrowanie zdarzeń. Kliknij wydarzenie, aby wyświetlić więcej informacji na jego temat.

Okienko pobierania w tle.

Rysunek 7. Okienko pobierania w tle. Demonstracja autorstwa Maksima Salnikowa.

Okienko Synchronizacja w tle.

Rysunek 8. Okienko Synchronizacja w tle.

Prześlij opinię na temat tych nowych funkcji do problemu z Chromium nr 927726.

Puppeteer w przeglądarce Firefox

Puppeteer dla przeglądarki Firefox to nowy, eksperymentalny projekt, który umożliwia automatyzację Firefoksa za pomocą interfejsu Puppeteer API. Innymi słowy, można teraz zautomatyzować Firefoksa i Chromium za pomocą tego samego interfejsu Node API, co pokazano na filmie poniżej.

Po uruchomieniu programu node example.js otworzy się przeglądarka Firefox, a tekst page zostanie wstawiony w polu wyszukiwania w witrynie dokumentacji firmy Puppeteer. Następnie to samo zadanie jest powtarzane w Chromium.

Aby dowiedzieć się więcej o Puppeteer i Puppeteer na Firefoksie, obejrzyjcie prezentację Puppeteer nagraną przez Joela i Andreya z Google I/O 2019. Premiera Firefoksa odbywa się około 4:05.

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

Wizualizacja danych o skuteczności w panelu Skuteczność
Podświetl węzły tekstowe w drzewie DOM
Kopiowanie ścieżki JS do węzła DOM
Aktualizacje panelu kontroli, w tym nowa kontrola wykrywająca biblioteki JS i nowe słowa kluczowe umożliwiające dostęp do panelu Kontrole z poziomu menu poleceń
Dodatkowa wskazówka: sprawdzaj zapytania o multimedia w trybie urządzenia (film)

Chrome 71

Najedź kursorem na wynik Live Expression, aby podświetlić węzeł DOM.
Przechowywanie węzłów DOM jako zmiennych globalnych
Inicjator i informacje o priorytetach są teraz dostępne w importach i eksportach HAR
Otwieranie menu poleceń z menu głównego
Punkty przerwania obrazu w obrazie
Dodatkowa wskazówka: użyj metody monitorEvents(), aby zarejestrować w konsoli zdarzenia uruchomione przez węzeł (film)