Lighthouse: optymalizacja szybkości strony

Omówienie

Aby przeprowadzić kompleksowy audyt witryny, użyj panelu Lighthouse. Panel Lighthouse generuje raport, który zawiera te informacje o Twojej witrynie:

• Wyniki
• Ułatwienia dostępu
• Sprawdzone metody
• SEO

... i wiele innych danych.

Ten samouczek pomoże Ci zacząć korzystać z Lighthouse w Narzędziach deweloperskich w Chrome.

Więcej informacji o tym, jak Lighthouse może poprawiać jakość witryny, znajdziesz w dokumentacji Lighthouse.

Cel samouczka

W tym samouczku dowiesz się, jak za pomocą Narzędzi programistycznych Chrome znaleźć sposoby na szybsze wczytywanie stron.

Czytaj dalej lub obejrzyj film z tego samouczka:

Wymagania wstępne

Musisz mieć podstawowe doświadczenie w programowaniu stron internetowych, podobne do tego, które jest przekazywane w tym kursie Wprowadzenie do programowania stron internetowych.

Nie musisz znać szczegółów dotyczących wydajności wczytywania.

Wprowadzenie

Tu Tony. Tony jest bardzo znany w kociem społeczeństwie. Stworzył stronę internetową, na której fani mogą znaleźć ulubione potrawy. Jego fani uwielbiają tę stronę, ale Tony wciąż słyszy skargi na jej wolne wczytywanie. Tony prosi Cię o pomoc w przyspieszeniu działania witryny.

Krok 1. Sprawdź witrynę

Gdy chcesz poprawić szybkość wczytywania witryny, zacznij od audytu. Kontrola ma 2 ważne funkcje:

• Stanowi podstawę bazową, na podstawie której mierzysz kolejne zmiany.
• Zawiera on wskazówki dotyczące zmian, które będą miały największy wpływ na skuteczność.

Skonfiguruj

Najpierw musisz skonfigurować nowe środowisko pracy dla witryny Tomka, aby móc wprowadzić w nim zmiany później:

1. Zmodyfikuj projekt witryny na Glitchu. Nowy projekt otworzy się w karcie. Ta karta będzie nazywana kartą edytora.

   

   Nazwa projektu zmienia się z tony na losową nazwę. Masz teraz swoją własną kopię kodu, którą możesz edytować. Później wprowadzisz zmiany w tym kodzie.

2. U dołu karty edytora kliknij Podgląd > Podgląd w nowym oknie. Wersja demonstracyjna otworzy się w nowej karcie. Ta karta będzie nazywana kartą demonstracyjną. Załadowanie witryny może trochę potrwać.

   

3. Otwórz Narzędzia deweloperskie i przetestuj demo.

   

Ustal wartość odniesienia

Wartość bazowa to zapis skuteczności witryny przed wprowadzeniem jakichkolwiek ulepszeń.

1. Otwórz panel Lighthouse. Może być ukryty za double_arrow więcej paneli.

   

2. Dopasuj ustawienia konfiguracji raportu Lighthouse do tych na zrzucie ekranu. Oto wyjaśnienie różnych opcji:

   • check_box Wyczyść pamięć. Zaznaczenie tego pola powoduje wyczyszczenie całej pamięci powiązanej ze stroną przed każdym audytem. Pozostaw to ustawienie włączone, jeśli chcesz sprawdzić, jak Twoja witryna jest odbierana przez użytkowników odwiedzających ją po raz pierwszy. Wyłącz to ustawienie, jeśli chcesz, aby użytkownicy mogli powtarzać wizyty.
   • check_box Włącz próbkowanie JS. Ta opcja jest domyślnie wyłączona. Gdy ta opcja jest włączona, do śledzenia wydajności dodawane są szczegółowe stosy wywołań JavaScriptu, co może jednak spowolnić generowanie raportu. Ślad jest dostępny w menu more_vert Narzędzia > Wyświetl nieograniczony ślad po wygenerowaniu raportu Lighthouse.
   • Symulowane ograniczanie (domyślnie) arrow_drop_down. Ta opcja symuluje typowe warunki przeglądania na urządzeniu mobilnym. Nazywamy go „symulowanym”, ponieważ Lighthouse nie ogranicza przepustowości podczas procesu sprawdzania. Zamiast tego po prostu ekstrapoluje, ile czasu zajmie wczytanie strony na urządzeniu mobilnym. Z drugiej strony ustawienie Ograniczanie (zaawansowane) w Narzędziach deweloperskich powoduje ograniczenie działania procesora i sieci, co przekłada się na dłuższy proces sprawdzania.
   • Tryb > radio_button_checked Nawigacja (domyślnie). Ten tryb analizuje wczytanie pojedynczej strony, a tego właśnie potrzebujemy w tym samouczku. Więcej informacji znajdziesz w artykule Trzy tryby.
   • Urządzenie > radio_button_checked Mobile. Opcja mobilna zmienia ciąg znaków klienta użytkownika i symuluje widok mobilny. Opcja na komputery wyłącza w zasadzie tylko zmiany wprowadzane na urządzeniach mobilnych.
   • Kategorie > check_box Skuteczność. Jeśli włączysz tylko jedną kategorię, Lighthouse wygeneruje raport tylko z odpowiednim zestawem audytów. Inne kategorie możesz pozostawić włączone, jeśli chcesz zobaczyć, jakie typy rekomendacji się pojawiają. Wyłączenie nieistotnych kategorii nieco przyspieszy proces sprawdzania.

