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

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

• Lokalne zastąpienia
• Nowe narzędzia ułatwień dostępu
• Karta Zmiany
• Nowe audyty SEO i skuteczność
• Wiele nagrań w panelu Skuteczność
• Niezawodne wykonywanie kodu przy użyciu instancji roboczych i kodu asynchronicznego

Poniżej możesz przeczytać lub obejrzeć filmową wersję tych informacji o wersji.

Lokalne zastąpienia

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

Rysunek 1. Trwałe zmiany CSS po wczytaniu stron 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, 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 sieć .

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 Skonfiguruj zastąpienia.

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

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

6. Wprowadź zmiany.

Ograniczenia

• Narzędzia deweloperskie nie zapisują zmian wprowadzonych w drzewie DOM w panelu Elementy. Edytuj kod HTML w Źródła.
• Jeśli edytujesz kod CSS w panelu Style, a źródłem kodu CSS jest plik HTML, Narzędzia deweloperskie nie zapisz zmianę. Zamiast tego zmodyfikuj plik HTML w panelu Źródła.

Podobne funkcje

• Obszary robocze. Narzędzia deweloperskie automatycznie mapują zasoby sieciowe na lokalne repozytorium. Zawsze, gdy: wprowadzić zmianę w Narzędziach deweloperskich. Zmiany zostaną również zapisane w lokalnym repozytorium.

Karta Zmiany

Śledzenie zmian wprowadzanych lokalnie w Narzędziach deweloperskich za pomocą nowej karty Zmiany.

Rysunek 3. Karta Zmiany

Nowe narzędzia ułatwień dostępu

w nowym panelu Ułatwienia dostępu możesz zbadać właściwości ułatwień dostępu elementu. sprawdź współczynnik kontrastu elementów tekstowych za pomocą selektora kolorów, by upewnić się, że dostępne dla użytkowników z wadą wzroku lub z wadą wzroku.

Panel ułatwień dostępu

Skorzystaj z panelu Ułatwienia dostępu w panelu Elementy, by zbadać właściwości ułatwień dostępu. aktualnie wybranego elementu.

Rysunek 4. W panelu Ułatwienia dostępu zobaczysz atrybuty i obliczone właściwości ARIA aktualnie wybrany w drzewie DOM w panelu Elementy oraz jego pozycja w drzewie ułatwień dostępu

Obejrzyj poniżej film Roba Dodsona A11ycast na temat oznaczania etykietami, aby dowiedzieć się, jak działa okienko Accessibility.

Współczynnik kontrastu w selektorze kolorów

Selektor kolorów pokazuje teraz współczynnik kontrastu elementów tekstowych. Zwiększam kontrast i proporcje elementów tekstowych zwiększają dostępność witryny dla użytkowników z wadą wzroku lub wady rozpoznawania barw. Więcej informacji o współczynniku kontrastu znajdziesz w artykule Kolor i kontrast. wpływa na ułatwienia dostępu.

Zwiększając kontrast kolorów elementów tekstowych, sprawia, że witryna jest bardziej przydatna dla wszystkich użytkowników. W Inaczej mówiąc, jeśli tekst jest szary z białym tłem, nikt nie będzie go w stanie odczytać.

Rysunek 5. Sprawdzam współczynnik kontrastu zaznaczonego elementu h1

Na Rys. 5 2 znaczniki wyboru obok 4.61 oznaczają, że ten element jest zgodny z ulepszonym zalecany współczynnik kontrastu (AAA). Gdyby miał tylko 1 znacznik wyboru, oznacza to, że spełniał minimalny zalecany współczynnik kontrastu (AA).

Kliknij Pokaż więcej , aby rozwinąć sekcję Kontrast Współczynnik proporcji. Biała linia w polu Zakres kolorów wyznacza granicę między kolorami o zalecanym współczynniku kontrastu, oraz tych, które go nie mają. Na przykład szary kolor Rysunek 6 jest zgodny z zaleceniami, co oznacza, że wszystkie kolory poniżej białej linii również spełniają wymagania o zaleceniach.

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

Podobne funkcje

Panel Audyty ma zautomatyzowany audyt ułatwień dostępu, który pozwala sprawdzić, czy każdy element tekstowy jest włączony strona ma wystarczający współczynnik kontrastu.

Przeczytaj artykuł Uruchamianie narzędzia Lighthouse w Narzędziach deweloperskich w Chrome lub obejrzyj film A11ycast poniżej, aby dowiedzieć się, jak korzystać Audyty, aby przetestować ułatwienia dostępu.

Nowe audyty

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

Nowe audyty SEO

