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

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

Poniżej możesz przeczytać informacje o wersji lub obejrzeć je w formie wideo.

Lokalne zastąpienia

Lokalne zastąpienia umożliwiają wprowadzanie zmian w Narzędziach deweloperskich i zachowywanie ich po wczytaniu stron. Wcześniej wszystkie 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.

Utrwalanie zmiany CSS po wczytaniu strony za pomocą lokalnych zastąpień.

Rysunek 1. Utrwalanie zmiany CSS po wczytaniu strony za pomocą lokalnych zastąpień

Jak to działa:

  • Podajesz katalog, w którym Narzędzia deweloperskie mają zapisywać zmiany.
  • Gdy wprowadzisz zmiany w Narzędziach deweloperskich, te narzędzia 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ć zastąpienia lokalne:

  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 widocznego obszaru kliknij Zezwalaj, aby przyznać Narzędziom deweloperskim uprawnienia do odczytu i zapisu w katalogu.

  6. Wprowadź zmiany.

Ograniczenia

  • Narzędzia deweloperskie nie zapisują zmian wprowadzonych w drzewie DOM w panelu Elementy. Edytuj kod HTML w panelu Źródła.
  • Jeśli zmodyfikujesz kod CSS w panelu Style, a źródłem tego kodu CSS będzie plik HTML, Narzędzia deweloperskie nie zapiszą zmiany. Zamiast tego zmodyfikuj plik HTML w panelu Źródła.
  • Obszary robocze. DevTools automatycznie mapuje zasoby sieciowe na lokalne repozytorium. Za każdym razem, gdy wprowadzisz zmianę w Narzędziach deweloperskich, zostanie ona również zapisana w Twoim lokalnym repozytorium.

Karta Zmiany

Na nowej karcie Zmiany możesz śledzić zmiany wprowadzone lokalnie w Narzędziach deweloperskich.

Karta Zmiany

Rysunek 3. Karta Zmiany

Nowe narzędzia ułatwień dostępu

W nowym panelu Ułatwienia dostępu możesz sprawdzać właściwości ułatwień dostępu elementu i sprawdzać współczynnik kontrastu elementów tekstowych w selektorze kolorów, aby upewnić się, że są one dostępne dla użytkowników z wadą wzroku lub niedowidzących.

Okienko ułatwień dostępu

W panelu Ułatwienia dostępu w panelu Elementy sprawdź właściwości ułatwień dostępu wybranego aktualnie elementu.

Okienko Ułatwienia dostępu

Rysunek 4. W panelu Ułatwienia dostępu widoczne 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 ułatwień dostępu.

Obejrzyj film A11ycast Roba Dodsona na temat etykietowania poniżej, aby zobaczyć, jak działa panel Ułatwienia dostępu.

Współczynnik kontrastu w selektorze kolorów

Selektor kolorów pokazuje teraz współczynnik kontrastu elementów tekstowych. Zwiększenie kontrastu elementów tekstowych sprawia, że Twoja witryna jest bardziej dostępna dla użytkowników z wadą wzroku lub kolorów. 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 strona jest bardziej przydatna dla wszystkich użytkowników. Inaczej mówiąc, jeśli Twój tekst jest szary na białym tle, trudno go przeczytać.

Sprawdzam współczynnik kontrastu podświetlonego elementu H1.

Rysunek 5. Sprawdzam współczynnik kontrastu podświetlonego elementu h1

Na Rys. 5 2 znaczniki obok 4.61 oznaczają, że ten element spełnia zalecany współczynnik kontrastu (AAA). Gdyby miał tylko jeden znacznik wyboru, miałby on minimalny zalecany współczynnik kontrastu (AA).

Kliknij Pokaż więcej Pokaż więcej, aby rozwinąć sekcję Współczynnik kontrastu. Biała linia w polu Widmo kolorów reprezentuje granicę między kolorami o zalecanym współczynniku kontrastu i tymi, które nie spełniają wymogów. Przykład: ponieważ szary kolor na Rys. 6 jest zgodny z rekomendacjami, oznacza to, że wszystkie kolory poniżej białej linii również są zgodne z zaleceniami.

Rozwinięta sekcja Współczynnik kontrastu.

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

Panel Kontrole udostępnia automatyczny audyt ułatwień dostępu, który sprawdza, czy każdy element tekstowy na stronie ma wystarczający współczynnik kontrastu.

Aby dowiedzieć się, jak za pomocą panelu Audits testować ułatwienia dostępu, przeczytaj artykuł Uruchamianie narzędzia Lighthouse w Chrome DevTools lub obejrzyj film A11ycast poniżej.

