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.

Autouzupełnianie wartościami CSS

Podczas dodawania deklaracji stylu do węzła DOM czasami łatwiej jest zapamiętać wartość deklaracji niż nazwa deklaracji. 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 wartość słowa kluczowego, ale nie możesz sobie przypomnieć nazwy właściwości, wpisz ją, a autouzupełnianie pomoże Ci znaleźć odpowiednią nazwę.

Gdy wpiszesz „pogrubienie”, panel Style zostanie automatycznie uzupełniony o tekst „waga czcionki: pogrubienie”.

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

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

Nowy interfejs do ustawień sieci

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

Ustawienia sieci

Rysunek 2. Ustawienia sieci.

Te opcje zostały przeniesione do sekcji Ustawienia sieci: Używaj dużych wierszy żądania, Grupuj według ramki, Pokaż przegląd, Zrób zrzuty ekranu. Rysunek 3 mapuje stare lokalizacje na nowe.

Mapujemy stare lokalizacje na nowe.

Rysunek 3. Mapujemy stare lokalizacje na nowe.

Prześlij opinię na temat tej zmiany w interfejsie, dodając numer problemu Chromium nr 892969.

Wiadomości WebSocket w eksportach HAR

Podczas eksportowania pliku HAR z panelu Network w celu udostępnienia logów sieciowych współpracownikom plik HAR zawiera teraz komunikaty WebSocket. Właściwość _webSocketMessages zaczyna się od podkreślenia, które wskazują, ż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 w problemie nr 496006 Chromium.

Przyciski importowania i eksportowania plików HAR

Łatwiejsze udostępnianie dzienników sieciowych współpracownikom dzięki nowym przyciskom Eksportuj wszystko jako HAR z treścią i Importuj plik HAR . Od jakiegoś czasu w Narzędziach deweloperskich można importować i eksportować pliki HAR. Nowa zmiana to takie, które są łatwiejsze do znalezienia.

Nowe przyciski HAR.

Rysunek 4. Nowe przyciski HAR.

Prześlij opinię o tej zmianie interfejsu jako numer sprawy Chromium nr 904585.

Łą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. W dolnej części panelu Pamięć widać, że strona wykorzystuje łą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 dowiedzieć się, jak śledzić wykorzystanie pamięci w czasie rzeczywistym.

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

Numery portów rejestracji instancji roboczych

Panele Service Workers zawierają teraz w tytułach numery portów, dzięki czemu można łatwiej śledzić debugowane mechanizmy Service Worker.

Porty skryptu service worker.

Rysunek 6. Porty skryptu service worker.

Prześlij opinię o tej zmianie interfejsu do numeru problemu Chromium nr 601286.

Sprawdzanie zdarzeń pobierania w tle i synchronizacji w tle

Użyj nowej sekcji Usługi w tle w panelu Aplikacja, aby monitorować zdarzenia pobierania w tle i synchronizacji w tle. Biorąc pod uwagę, że zdarzenia pobierania w tle i synchronizacji w tle występują w tle... cóż... to nie byłoby zbyt przydatne, żeby Narzędzia deweloperskie rejestrował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ą nadal rejestrowane nawet po zamknięciu karty i 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 Pobieranie w tle.

Rysunek 7. Okienko Pobieranie w tle. Demo autorstwa Maxima Salnikova.

Okienko Synchronizacja w tle.

Rysunek 8. Okienko Synchronizacja w tle.

Prześlij opinię o tych nowych funkcjach w problemie Chromium nr 927726.

Puppeteer w Firefoksie

Puppeteer dla przeglądarki Firefox to nowy, eksperymentalny projekt umożliwiający automatyzację przeglądarki Firefox za pomocą interfejsu API Puppeteer. Innymi słowy, możesz teraz zautomatyzować przeglądarkę Firefox i Chromium, korzystając z tego samego interfejsu Node API, jak pokazano w poniższym filmie.

Po uruchomieniu node example.js otwiera się przeglądarka Firefox, a w polu wyszukiwania na stronie dokumentacji Puppeteer zostaje wstawiony tekst page. Następnie to samo zadanie powtarza się w Chromium.

Aby dowiedzieć się więcej o Puppeteer i Puppeteer w przeglądarce Firefox, zobacz prezentację puppeteer autorstwa Joela i Andreya z Google I/O 2019. Około 16:05 w Firefoksie pojawia się komunikat.

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

Wizualizacja danych o skuteczności w panelu Skuteczność.
Podświetl węzły tekstowe w drzewie DOM
Skopiuj ścieżkę JS do węzła DOM.
Aktualizacje panelu audytu, w tym nowy audyt, który wykrywa biblioteki JS i nowe słowa kluczowe umożliwiające dostęp do panelu kontroli z menu poleceń.
Dodatkowa wskazówka: sprawdzaj zapytania o multimedia w trybie urządzenia (film)

Chrome 71

Najedź kursorem na wynik wyrażenia aktywnego, aby wyróżnić węzeł DOM.
Zapisywanie węzłów DOM jako zmiennych globalnych
Informacje o inicjatorze i priorytetach teraz w importach i eksportach plików HAR
Otwórz menu poleceń z menu głównego
Punkty przerwania obrazu w obrazie
Dodatkowa wskazówka: użyj pola monitorEvents() do rejestrowania zdarzeń wywoływanych przez węzeł w konsoli (film)