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

Kayce Basques

Nowe funkcje Narzędzi deweloperskich w Chrome 65 to między innymi:

Czytaj dalej lub obejrzyj film z informacjami o tej wersji.

Lokalne zastąpienia

Zastąpienia lokalne umożliwiają wprowadzanie zmian w Narzędziach deweloperskich i zachowywanie ich podczas wczytywania stron. Wcześniej wszelkie zmiany wprowadzone w Narzędziach deweloperskich były usuwane po ponownym załadowaniu strony. Zastąpienia lokalne działają w przypadku większości typów plików, z kilkoma wyjątkami. Zobacz ograniczenia.

Zachowywanie zmian w arkuszu CSS po wczytaniu stron za pomocą zastępowania lokalnego.

Rysunek 1. Zachowywanie zmian w arkuszu CSS po wczytaniu stron za pomocą zastąpień lokalnych

Jak to działa:

  • Określasz katalog, w którym Narzędzia deweloperskie mają zapisywać zmiany.
  • Gdy wprowadzisz zmiany w Narzędziach deweloperskich, narzędzia te zapiszą kopię zmodyfikowanego pliku w Twoim katalogu.
  • Po ponownym załadowaniu strony Narzędzia deweloperskie udostępniają lokalny, zmodyfikowany plik, a nie zasób sieciowy.

Aby skonfigurować lokalne zastąpienia:

  1. Otwórz panel Źródła.

  2. Otwórz kartę Zastąpienia.

    Karta Zastąpienia

    Rysunek 2. Karta Zastąpienia

  3. Kliknij Zastąpienia konfiguracji.

  4. Wybierz katalog, w którym chcesz zapisać zmiany.

  5. U góry widoku kliknij Zezwól, aby przyznać Narzędziom deweloperskim uprawnienia do odczytu i zapisu do katalogu.

  6. Wprowadź zmiany.

Ograniczenia

  • DevTools nie zapisuje zmian wprowadzonych w drzewie DOM w panelu Elementy. Zamiast tego edytuj kod HTML w panelu Źródła.
  • Jeśli edytujesz CSS w panelu Style, a źródłem tego kodu jest plik HTML, DevTools nie zapisze zmiany. Zamiast tego edytować plik HTML w panelu Źródła.
  • Obszary robocze. Narzędzia deweloperskie automatycznie mapują zasoby sieciowe do lokalnego repozytorium. Gdy wprowadzasz zmiany w Narzędziach dla programistów, są one też zapisywane w Twoim lokalnym repozytorium.

Karta Zmiany

Śledź zmiany wprowadzane lokalnie w Narzędziach deweloperskich na nowej karcie Zmiany.

Karta Zmiany

Rysunek 3. Karta Zmiany

Nowe narzędzia ułatwień dostępu

Użyj nowego panelu Ułatwienia dostępu, aby sprawdzić właściwości ułatwień dostępu elementu, a także sprawdź współczynnik kontrastu elementów tekstowych w selektorze kolorów, aby mieć pewność, że są one dostępne dla użytkowników z wadami wzroku lub wadami rozpoznawania barw.

Panel ułatwień dostępu

W panelu Ułatwienia dostępu w panelu Elementy możesz sprawdzić właściwości ułatwień dostępu wybranego aktualnie elementu.

Panel Ułatwienia dostępu

Rysunek 4 W panelu Ułatwienia dostępu wyświetlają się atrybuty i właściwości obliczone ARIA elementu obecnie wybranego w drzewie DOM w panelu Elementy, a także jego pozycję w drzewie ułatwień dostępu

Aby zobaczyć panel Ułatwienia dostępu w działaniu, obejrzyj poniżej wykład Roba Dodsona na temat etykietowania.

Współczynnik kontrastu w selektorze kolorów

Selektor kolorów pokazuje teraz współczynnik kontrastu elementów tekstowych. Zwiększenie współczynnika kontrastu elementów tekstowych sprawia, że witryna staje się bardziej dostępna dla użytkowników z niedowidzeniem lub zaburzeniami rozpoznawania barw. Więcej informacji o tym, jak współczynnik kontrastu wpływa na ułatwienia dostępu, znajdziesz w artykule Kolor i kontrast.

Poprawienie kontrastu kolorów elementów tekstowych zwiększa użyteczność witryny dla wszystkich użytkowników. Innymi słowy, jeśli tekst jest szary na białym tle, jest trudny do odczytania.

Sprawdzanie współczynnika kontrastu wyróżnionego elementu H1.

Rysunek 5. Sprawdzanie współczynnika kontrastu wyróżnionego elementu h1

Na rys.5 2 zaznaczki obok wartości 4,61 oznaczają, że element spełnia zalecany współczynnik kontrastu (AAA). Jeśli ma tylko jedną załączoną ikonę, oznacza to, że spełnia minimalny zalecany współczynnik kontrastu (AA).

Kliknij Pokaż więcej Pokaż więcej, aby rozwinąć sekcję Współczynnik kontrastu. Biała linia w polu Kolory to granica między kolorami, które spełniają zalecany współczynnik kontrastu, a tymi, które tego nie robią. Na przykład skoro szary kolor na rysunku 6 spełnia zalecenia, oznacza to, że wszystkie kolory poniżej białej linii również spełniają zalecenia.

Rozwinięta sekcja Współczynnik kontrastu.

Rysunek 6. Rozwinięta sekcja Współczynnik kontrastu

Panel Kontrole zawiera automatyczną kontrolę ułatwień dostępu, która sprawdza, czy każdy element tekstowy na stronie ma wystarczający współczynnik kontrastu.

