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

Kayce Basques

Skopiuj style elementu

Kliknij prawym przyciskiem myszy węzeł w drzewie DOM, aby skopiować do schowka kod CSS tego węzła DOM.

Skopiuj style.

Rysunek 1. Kopiuj style elementów.

Dziękujemy Adamowi Argyle'owi i VisBug za inspirację.

Wizualizacja przesunięć układu

Załóżmy, że czytasz artykuł z wiadomościami w ulubionej witrynie. Czytając stronę, gubisz się, że jej zawartość skacze. Ten problem nazywamy przesuwaniem układu. Zwykle dzieje się tak po zakończeniu ładowania obrazów i reklam. Na stronie nie ma miejsca na obrazy i reklamy, więc przeglądarka musi przesunąć wszystkie pozostałe treści w dół, żeby zrobić miejsce. Aby to zrobić, użyj placeholders.

Narzędzia deweloperskie mogą teraz pomagać w wykrywaniu zmian układu:

  1. Otwórz menu poleceń.
  2. Zacznij pisać Rendering.
  3. Uruchom polecenie Show Rendering (Pokaż renderowanie).
  4. Zaznacz pole wyboru Regiony przesunięcia układu. Gdy wchodzisz w interakcję ze stroną, przesunięcia układu są podświetlane na niebiesko.

Przesunięcie układu.

Rysunek 2. Przesunięcie układu.

Numer błędu Chromium 961846

Lighthouse 5.1 w panelu Audyty

W panelu Audyty działa teraz Lighthouse 5.1. Nowe kontrole obejmują:

Nowy interfejs panelu Audyty.

Rysunek 3. Nowy interfejs panelu Audyty.

Wersje Lighthouse 5.1 w wersji Node i interfejsu wiersza poleceń mają 3 nowe główne funkcje, które warto wypróbować:

  • Budżety skuteczności. Zapobiegaj regresji witryny z upływem czasu, określając liczbę żądań i rozmiary plików, których strony nie powinny przekraczać.
  • Wtyczki. Rozszerz Lighthouse za pomocą własnych audytów niestandardowych.
  • Pakiety stosu. Dodaj audyty dostosowane do określonych stosów technologicznych. Jako pierwszy wysłaliśmy pakiet WordPress. Pracujemy nad pakietami React i AMP Stack Pack.

Synchronizacja motywu systemu operacyjnego

Jeśli używasz ciemnego motywu systemu operacyjnego, Narzędzia deweloperskie automatycznie przełączają się na własny ciemny motyw.

Skrót klawiszowy otwierający edytor punktów przerwania

Po zaznaczeniu w edytorze panelu Źródła naciśnij Control+Alt+B lub Command+Option+B, aby otworzyć edytor punktów przerwania. Za pomocą edytora punktów przerwania utwórz punkty logowania i warunkowe punkty przerwania.

Edytujący punkty przerwania.

Rysunek 4. Edytor punktów przerwania.

Pamięć podręczna pobierania z wyprzedzeniem w panelu Sieć

Gdy zasób został wczytany z pamięci podręcznej pobierania z wyprzedzeniem, w kolumnie Rozmiar w panelu Sieć widoczna jest teraz wartość (prefetch cache). Pobieranie z wyprzedzeniem to nowa funkcja platformy internetowej przyspieszająca wczytywanie kolejnych stron. Według raportu Can I use... jest ona obsługiwana w 83,33% przeglądarek na całym świecie (stan na lipiec 2019 roku).

Kolumna Rozmiar wskazująca, że zasoby pochodzą z pamięci podręcznej pobierania z wyprzedzeniem.

Rysunek 5. Kolumna Rozmiar pokazuje, że prefetch2.html i prefetch2.css pochodzą z (prefetch cache).

Zobacz wersję demonstracyjną pobierania z wyprzedzeniem, aby ją wypróbować.

Problem z Chromium nr 935267

Właściwości prywatne podczas wyświetlania obiektów

W podglądzie obiektów konsola wyświetla teraz pola klas prywatnych.

Podczas sprawdzania obiektu Konsola pokazuje teraz pola prywatne, takie jak „#color”.

Rysunek 6. Stara wersja Chrome po lewej stronie nie wyświetla pola #color podczas sprawdzania obiektu, a nowa wersja po prawej stronie go ma.

Powiadomienia i komunikaty push w panelu aplikacji

Sekcja Usługi w tle w panelu Aplikacja obsługuje teraz wiadomości push i powiadomienia. Komunikaty push mają miejsce, gdy serwer wysyła informacje do skryptu service worker. Powiadomienia są wysyłane, gdy skrypt service worker lub skrypt strony pokazuje użytkownikowi informacje.

Tak jak w przypadku funkcji pobierania w tle i synchronizacji w tle z Chrome 76, po rozpoczęciu nagrywania wiadomości push i powiadomienia na tej stronie są zapisywane przez 3 dni, nawet po zamknięciu strony i nawet po zamknięciu Chrome.

Nowe panele powiadomień i wiadomości push.

Rysunek 7. Nowe panele komunikatów push i powiadomień w panelu aplikacji.

Numer błędu Chromium 927726

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