Aby Twoje strony zaliczyły wszystkie audyty w nowej kategorii SEO, mogą poprawić w rankingu w wyszukiwarkach.

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

Wynik ma znaczenie! Gdy witryna Mynet czterokrotnie przyspieszyła wczytywanie stron, użytkownicy spędzają w niej o 43% więcej czasu strony, wyświetlało o 34% więcej stron, współczynnik odrzuceń spadł o 24%, a przychody wzrosły o 25% z artykułu. odsłonę. Więcej informacji

Wskazówka: Jeśli chcesz zwiększyć szybkość ładowania swoich stron, ale nie wiesz, od czego zacząć, użyj panelu Kontrole. Po wpisaniu adresu URL można uzyskać szczegółowy raport na temat wielu różnych sposoby ulepszenia tej strony. Rozpocznij

Inne informacje

• Nowe, ręczne audyty ułatwień dostępu
• Zmiany w audycie WebP, które mają sprawić, że będzie on lepiej zintegrowany z innymi formatami obrazów nowej generacji
• Nowe wersje wyniku ułatwień dostępu
• Jeśli w przypadku danej strony nie ma zastosowania audyt ułatwień dostępu, nie będzie on już uwzględniany w procesie wynik ułatwień dostępu
• Skuteczność jest teraz główną sekcją raportów

Niezawodne wykonywanie kodu przy użyciu instancji roboczych i kodu asynchronicznego

Chrome 65 wprowadza aktualizacje Step Into przy logowaniu który przekazuje wiadomości między wątkami, a także kod asynchroniczny. Jeśli chcesz przejść do poprzedniego kroku możesz użyć nowego kroku .

dostęp do kodu, który przekazuje wiadomości między wątkami.

Gdy wchodzisz w skład kodu, który przekazuje wiadomości między wątkami, w Narzędziach deweloperskich zobaczysz, co dzieje się w w każdym wątku.

Na przykład aplikacja na Rys. 8 przekazuje wiadomość między wątkiem głównym a wątkiem instancji roboczej. Po wejściu w wywołanie postMessage() w wątku głównym Narzędzia deweloperskie zatrzymują się w onmessage w wątku roboczym. Sam moduł obsługi onmessage wysyła wiadomość z powrotem do głównej w wątku. Użycie tego wywołania wstrzymuje Narzędzia deweloperskie z powrotem w wątku głównym.

Rysunek 8. Otwieranie kodu przekazującego wiadomości w Chrome 65

Po wpisaniu takiego kodu we wcześniejszych wersjach Chrome pokazuje tylko głównej części kodu, tak jak widać na Rys. 9.

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

Uzyskiwanie dostępu do kodu asynchronicznego

Gdy wchodzisz do kodu asynchronicznego, Narzędzia deweloperskie zakładają, że chcesz wstrzymać asynchroniczny kod, który zostanie ostatecznie uruchomiony.

Na przykład na Rys. 10 po przejściu do metody setTimeout() Narzędzia deweloperskie uruchamiają cały kod. prowadząc do takiego punktu za kulisami, a następnie zatrzymuje się w funkcji, która jest przekazywana do setTimeout()

Rysunek 10. Wchodzenie w kod asynchroniczny w Chrome 65

Po wpisaniu takiego kodu w Chrome 63 Narzędzia deweloperskie wstrzymywały bieg w kodzie chronologicznie jak widać na Rys. 11.

Rysunek 11. Wchodzenie w kod asynchroniczny w Chrome 63

Wiele nagrań w panelu Skuteczność

Panel Skuteczność umożliwia teraz tymczasowe zapisanie maksymalnie 5 nagrań. Nagrania są usunięte po zamknięciu okna Narzędzi deweloperskich. Przeczytaj artykuł Pierwsze kroki z analizą środowiska wykonawczego Wydajność, aby zapoznać się z panelem Wydajność.

Rysunek 12. Wybieranie kilku nagrań w panelu Skuteczność

Dodatkowo: zautomatyzuj działania w Narzędziach deweloperskich dzięki Puppeteer 1.0

W wersji 1.0 Puppeteer – narzędzia do automatyzacji przeglądarki opracowanego przez zespół Chrome Dev Tools na zewnątrz. Za pomocą Puppeteer 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ń zautomatyzowanych, 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 artykule Krótki przewodnik.

Puppeteer pozwala też korzystać z funkcji Narzędzi deweloperskich podczas przeglądania bez konieczności otwórz Narzędzia deweloperskie. Przykład znajdziesz w artykule Używanie funkcji Narzędzi deweloperskich bez otwierania narzędzi.

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 testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

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

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.