3. Kliknij Analizuj wczytywanie strony. Po 10–30 sekundach panel Lighthouse wyświetli raport o wydajności witryny.

   

Postępowanie w przypadku błędów w raportach

Jeśli w raporcie Lighthouse pojawi się błąd, otwórz kartę demonstracyjną w oknie incognito bez żadnych innych otwartych kart. Dzięki temu Chrome będzie działać z czystym dźwiękiem. W szczególności rozszerzenia do Chrome mogą zakłócać proces sprawdzania.

Interpretowanie raportu

Liczba u góry raportu to ogólny wynik skuteczności witryny. Gdy później wprowadzisz zmiany w kodzie, liczba ta powinna wzrosnąć. Wyższy wynik oznacza lepszą skuteczność.

Dane

Przewiń w dół do sekcji Dane i kliknij Rozwiń widok. Aby zapoznać się z dokumentacją danych, kliknij Więcej informacji...

W tej sekcji znajdziesz dane liczbowe dotyczące skuteczności witryny. Każdy rodzaj danych dostarcza informacji o innym aspekcie skuteczności. Na przykład pierwsze wyrenderowanie treści informuje, kiedy treści są po raz pierwszy wyświetlane na ekranie. Jest to ważny etap w postrzeganiu przez użytkownika wczytywania strony, podczas gdy czas do interakcji oznacza moment, w którym strona jest na tyle gotowa, że może obsługiwać interakcje użytkownika.

Zrzuty ekranu

Poniżej znajdziesz zbiór zrzutów ekranu pokazujących, jak wyglądała strona w momencie wczytania.

Możliwości

Następnie jest sekcja Możliwości, która zawiera konkretne wskazówki dotyczące poprawy szybkości wczytywania tej konkretnej strony.

Kliknij możliwość, aby dowiedzieć się o niej więcej.

Kliknij Więcej informacji..., aby wyświetlić dokumentację wyjaśniającą, dlaczego możliwość jest ważna, i konkretne zalecenia, jak rozwiązać problem.

Diagnostyka

Sekcja Diagnostyka zawiera więcej informacji o czynnikach wpływających na czas wczytywania strony.

Zdawane audyty

Sekcja Zaliczone audyty pokazuje, co witryna robi prawidłowo. Kliknij, aby rozwinąć tę sekcję.

Krok 2. Eksperyment

W sekcji Możliwości raportu Lighthouse znajdziesz wskazówki dotyczące poprawy skuteczności strony. W tej sekcji wdrożysz zalecane zmiany w bazie kodu, sprawdzając po każdej zmianie witrynę, aby zmierzyć, jak wpływają one na szybkość.

Włącz kompresję tekstu

Z raportu wynika, że włączenie kompresji tekstu to jeden z najlepszych sposobów na poprawę skuteczności strony.

Kompresja tekstu polega na zmniejszeniu lub skompresowaniu pliku tekstowego przed przesłaniem go przez sieć. To tak jak można skompresować folder przed wysłaniem go e-mailem, aby zmniejszyć jego rozmiar.

Zanim włączysz kompresję, możesz ręcznie sprawdzić, czy zasoby tekstowe są skompresowane.

Otwórz panel Sieć i kliknij settings Ustawienia > check_box Użyj dużych wierszy żądań.

