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

Kayce Basques

Nowe funkcje, które pojawią się w Narzędziach deweloperskich w Chrome 65, to:

• Zastąpienia lokalne
• Nowe narzędzia ułatwiające dostęp
• Karta Zmiany
• Nowe audyty SEO i wydajności
• Wiele nagrań w panelu Skuteczność
• Niezawodne przechodzenie przez kod w przypadku procesów roboczych i kodu asynchronicznego

Przeczytaj poniższe informacje o wersji lub obejrzyj film z tymi informacjami.

Lokalne zastąpienia

Lokalne zastąpienia umożliwiają wprowadzanie zmian w Narzędziach deweloperskich i zachowywanie ich po ponownym załadowaniu strony. Wcześniej wszystkie zmiany wprowadzone w Narzędziach deweloperskich były tracone po ponownym załadowaniu strony. Lokalne zastąpienia działają w przypadku większości typów plików, z kilkoma wyjątkami. Zobacz Ograniczenia.

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

Jak to działa:

• Określasz katalog, w którym Narzędzia deweloperskie mają zapisywać zmiany.
• Gdy wprowadzisz zmiany w Narzędziach deweloperskich, zapiszą one kopię zmodyfikowanego pliku w Twoim katalogu.
• Gdy ponownie załadujesz stronę, Narzędzia deweloperskie wyświetlą lokalny, zmodyfikowany plik zamiast zasobu sieciowego.

Aby skonfigurować lokalne zastąpienia:

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

2. Otwórz kartę Zastąpienia.

   

   Rysunek 2. Karta Zastąpienia

3. Kliknij Konfiguracja zastąpień.

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

5. U góry obszaru wyświetlania kliknij Zezwól, aby przyznać Narzędziom deweloperskim dostęp do odczytu i zapisu w katalogu.

6. Wprowadź zmiany.

Ograniczenia

• Narzędzia deweloperskie nie zapisują 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 CSS jest plik HTML, Narzędzia deweloperskie nie zapiszą zmiany. Zamiast tego edytuj plik HTML w panelu Źródła.

Powiązane funkcje

• Obszary robocze Narzędzia deweloperskie automatycznie mapują zasoby sieciowe na lokalne repozytorium. Za każdym razem, gdy wprowadzisz zmianę w Narzędziach dla programistów, zostanie ona zapisana również w lokalnym repozytorium.

Karta Zmiany

Śledź zmiany wprowadzane lokalnie w Narzędziach deweloperskich na nowej karcie 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, i sprawdź współczynnik kontrastu elementów tekstowych w selektorze kolorów, aby upewnić się, że są one dostępne dla użytkowników z wadami wzroku lub zaburzeniami rozpoznawania barw.

Panel ułatwień dostępu

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

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

Obejrzyj film Roba Dodsona z serii A11ycast na temat etykietowania, aby zobaczyć panel Ułatwienia dostępu w działaniu.

Współczynnik kontrastu w selektorze kolorów

Selektor kolorów wyświetla teraz współczynnik kontrastu elementów tekstowych. Zwiększenie współczynnika kontrastu elementów tekstowych ułatwia korzystanie z witryny użytkownikom z zaburzeniami widzenia lub zaburzeniami rozpoznawania barw. Więcej informacji o tym, jak współczynnik kontrastu wpływa na ułatwienia dostępu, znajdziesz w sekcji Kolor i kontrast.

Zwiększenie kontrastu kolorów elementów tekstowych sprawia, że witryna jest bardziej użyteczna dla wszystkich użytkowników. Inaczej mówiąc, jeśli tekst jest szary na białym tle, trudno go przeczytać.

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

Na rysunku 5 2 ptaszki obok wartości 4,61 oznaczają, że ten element spełnia zalecany współczynnik kontrastu (AAA). Jeśli będzie tylko jeden znacznik wyboru, będzie to oznaczać, że spełnia on minimalny zalecany współczynnik kontrastu (AA).

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

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

Powiązane funkcje

Panel Audyty zawiera automatyczny audyt dostępności, który sprawdza, czy każdy element tekstowy na stronie ma odpowiedni współczynnik kontrastu.

Aby dowiedzieć się, jak używać panelu Audyty do testowania ułatwień dostępu, przeczytaj artykuł Uruchamianie Lighthouse w Narzędziach Chrome dla programistów lub obejrzyj film 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 wyszukiwarkach.

Rysunek 7. Nowa kategoria audytów SEO