Aby dowiedzieć się, jak używać panelu Audyt do testowania ułatwień dostępu, przeczytaj artykuł Uruchomienie Lighthouse w Narzędziach deweloperskich Chrome lub obejrzyj ten A11ycast poniżej.

Nowe audyty

Chrome 65 zawiera zupełnie nową kategorię audytów SEO i wiele nowych audytów wydajności.

nowe audyty SEO,

Aby poprawić pozycję stron w wyszukiwarkach, warto upewnić się, że wszystkie audyty z nowej kategorii SEO przejdą kontrolę.

Nowa kategoria audytów SEO.

Rysunek 7. Nowa kategoria audytów SEO

Nowe audyty wydajności

Chrome 65 jest też wyposażony w wiele nowych kontroli wydajności:

  • Długi czas uruchamiania JavaScript
  • Korzysta z nieefektywnej zasady pamięci podręcznej w przypadku zasobów statycznych
  • Nie używa przekierowań
  • Dokument używa wtyczek
  • Minifikuj CSS
  • Zmniejsz JavaScript

Perf ma znaczenie! Gdy firma Mynet czterokrotnie poprawiła szybkość wczytywania stron, użytkownicy spędzali w niej o 43% więcej czasu, wyświetlali o 34% więcej stron, współczynnik odrzuceń spadł o 24%, a przychody wzrosły o 25% na odsłonę artykułu. Więcej informacji

Wskazówka: Jeśli chcesz poprawić szybkość wczytywania stron, ale nie wiesz, od czego zacząć, skorzystaj z panelu Audyt. Podajesz adres URL, a narzędzie generuje szczegółowy raport z wieloma sposobami na ulepszenie danej strony. Rozpocznij

Inne informacje

niezawodne krokowanie kodu za pomocą wątków i kodu asynchronicznego;

Chrome 65 wprowadza zmiany w przycisku Wejdź Wejdź, gdy wchodzisz do kodu, który przekazuje komunikaty między wątkami, oraz kodu asynchronicznego. Jeśli chcesz przywrócić poprzednie działanie, użyj nowego przycisku Krok Krok.

Wstawianie kodu, który przekazuje komunikaty między wątkami

Gdy wchodzisz do kodu, który przekazuje wiadomości między wątkami, Narzędzia deweloperskie pokazują, co dzieje się w każdym wątku.

Na przykład aplikacja na rysunku 8 przekazuje wiadomość między wątkiem głównym a wątkiem roboczym. Po wywołaniu postMessage() w głównym wątku DevTools zatrzymuje się w obiekcie onmessage w obrębie wątku roboczego. Sam moduł obsługi onmessage publikuje wiadomość z powrotem w wątku głównym. W tym wywołaniu DevTools wraca do wątku głównego.

Wprowadzanie kodu przekazującego komunikaty w Chrome 65.

Rysunek 8. Kod przekazywania wiadomości w Chrome 65

Po wejściu w ten kod we wcześniejszych wersjach Chrome pokazuje on tylko stronę z wątkiem głównym, tak jak to widać na Rys. 9.

Wprowadzanie kodu przekazywania wiadomości w Chrome 63.

Rysunek 9. Otwieranie kodu przekazującego wiadomości w Chrome 63

Przechodzenie do kodu asynchronicznego

Gdy przechodzisz do kodu asynchronicznego, DevTools zakłada, że chcesz wstrzymać kod asynchroniczny, który w końcu się wykona.

Na przykład w Rysunku 10 po wejściu do setTimeout(), DevTools wykonuje cały kod prowadzący do tego punktu w tła, a potem zatrzymuje się w funkcji przekazanej do setTimeout().

Wprowadzanie kodu asynchronicznego w Chrome 65.

Rysunek 10. Współbadanie kodu asynchronicznego w Chrome 65

Gdy w Chrome 63 wejdziesz w taki kod, narzędzia deweloperskie zatrzymają się w miejscu, w którym kod był wykonywany chronologicznie, jak widać na rys. 11.

Wprowadzanie kodu asynchronicznego w Chrome 63.

Rysunek 11. Kod asynchroniczny w Chrome 63

Wiele nagrań w panelu Wydajność

W panelu Wydajność możesz teraz tymczasowo zapisać do 5 nagranień. Nagrania są usuwane po zamknięciu okna Narzędzi deweloperskich. Aby zapoznać się z panelem Skuteczność, przeczytaj artykuł Pierwsze kroki w analizowaniu skuteczności w czasie wykonywania kodu.

Wybieranie między wieloma nagraniami w panelu Wydajność.

Rysunek 12. Wybieranie między wieloma nagraniami w panelu Skuteczność

Bonus: automatyzowanie działań w Narzędziach deweloperskich za pomocą Puppeteer 1.0

Wersja 1.0 Puppeteer, narzędzia do automatyzacji przeglądarki obsługiwanego przez zespół Narzędzi deweloperskich w Chrome, jest już dostępna. Za pomocą Puppeteer możesz zautomatyzować wiele zadań, które wcześniej były dostępne tylko w narzędziach dla programistów, na przykład robienie zrzutów ekranu:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Zawiera też interfejsy API do wykonywania wielu przydatnych zadań automatyzacji, takich jak generowanie plików PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Więcej informacji znajdziesz w krótkim wprowadzeniu.

Możesz też użyć Puppeteer, aby udostępnić funkcje Narzędzi deweloperskich podczas przeglądania, bez konieczności ich otwierania. Przykład znajdziesz w artykule Korzystanie z funkcji Narzędzi deweloperskich bez ich otwierania.

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 wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.