Każda komórka Size zawiera 2 wartości. Najwyższa wartość to rozmiar pobranego zasobu. Wartość dolna to rozmiar nieskompresowanego zasobu. Jeśli obie wartości są takie same, zasób nie jest kompresowany podczas przesyłania przez sieć. W tym przykładzie wartości górna i dolna dla bundle.js to 1.4 MB.

Kompresję możesz też sprawdzić, analizując nagłówki HTTP zasobu:

1. Kliknij bundle.js i otwórz kartę Nagłówki.

   

2. W sekcji Nagłówki odpowiedzi wyszukaj nagłówek content-encoding. Nie powinieneś/nie powinnaś go widzieć, co oznacza, że bundle.js nie został skompresowany. Gdy zasób jest skompresowany, nagłówek jest zwykle ustawiony na gzip, deflate lub br. Wyjaśnienie tych wartości znajdziesz w dyrektywach.

Wystarczy z tego tłumaczenia. Czas na wprowadzenie zmian. Aby włączyć kompresję tekstu, dodaj kilka linii kodu:

1. Na karcie Edytor otwórz plik server.js i dodaj te 2 wyróżnione wiersze:

   ...
   const fs = require('fs');
   const compression = require('compression');
   
   app.use(compression());
   app.use(express.static('build'));
   ...
   

2. Upewnij się, że app.use(compression()) jest umieszczone przed app.use(express.static('build')).

   

3. Zaczekaj, aż Glitch wdroży nową wersję witryny. W lewym dolnym rogu pojawi się uśmiechnięty emotikon, co oznacza, że wdrożenie zostało zakończone.

Aby ręcznie sprawdzić, czy kompresja działa, użyj przepływów pracy, które poznaliśmy wcześniej:

1. Wróć do karty demonstracyjnej i załaduj stronę ponownie.

   Kolumna Rozmiar powinna teraz zawierać 2 różne wartości dla zasobów tekstowych, takich jak bundle.js. Górna wartość 269 KB w przypadku bundle.js to rozmiar pliku, który został wysłany przez sieć, a dolna wartość 1.4 MB to rozmiar pliku nieskompresowanego.

   

2. Sekcja Nagłówki odpowiedzi w przypadku bundle.js powinna zawierać nagłówek content-encoding: gzip.

   

Ponownie uruchom na stronie raport Lighthouse, aby zmierzyć wpływ kompresji tekstu na szybkość wczytywania strony:

1. Otwórz panel Lighthouse i na pasku akcji u góry kliknij  Wykonaj audyt….

   

2. Pozostaw ustawienia bez zmian i kliknij Analizuj wczytywanie strony.

   

Super! To wygląda na postęp. Ogólna ocena wydajności powinna wzrosnąć, co oznacza, że witryna staje się szybsza.

Kompresja tekstu w rzeczywistych warunkach

Większość serwerów ma proste rozwiązania umożliwiające włączenie kompresji. Wystarczy, że wyszukasz, jak skonfigurować serwer, którego używasz do kompresji tekstu.

Zmień rozmiar obrazów

Z Twojego nowego raportu wynika, że prawidłowe dopasowanie rozmiaru obrazów to kolejna ważna kwestia.

Zmiana rozmiaru obrazów skraca czas wczytywania dzięki zmniejszeniu rozmiaru plików z obrazami. Jeśli użytkownik ogląda obrazy na ekranie urządzenia mobilnego o szerokości 500 pikseli, nie ma sensu wysyłać obrazu o szerokości 1500 pikseli. W idealnej sytuacji obraz powinien mieć maksymalnie 500 pikseli szerokości.

1. W raporcie kliknij Obrazy o odpowiednim rozmiarze, aby sprawdzić, które obrazy wymagają zmiany rozmiaru. Wygląda na to, że wszystkie 4 obrazy są większe niż to konieczne.

   

2. Wróć na kartę edytora, otwórz src/model.js.

3. Zawartość komórki const dir = 'big' zastąpiono tekstem const dir = 'small'. Ten katalog zawiera kopie tych samych obrazów, których rozmiar został zmieniony.

4. Sprawdź stronę jeszcze raz, aby zobaczyć, jak ta zmiana wpływa na wydajność wczytywania.

   

