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

Kayce Basques
Kayce Basques

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

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 przypadku większości typów plików z kilkoma wyjątkami. Zobacz Ograniczenia.

Utrzymywanie zmian CSS po wczytaniu strony za pomocą lokalnych zastąpień.

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 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 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 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 kod CSS w panelu Style, a źródłem kodu CSS jest plik HTML, Narzędzia deweloperskie nie zapiszą tej zmiany. Zamiast tego zmodyfikuj plik HTML w panelu Źródła.
  • Obszary robocze. Narzędzia deweloperskie automatycznie mapują zasoby sieciowe na lokalne repozytorium. Każda zmiana w Narzędziach deweloperskich zostanie również zapisana w Twoim lokalnym repozytorium.

Karta Zmiany

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

Karta Zmiany

Rysunek 3. Karta Zmiany

Nowe narzędzia ułatwień dostępu

Skorzystaj z 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 upewnić się, że są one dostępne dla użytkowników z wadami wzroku lub z 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.

Okienko 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

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 tekstu. Zwiększenie współczynnika kontrastu elementów tekstowych ułatwia dostęp do witryny użytkownikom niedowidzącym lub niedowidzącym. Aby dowiedzieć się więcej o wpływie współczynnika kontrastu na ułatwienia dostępu, przeczytaj artykuł Kolor i kontrast.

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

Sprawdzam współczynnik kontrastu zaznaczonego elementu H1.

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

Na Rys.5 2 znaczniki wyboru obok 4,61 oznaczają, że ten element spełnia ulepszony zalecany współczynnik kontrastu (AAA). Jeśli reklama ma tylko 1 znacznik wyboru, oznacza to, że osiągnięto minimalny zalecany współczynnik kontrastu (AA).

Kliknij Pokaż więcej Pokaż więcej, aby rozwinąć sekcję Współczynnik kontrastu. Biała linia w polu Zakres kolorów wyznacza granicę między kolorami, które spełniają zalecany współczynnik kontrastu, oraz tymi, które go nie spełniają. Przykład: kolor szary na Rys. 6 jest zgodny z zaleceniami, co oznacza, ż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 Audyty jest wyposażony w automatyczny audyt ułatwień dostępu, który pozwala sprawdzić, czy każdy element tekstowy na stronie ma wystarczający współczynnik kontrastu.

Aby dowiedzieć się, jak testować ułatwienia dostępu za pomocą panelu Audyty, zapoznaj się z sekcją Uruchamianie narzędzia Lighthouse w Narzędziach deweloperskich w Chrome lub obejrzyj film A11ycast poniżej.

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 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 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 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 zwiększyć szybkość ładowania stron, ale nie wiesz, od czego zacząć, wypróbuj panel Audyty. Po podaniu adresu URL otrzymasz szczegółowy raport na temat wielu różnych sposobów ulepszenia tej strony. Rozpocznij

Inne informacje

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

W Chrome 65 podczas otwierania kodu, który przekazuje wiadomości między wątkami, oraz kodu asynchronicznego, można zaktualizować przycisk Step Into Wejdź. Jeśli chcesz zachować poprzedni sposób kroków, możesz zamiast tego użyć nowego przycisku Krok Step.

dostęp do kodu, który przekazuje wiadomości 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 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 module obsługi onmessage w wątku instancji roboczej. Sam moduł obsługi onmessage publikuje wiadomość z powrotem w wątku głównym. Użycie tego wywołania wstrzymuje Narzędzia deweloperskie z powrotem w wątku głównym.

Otwórz kod przekazujący wiadomości w Chrome 65.

Rysunek 8. Otwieranie kodu przekazującego 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.

Pierwsze kroki z kodem przekazującym wiadomości w Chrome 63.

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ć działanie tego kodu.

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

Wchodzenie do kodu asynchronicznego w Chrome 65

Rysunek 10. Wchodzenie w kod asynchroniczny w Chrome 65

Po wprowadzeniu takiego kodu w Chrome 63 Narzędzia deweloperskie wstrzymują kod w trakcie chronologicznego uruchomienia, jak widać na Rys. 11.

Wchodzenie do kodu asynchronicznego w Chrome 63

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ą usuwane po zamknięciu okna Narzędzia deweloperskiego. Aby dowiedzieć się, jak korzystać z panelu Wydajność, przeczytaj artykuł Pierwsze kroki z analizą wydajności środowiska wykonawczego.

Wybieranie kilku nagrań w panelu Skuteczność.

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

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

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

Możesz też użyć aplikacji Puppeteer, aby korzystać z funkcji Narzędzi deweloperskich podczas przeglądania bez konieczności ich jawnego otwierania. 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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