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

Kayce Basques

Nowe funkcje w Narzędziach deweloperskich w Chrome 65:

Czytaj dalej lub obejrzyj film z informacjami o tej wersji.

Zastąpienia lokalne

Zastąpienia lokalne umożliwiają wprowadzanie zmian w Narzędziach deweloperskich i zachowywanie ich podczas wczytywania stron. Wcześniej wszystkie zmiany wprowadzone w Narzędziach deweloperskich były tracone 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.

Zapisywanie 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.
  • Gdy ponownie załadujesz stronę, Narzędzia deweloperskie wyświetlają zmodyfikowany lokalnie 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.
  • Workspaces. 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 nowej karty Ułatwienia dostępu, aby sprawdzić właściwości ułatwień dostępu elementu, oraz użyj selektora kolorów, aby sprawdzić współczynnik kontrastu elementów tekstowych i upewnić się, że są one dostępne dla użytkowników z niepełnosprawnością wzroku lub zaburzeniami rozpoznawania barw.

Panel ułatwień dostępu

Aby sprawdzić właściwości ułatwień dostępu aktualnie wybranego elementu, użyj panelu Ułatwienia dostępu w panelu Elementy.

Panel Ułatwienia dostępu

Rysunek 4 W panelu Dostępność wyświetlane są atrybuty ARIA i obliczone właściwości elementu, który jest obecnie wybrany w drzewie DOM w panelu Elementy, a także jego pozycja w drzewie dostępności.

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 wadami wzroku 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ę wyboru, 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ł Uruchamianie 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,

Upewnij się, że Twoje strony przechodzą wszystkie audyty w nowej kategorii SEO. Może to pomóc w poprawie pozycji w wyszukiwarce.

Nowa kategoria audytów SEO.

Rysunek 7. Nowa kategoria audytów SEO

nowe audyty wydajności,

Chrome 65 zawiera też wiele nowych kontroli wydajności:

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

Perf ma znaczenie! Po 4-krotnym przyspieszeniu wczytywania stron użytkownicy spędzali w witrynie o 43% więcej czasu, wyświetlali o 34% więcej stron, współczynnik odrzuceń spadł o 24%, a przychody z wyświetlenia strony z artykułem wzrosły o 25%. Więcej informacji

Wskazówka: Jeśli chcesz poprawić szybkość wczytywania stron, ale nie wiesz, od czego zacząć, zajrzyj do 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 do 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 wejdziesz w kod, który przekazuje komunikaty między wątkami, w Narzędziach deweloperskich zobaczysz, co dzieje się w każdym z nich.

Na przykład aplikacja na rys. 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 wątku roboczym. Sam moduł obsługi onmessage publikuje wiadomość w głównym wątku. W tym wywołaniu DevTools wracają do wątku głównego.

Wprowadzanie kodu przekazującego komunikaty w Chrome 65.

Rysunek 8. Kod przekazywania wiadomości w Chrome 65

Gdy w wcześniejszych wersjach Chrome otwierano kod podobny do tego, przeglądarka pokazywała tylko kod z głównego wątku (jak widać na rys. 9).

Wprowadzanie kodu przekazywania wiadomości w Chrome 63.

Rysunek 9. Zapoznanie się z kodem przekazującym komunikaty 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 funkcji setTimeout(), DevTools wykonuje cały kod prowadzący do tego punktu, a potem zatrzymuje się w funkcji przekazanej do funkcji setTimeout().

Wprowadzanie kodu asynchronicznego w Chrome 65.

Rysunek 10. Kod asynchroniczny w Chrome 65

Gdy w Chrome 63 wejdziesz do kodu takiego jak ten, Narzędzia deweloperskie zatrzymają się w miejscu, w którym kod był wykonywany chronologicznie, jak widać na rysunku 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 wydajnoś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żywać Puppeteer do udostępniania funkcji Narzędzi deweloperskich podczas przeglądania bez ich otwierania. Przykładem jest artykuł Korzystanie z funkcji Narzędzi deweloperskich bez ich otwierania.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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 Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

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