Wygląda na to, że ta zmiana ma niewielki wpływ na ogólny wynik skuteczności. Jednak jedna rzecz, której nie pokazuje wyraźnie, to ilość danych sieciowych, które oszczędzasz użytkownikom. Całkowity rozmiar starych zdjęć wynosił około 6,1 MB, a obecnie tylko 633 kB. Możesz to sprawdzić na pasku stanu u dołu panelu Sieć.

Zmiana rozmiaru obrazów w świecie rzeczywistym

W przypadku małych aplikacji wystarczy jednorazowa zmiana rozmiaru. Przy dużej aplikacji to oczywiście nie skalowalne. Oto kilka strategii zarządzania obrazami w dużych aplikacjach:

• Zmieniaj rozmiar obrazów podczas procesu kompilacji.
• Utwórz wiele rozmiarów każdego obrazu podczas procesu kompilacji, a potem użyj w kodzie elementu srcset. Podczas działania przeglądarka sama wybiera rozmiar, który najlepiej pasuje do urządzenia, na którym jest uruchomiona. Zobacz obrazy o względnych rozmiarach.
• Używaj sieci CDN związanej z obrazami, która umożliwia dynamiczne zmienianie rozmiaru obrazu w razie potrzeby.
• W najgorszym razie zoptymalizuj każdy obraz. Może to przynieść ogromne oszczędności. Optymalizacja polega na przepuszczeniu obrazu przez specjalny program, który zmniejsza rozmiar pliku. Więcej wskazówek znajdziesz w artykule Najważniejsze informacje o optymalizacji obrazów.

Wyeliminuj zasoby blokujące renderowanie

Z najnowszego raportu wynika, że obecnie największą szansą jest wyeliminowanie zasobów blokujących renderowanie.

Zasób blokujący renderowanie to zewnętrzny plik JavaScript lub CSS, który przeglądarka musi pobrać, przeanalizować i wykonać, zanim będzie można wyświetlić stronę. Celem jest uruchomienie tylko podstawowego kodu CSS i JavaScript, który jest wymagany do prawidłowego wyświetlania strony.

Pierwszym zadaniem jest więc znalezienie kodu, który nie musi być wykonywany podczas wczytywania strony.

1. Kliknij Wyeliminuj zasoby blokujące renderowanie, aby zobaczyć te zasoby: lodash.js i jquery.js.

   

2. W zależności od systemu operacyjnego naciśnij te klawisze, aby otworzyć menu poleceń:

   • Mac: Command + Shift + P.
   • W systemach Windows, Linux i ChromeOS: Control + Shift + P.

3. Zacznij pisać Coverage i kliknij Pokaż zasięg.

   

   W panelu otworzy się karta Stan.

   

4. Kliknij Odśwież Odśwież. Na karcie Pokrycie znajdziesz informacje o tym, jaka część kodu w językach bundle.js, jquery.js i lodash.js jest wykonywana podczas wczytywania strony.

   

   Na tym zrzucie ekranu widać, że około 74% i 30% plików jQuery i Lodash nie jest używane.

5. Kliknij wiersz jquery.js. Narzędzia deweloperskie otworzy plik w panelu Źródła. wiersz kodu został wykonany, jeśli obok niego znajduje się zielony pasek; Czerwony pasek obok wiersza kodu oznacza, że nie został on wykonany i na pewno nie jest potrzebny podczas wczytywania strony.

   

6. Przewiń kod jQuery. Niektóre wiersze, które są „wykonywane”, są w istocie tylko komentarzami. Przesłanie tego kodu przez narzędzie do kompresji, które usuwa komentarze, to kolejny sposób na zmniejszenie rozmiaru pliku.

Krótko mówiąc, gdy pracujesz z własnym kodem, karta Pokrycie może Ci pomóc przeanalizować kod wiersz po wierszu i przesłać tylko kod potrzebny do wczytania strony.

Czy pliki jquery.js i lodash.js są w ogóle potrzebne do wczytania strony? Karta Blokowanie żądań pokazuje, co się dzieje, gdy zasoby są niedostępne.

1. Kliknij kartę Sieć i ponownie otwórz Menu poleceń.

2. Zacznij pisać blocking, a potem wybierz Pokaż blokowanie żądań. Otworzy się karta Blokowanie żądań.

   