Nowe kontrole

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

Nowe audyty SEO

Zapewnianie, że Twoje strony przejdą każdy z audytów w nowej kategorii SEO, może pomóc w poprawie rankingu w wyszukiwarce.

Nowa kategoria audytów SEO.

Rysunek 7. Nowa kategoria audytów SEO

Nowe audyty skuteczności

W Chrome 65 wprowadziliśmy też wiele nowych funkcji kontroli wydajności:

  • Czas uruchamiania JavaScriptu jest długi
  • Stosuje nieefektywne zasady pamięci podręcznej zasobów statycznych
  • Unika przekierowań strony
  • Dokument używa wtyczek
  • Minifikuj CSS
  • Zmniejsz JavaScript

Jakość ma znaczenie. Po czterokrotnym przyspieszeniu wczytywania strony firma Mynet spędzała 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 zwiększyć szybkość wczytywania stron, ale nie wiesz, od czego zacząć, skorzystaj z panelu Audyty. Wystarczy, że podasz mu adres URL i zobaczysz szczegółowy raport o wielu różnych sposobach ulepszenia strony. Rozpocznij

Inne informacje

Niezawodne przekazywanie kodu z wykorzystaniem instancji roboczych i kodu asynchronicznego

Chrome 65 wprowadza aktualizacje przycisku Step Into (Krok do) Wejdź na stronę, gdy wchodzisz do kodu, który przekazuje wiadomości między wątkami, oraz kodu asynchronicznego. Jeśli chcesz używać poprzedniego przycisku, możesz użyć nowego przycisku Krok Step.

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

Gdy wejdziesz w kod, który przekazuje wiadomości między wątkami, w Narzędziach deweloperskich zobaczysz teraz, co dzieje się w każdym wątku.

Na przykład aplikacja na rysunku 8 przekazuje komunikat między wątkiem głównym a wątkiem roboczym. Po dotarciu do wywołania postMessage() w wątku głównym DevTools zatrzymuje się w module obsługi onmessage w wątku instancji roboczej. Sama metoda obsługi onmessage publikuje wiadomość z powrotem w wątku głównym. Otwarcie tego wywołania wstrzymuje Narzędzia deweloperskie z powrotem w wątku głównym.

Fragment kodu do przekazywania wiadomości w Chrome 65.

Rysunek 8. Wykorzystywanie kodu do przekazywania wiadomości w Chrome 65

Gdy wchodzisz w ten kod we wcześniejszych wersjach Chrome, przeglądarka wyświetlała tylko fragment kodu od strony głównej wątku, jak widać na Rys. 9.

Wykorzystywanie kodu do przekazywania wiadomości w Chrome 63.

Rysunek 9. Wykorzystywanie kodu do przekazywania wiadomości w Chrome 63

Wykorzystywanie kodu asynchronicznego

Gdy wchodzisz w kod asynchroniczny, Narzędzia deweloperskie zakładają teraz, że chcesz wstrzymać działanie kodu asynchronicznego, który ostatecznie się uruchamia.

Na Rys. 10 po wejściu na platformę setTimeout() narzędzia deweloperskie uruchamiają w tle cały kod prowadzący do tego miejsca, a następnie wstrzymują działanie funkcji przekazywanej do setTimeout().

Wykorzystywanie kodu asynchronicznego w Chrome 65.

Rysunek 10. Wykorzystywanie kodu asynchronicznego w Chrome 65

Po wprowadzeniu takiego kodu w Chrome 63 Narzędzia deweloperskie wstrzymywały jego działanie w kolejności chronologicznej, jak widać na Rys. 11.

Wykorzystywanie kodu asynchronicznego w Chrome 63.

Rysunek 11. Wykorzystywanie kodu asynchronicznego w Chrome 63

Wiele nagrań w panelu Skuteczność

W panelu Wydajność możesz teraz tymczasowo zapisać maksymalnie 5 nagrań. Gdy zamkniesz okno Narzędzi deweloperskich, nagrania zostaną usunięte. Aby zapoznać się z panelem Wydajność, przeczytaj artykuł Wprowadzenie do analizy wydajności środowiska wykonawczego.

Wybieranie spośród kilku nagrań w panelu Skuteczność.

Rysunek 12. Wybieranie spośród kilku nagrań w panelu Wydajność

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

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

Ma też interfejsy API do wykonywania 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();
})();

Zobacz Szybki start, aby dowiedzieć się więcej.

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

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