nowe audyty wydajności,

Chrome 65 zawiera też wiele nowych testów wydajności:

• Długi czas uruchamiania JavaScriptu
• Używa nieefektywnych zasad pamięci podręcznej w przypadku statycznych komponentów
• Nie używa przekierowań
• Dokument używa wtyczek
• Minifikuj CSS
• Zmniejsz JavaScript

Wydajność ma znaczenie Po 4-krotnym zwiększeniu szybkości 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 wzrosły o 25% na wyświetlenie strony artykułu. Więcej informacji

Wskazówka: Jeśli chcesz poprawić wydajność wczytywania stron, ale nie wiesz, od czego zacząć, wypróbuj panel Audyty. Podajesz adres URL, a narzędzie generuje szczegółowy raport z wieloma różnymi sposobami na ulepszenie tej strony. Rozpocznij

Inne informacje

• Nowe, ręczne audyty dostępności
• Aktualizacje audytu WebP, aby uwzględniał inne formaty obrazów nowej generacji.
• Zmiana oceny ułatwień dostępu
• Jeśli audyt dostępności nie ma zastosowania do strony, nie jest już uwzględniany w ocenie dostępności.
• Skuteczność jest teraz najważniejszą sekcją w raportach

Niezawodne przechodzenie przez kod z użyciem procesów roboczych i kodu asynchronicznego

Chrome 65 wprowadza aktualizacje przycisku Step Into podczas wchodzenia w kod, który przekazuje wiadomości między wątkami, oraz kod asynchroniczny. Jeśli chcesz przywrócić poprzednie działanie, możesz użyć nowego przycisku Krok .

Wchodzenie w kod, który przekazuje wiadomości między wątkami

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

Na przykład aplikacja na rysunku 8 przekazuje wiadomość między głównym wątkiem a wątkiem roboczym. Po wejściu do wywołania postMessage() w głównym wątku Narzędzia deweloperskie wstrzymują działanie w onmessage obsłudze w wątku instancji roboczej. Sam moduł obsługi onmessage wysyła wiadomość z powrotem do wątku głównego. Wejście do tej rozmowy powoduje wstrzymanie narzędzi w wątku głównym.

Rysunek 8. Wchodzenie w kod przekazywania wiadomości w Chrome 65

W starszych wersjach Chrome, gdy wchodziłeś w taki kod, przeglądarka wyświetlała tylko kod po stronie głównego wątku, jak widać na rysunku 9.

Rysunek 9. Wchodzenie w kod przekazywania wiadomości w Chrome 63

Wchodzenie w kod asynchroniczny

Podczas wchodzenia w kod asynchroniczny Narzędzia deweloperskie zakładają teraz, że chcesz wstrzymać działanie w kodzie asynchronicznym, który ostatecznie zostanie uruchomiony.

Na przykład na rysunku 10 po przejściu do setTimeout() Narzędzia deweloperskie uruchamiają w tle cały kod do tego momentu, a następnie wstrzymują działanie w funkcji przekazanej do setTimeout().

Rysunek 10. Wchodzenie w kod asynchroniczny w Chrome 65

Gdy w Chrome 63 wchodziłeś w taki kod, Narzędzia deweloperskie wstrzymywały działanie kodu w kolejności chronologicznej, co widać na rysunku 11.

Rysunek 11. Wchodzenie w kod asynchroniczny w Chrome 63

Wiele nagrań w panelu Wydajność

W panelu Wydajność możesz teraz tymczasowo zapisać do 5 nagranych sesji. Nagrania są usuwane po zamknięciu okna Narzędzi deweloperskich. Aby zapoznać się z panelem Wydajność, przeczytaj artykuł Pierwsze kroki w analizowaniu wydajności środowiska wykonawczego.

Rysunek 12. Wybieranie nagrań w panelu Skuteczność

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

Wersja 1.0 Puppeteer, narzędzia do automatyzacji przeglądarki, które jest utrzymywane przez zespół Narzędzi deweloperskich w Chrome, jest już dostępna. Za pomocą Puppeteera możesz zautomatyzować wiele zadań, które wcześniej były dostępne tylko w narzędziach deweloperskich, np. 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();
})();

Ma też interfejsy API do wielu ogólnie 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 konieczności otwierania ich. Przykład znajdziesz w artykule Korzystanie z funkcji Narzędzi deweloperskich bez otwierania Narzędzi deweloperskich.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.