3. Kliknij  Dodaj wzór, wpisz /libs/* w polu tekstowym i naciśnij Enter, aby potwierdzić.

   

4. Odśwież stronę. Żądania jQuery i Lodash są zaznaczone na czerwono, co oznacza, że zostały zablokowane. Strona nadal się wczytuje i jest interaktywna, więc wygląda na to, że te zasoby nie są w ogóle potrzebne.

   

5. Aby usunąć wzór blokowania /libs/*, kliknij Usuń wszystkie wzorce.

Karta Blokowanie żądań służy do symulowania zachowania strony, gdy dany zasób jest niedostępny.

Teraz usuń z kodu odwołania do tych plików i ponownie zweryfikuj stronę:

1. Wróć na kartę edytora, otwórz template.html.

2. Usuń odpowiednie tagi <script>:

   <head>
       ...
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <script src="/https/developer.chrome.google.cn/libs/lodash.js"></script>
       <script src="/https/developer.chrome.google.cn/libs/jquery.js"></script>
       <title>Tony's Favorite Foods</title>
   </head>
   

3. Poczekaj, aż witryna zostanie skompilowana i wdrożona ponownie.

4. Ponownie sprawdź stronę w panelu Lighthouse. Twój ogólny wynik powinien się poprawić.

   

Optymalizacja ścieżki renderowania w rzeczywistych warunkach

Krytyczna ścieżka renderowania odnosi się do kodu potrzebnego do wczytania strony. Ogólnie mówiąc, możesz przyspieszyć wczytywanie strony, przesyłając tylko kod krytyczny podczas wczytywania strony, a potem stosując ładowanie opóźnione dla wszystkich pozostałych elementów.

• Niewiele jest skryptów, które można usunąć od razu, ale często zdarza się, że wielu skryptów nie trzeba wczytywać podczas wczytywania strony, lecz można je wczytywać asynchronicznie. Zobacz Używanie asynchroniczności lub opóźnienia.
• Jeśli używasz platformy, sprawdź, czy ma ona tryb produkcyjny. W tym trybie może być używana funkcja tree shaking, która eliminuje niepotrzebny kod blokujący renderowanie krytyczne.

Mniej pracy z wątkiem głównym

Najnowszy raport pokazuje niewielkie potencjalne oszczędności w sekcji Możliwości, ale jeśli przewiniesz do sekcji Diagnostyka, okaże się, że największym problemem jest nadmierna aktywność głównego wątku.

Wątek główny to miejsce, w którym przeglądarka wykonuje większość zadań związanych z wyświetlaniem strony, takich jak analizowanie i wykonywanie kodu HTML, CSS i JavaScript.

Celem jest użycie panelu Skuteczność do przeanalizowania działań, jakie wykonuje wątek główny podczas wczytywania strony, i znalezienia sposobów na odłożenie w czasie niepotrzebnej pracy lub usunięcie z niej niepotrzebnej pracy.

1. Otwórz Wydajność > Ustawienia nagrywania i ustaw Sieć na Wolna sieć 3G, a Procesor na 6-krotne spowolnienie.

   

   Urządzenia mobilne mają zwykle więcej ograniczeń sprzętowych niż laptopy czy komputery stacjonarne, więc te ustawienia pozwalają na wczytywanie strony tak, jak na urządzeniu o mniejszej mocy.

2. Kliknij Odśwież Odśwież. Narzędzie deweloperskie ponownie wczytuje stronę, a potem generuje wizualizację wszystkich działań, które musiało wykonać, aby ją załadować. Ta wizualizacja będzie nazywana śladem.

   

Śledzenie pokazuje aktywność w kolejności chronologicznej od lewej do prawej. Wykresy FPS, CPU i NET u góry zawierają przegląd klatek na sekundę oraz aktywności procesora i sieci.

Żółta barwa w sekcji Przegląd oznacza, że procesor był całkowicie zajęty wykonywaniem skryptu. To wskazówka, że możesz przyspieszyć wczytywanie strony, wykonując mniej pracy w języku JavaScript.

Zbadaj log czasu, aby znaleźć sposoby na ograniczenie pracy w języku JavaScript:

1. Kliknij sekcję Czas trwania, aby ją rozwinąć.

   

   W pliku są liczne pomiary Czasu użytkownika z React. Wygląda na to, że aplikacja Tony's używa trybu programowania w React. Przejście na tryb produkcyjny w React prawdopodobnie przyniesie łatwe korzyści w zakresie wydajności.

2. Ponownie kliknij Czas, aby zwinąć tę sekcję.

3. Przejrzyj sekcję Główna. Ta sekcja zawiera chronologiczny dziennik aktywności wątku głównego, od lewej do prawej. Oś Y (od góry do dołu) pokazuje przyczynę wystąpienia zdarzeń.

   

   W tym przykładzie zdarzenie Evaluate Script spowodowało wykonanie funkcji (anonymous), która z kolei spowodowała wykonanie funkcji __webpack__require__, która z kolei spowodowała wykonanie funkcji ./src/index.jsx itd.

4. Przewiń na sam dół sekcji Main (Główne). Jeśli używasz frameworku, większość aktywności na najwyższym poziomie jest spowodowana przez ten framework i zwykle nie masz na nią wpływu. Aktywność spowodowana przez Twoją aplikację znajduje się zwykle na dole.

   

   Wygląda na to, że w tej aplikacji funkcja App powoduje wiele wywołań funkcji mineBitcoin. Wygląda na to, że Tony używa urządzeń swoich fanów do wydobywania kryptowaluty.

5. U dołu otwórz kartę Od dołu do góry. Na tej karcie znajdziesz podział, który pokazuje, które aktywności zajęły najwięcej czasu. Jeśli nie widzisz nic w sekcji Od dołu do góry, kliknij etykietę sekcji Główne.

   

   Sekcja Od dołu zawiera informacje tylko o wybranej aktywności lub grupie aktywności. Jeśli np. klikniesz jedną z aktywności mineBitcoin, w sekcji Od dołu będą widoczne tylko informacje o tej aktywności.

   Kolumna Czas samodzielny wskazuje, ile czasu zajęło wykonanie każdej aktywności. W tym przypadku około 82% czasu wątku głównego zostało poświęcone funkcji mineBitcoin.

Czas sprawdzić, czy użycie trybu produkcyjnego i zmniejszenie liczby działań JavaScript przyspiesza wczytywanie strony. Zacznij od trybu produkcyjnego:

1. Na karcie edytora otwórz webpack.config.js.
2. Zmień "mode":"development" na "mode":"production".
3. Poczekaj na wdrożenie nowej kompilacji.

4. Ponownie zweryfikuj stronę.

   

Zmniejsz aktywność JavaScriptu, usuwając wywołanie mineBitcoin:

1. Na karcie Edytor otwórz src/App.jsx.
2. Skomentuj wywołanie funkcji this.mineBitcoin(1500) w: constructor.
3. Poczekaj na wdrożenie nowej kompilacji.
4. Ponownie zweryfikuj stronę.

Jak zawsze, nadal trzeba coś zrobić, np. zmniejszyć wartości największego wyrenderowania treści i skumulowanego przesunięcia układu.

Zmniejszenie głównego wątku w świecie rzeczywistym

Ogólnie rzecz biorąc, panel Skuteczność dostarcza najczęściej informacji o działaniach podejmowanych w trakcie wczytywania witryny i sposobów na usunięcie zbędnych aktywności.

Jeśli wolisz podejście podobne do console.log(), interfejs API User Timing umożliwia dowolne oznaczanie pewnych faz cyklu życia aplikacji w celu śledzenia, ile czasu zajmuje każda z nich.

Podsumowanie

• Gdy chcesz zoptymalizować czas ładowania witryny, zawsze zacznij od audytu. Audyt stanowi punkt odniesienia i wskazuje, co można poprawić.
• Wprowadzaj jedną zmianę naraz i sprawdzaj stronę po każdej zmianie, aby zobaczyć, jak wpływa ona na skuteczność.

Dalsze kroki

Wykonuj audyty w swojej witrynie. Jeśli potrzebujesz pomocy przy interpretacji raportu lub szukaniu sposobów na poprawę wydajności wczytywania, sprawdź wszystkie sposoby na uzyskanie pomocy od społeczności DevTools:

• Zgłoś błędy w tym dokumencie w repozytorium developer.chrome.com.
• Zgłaszaj błędy w Narzędziach deweloperskich na stronie Błędy w Chromium.
• Dyskutuj o funkcjach i zmianach na liście mailingowej. Nie używaj listy mailingowej do zadawania pytań dotyczących pomocy. Zamiast tego skorzystaj z Stack Overflow.
• Ogólne informacje o używaniu Narzędzi deweloperskich znajdziesz na stronie Stack Overflow. Żeby zgłosić błędy, zawsze używaj narzędzia Błędy w Chromium.
• Napisz do nas na Twitterze: @ChromeDevTools.