Ten przewodnik ma pomóc użytkownikom, którzy korzystają głównie z technologii wspomagających, takich jak czytniki ekranu, w dostępie do Narzędzi deweloperskich w Chrome i ich używaniu. Narzędzia deweloperskie w Chrome to zestaw narzędzi dla programistów stron internetowych wbudowany w przeglądarkę Google Chrome. Jeśli szukasz funkcji DevTools związanych z poprawianiem ułatwień dostępu na stronie internetowej, zapoznaj się z Informacjami na temat ułatwień dostępu.
Ułatwienia dostępu w Narzędziach deweloperskich są w trakcie opracowywania. Niektóre panele i karty lepiej współpracują z technologiami wspomagającymi niż inne. W tym przewodniku znajdziesz informacje o panelach, które są najłatwiej dostępne, oraz o konkretnych problemach, które możesz napotkać.
Omówienie
Zanim zaczniesz, warto zapoznać się z modelem interfejsu DevTools. Narzędzie dla deweloperów jest podzielone na serię paneli, które są uporządkowane według ARIA tablist. Na przykład:
- W panelu Elementy możesz wyświetlać i zmieniać węzły DOM lub CSS.
- W panelu Konsoli możesz odczytywać logi JavaScriptu i edytować obiekty na żywo.
W obszarze treści każdego panelu znajduje się wiele różnych narzędzi, które w dokumentacji są często określane jako karty lub panele. Na przykład panel Elementy zawiera dodatkowe karty, które umożliwiają sprawdzanie odbiorników zdarzeń, drzewa ułatwień dostępu i wiele innych funkcji. Podział na karty i panele jest nieco umowny. Jedynym powodem, dla którego widzisz jeden lub drugi termin, jest zachowanie spójności z pozostałą oficjalną dokumentacją DevTools.
Skróty klawiszowe
Przewodnik po skrótach klawiszowych w Narzędziach deweloperskich to przydatna lista. Pamiętaj, aby dodać tę stronę do zakładek i do niej wracać, gdy będziesz odkrywać kolejne panele.
Otwieranie Narzędzi deweloperskich
Aby rozpocząć, przeczytaj artykuł Otwieranie Narzędzi deweloperskich w Chrome. Narzędzia deweloperskie można otworzyć na kilka sposobów: za pomocą skrótów klawiszowych lub elementów menu.
Przechodzenie między panelami
Poruszanie się za pomocą klawiatury
- Gdy Narzędzia dla programistów są otwarte, naciśnij Control + ] lub Command + ] (Mac), aby ustawić fokus na następnym panelu.
- Naciśnij Control + [ lub Command + [ (Mac), aby ustawić zaznaczenie na poprzednim panelu.
- Możesz też użyć skrótu Shift + Tab, aby przenieść fokus do
tablistw panelu, i użyć klawiszy strzałek, aby przełączać panele. Szybciej może jednak okazać się użycie wspomnianych wcześniej skrótów.
Znane problemy
- Niektóre panele, np. Konsola i Skuteczność, mogą przenieść fokus na obszar treści, gdy tylko zostaną aktywowane. Może to utrudniać poruszanie się za pomocą klawiszy strzałek.
- Wybrany panel jest odczytywany, ale dopiero po odczytaniu treści w panelu. Może to ułatwić ich przeoczenie.
Nawigowanie za pomocą menu poleceń
Aby skupić się na konkretnym panelu, użyj menu poleceń:
- Gdy otwarte są Narzędzia dla programistów, naciśnij Control + Shift + P lub Command + Shift + P (Mac), aby otworzyć menu polecenia. Menu poleceń to pole wyboru z autouzupełnianiem wyszukiwania nieprecyzyjnego.
- Wpisz nazwę panelu, który chcesz otworzyć, a następnie za pomocą strzałki w dół przejdź do odpowiedniej opcji.
- Aby uruchomić polecenie, naciśnij Enter.
Aby na przykład otworzyć panel Elementy:
- Otwórz Menu poleceń.
- Wpisz E, a następnie L. Wybrano opcję Panel > Pokaż elementy.
- Naciśnij Enter, aby uruchomić polecenie, które otwiera panel.
Otwarcie panelu w ten sposób spowoduje skupienie się na jego zawartości. W przypadku panelu Elementy punkt skupienia przenosi się do drzewa DOM.
Panel Elementy
Sprawdzanie elementu na stronie
- Przejdź do elementu, który chcesz sprawdzić, za pomocą kursora czytnika ekranu.
- Symuluj kliknięcie elementu prawym przyciskiem myszy, aby otworzyć menu kontekstowe.
- Wybierz opcję Zbadaj. Spowoduje to otwarcie panelu Elementy i skupienie się na elemencie w drzewie DOM.
Drzewo DOM jest sformatowane jako ARIA tree. Przykłady znajdziesz w artykule Przechodzenie po drzewie DOM za pomocą klawiatury.
Kopiowanie kodu elementu w drzewie DOM
- Po wybraniu węzła w drzewie DOM kliknij prawym przyciskiem myszy, aby otworzyć menu kontekstowe.
- Rozwiń opcję Kopiuj.
- Kliknij Kopiuj outerHTML.
Znane problemy
- Polecenie Copy outerHTML często nie wybiera bieżącego węzła, lecz jego węzeł nadrzędny. Treści elementu powinny jednak nadal znajdować się w skopiowanym kodzie zewnętrznym HTML.
Modyfikowanie atrybutów elementu w drzewie DOM
- Gdy fokus znajduje się na węźle w drzewie DOM, naciśnij Enter, aby umożliwić edycję.
- Aby przełączać się między wartościami atrybutów, naciskaj Tab. Gdy usłyszysz „spacja”, oznacza to, że znajdujesz się w polu tekstowym z pustym tekstem i możesz wpisać nową wartość atrybutu.
- Naciśnij Control + Enter lub Command + Enter (Mac), aby zaakceptować zmianę i odsłuchać cały element.
Znane problemy
- Gdy wpisujesz tekst, nie otrzymujesz żadnej informacji zwrotnej. Jeśli popełnisz błąd podczas pisania i użyjesz klawiszy strzałek, aby sprawdzić wpis, też nie otrzymasz informacji zwrotnej. Najprostszym sposobem sprawdzenia efektów jest zaakceptowanie zmiany, a następnie odsłuchanie całego elementu.
Edytowanie kodu HTML elementu w drzewie DOM
- Gdy fokus znajduje się na węźle w drzewie DOM, naciśnij Enter, aby umożliwić edycję.
- Aby przełączać się między wartościami atrybutów, naciskaj Tab. Gdy usłyszysz nazwę elementu, na przykład „h2”, oznacza to, że znajdujesz się w polu tekstowym i możesz zmienić typ elementu.
- Aby zaakceptować zmiany, naciśnij Control + Enter lub Command + Enter (Mac).
Na przykład wpisanie h3 i naciśnięcie Control + Enter lub Command + Enter (na Macu) spowoduje zmianę tagów początkowego i końcowego elementu na h3.
Karty panelu Elementy
Panel Elementy zawiera dodatkowe karty, na których możesz sprawdzić np. styl CSS zastosowany do elementu lub jego miejsce w drzewie ułatwień dostępu.
- Gdy fokus znajduje się na węźle w drzewie DOM, naciskaj Tab, aż usłyszysz, że wybrana została karta Style.
- Za pomocą strzałki w prawo możesz przeglądać inne dostępne karty.
Drzewo DOM zamienia elementy z atrybutami href w linki, które można zaznaczyć, więc aby otworzyć panel Stylów, może być konieczne więcej niż jedno naciśnięcie klawisza Tab.
Znane problemy
Karty Punkty przerwania DOM i Właściwości nie są dostępne za pomocą klawiatury.
Panel Style
W panelu Style znajdziesz elementy sterujące do filtrowania stylów, przełączania stanów elementów (takich jak :active i :focus), przełączania klas i dodawania nowych klas. Dostępne jest też zaawansowane narzędzie do sprawdzania stylów, które umożliwia przeglądanie i modyfikowanie stylów zastosowanych w elementach zaznaczonych w drzewie DOM.
Ważną kwestią dotyczącą panelu Style jest to, że wyświetla on tylko style dla aktualnie wybranego węzła w drzewie DOM. Załóżmy na przykład, że skończysz sprawdzać style węzła <header> i chcesz teraz sprawdzić style węzła <footer>. Aby to zrobić, musisz najpierw wybrać węzeł <footer> w drzewie DOM. Możesz szybciej skorzystać z procesu Sprawdzanie, aby sprawdzić węzeł znajdujący się w pobliżu węzła footer (np. link w stopce), który skupia drzewo DOM, a potem za pomocą klawiatury przejść do interesującego Cię węzła.
Poruszanie się po panelu Style
Wszystkie narzędzia do stylizacji są w jakiś sposób powiązane z panelem Stylizacja, dlatego warto najpierw nauczyć się obsługi tego narzędzia.
- Gdy zaznaczona jest karta Style, naciśnij Tab, aby przenieść zaznaczenie na zawartość tej karty i ją przejrzeć.
- Naciskaj Tab, aż pierwszy styl stanie się aktywny. Jeśli używasz czytnika ekranu, ten pierwszy styl zostanie ogłoszony jako „element.style {}”.
- Naciśnij strzałkę w dół, aby poruszać się po liście stylów w kolejności od specyficzności. Czytnik ekranu ogłasza każdą stylizację, zaczynając od nazwy pliku CSS, numeru wiersza, w którym występuje stylizacja, oraz samej nazwy stylizacji. Przykład: „main.css:233 .card__img {}”.
- Aby wyświetlić więcej informacji o stylu, naciśnij Enter. Fokus zaczyna się od edytowalnej wersji nazwy stylu.
- Naciśnij Tab, aby przełączać się między edytowalnymi wersjami poszczególnych właściwości CSS i odpowiednich wartości. Na końcu każdego bloku stylów znajduje się puste edytowalne pole tekstowe, w którym możesz dodawać dodatkowe właściwości CSS.
- Możesz nadal naciskać klawisz Tab, aby przewijać listę stylów, lub nacisnąć klawisz Escape, aby wyjść z tego trybu i wrócić do nawigacji za pomocą klawiszy strzałek.
Aby poznać dodatkowe skróty, przeczytaj przewodnik po skrótach klawiszowych w panelu Styl.
Znane problemy
- Jeśli użyjesz pola tekstowego Filtr, nie będziesz już mieć możliwości poruszania się po liście stylów.
Przełączanie stanu elementu
Aby przełączyć stan elementu, np. :active lub :focus:
- Otwórz panel Style i naciśnij klawisz Tab, aż pojawi się przycisk Przełącz stan elementu.
- Aby rozwinąć kolekcję stanów elementu, naciśnij Enter. Stany elementów są prezentowane jako grupa pól wyboru.
- Naciskaj Tab, aż pierwszy stan (
:active) będzie aktywny. - Naciśnij spację, aby ją włączyć. Jeśli element zaznaczony w drzewie DOM ma styl
:active, zostanie on zastosowany. - Aby przejrzeć wszystkie dostępne stany, naciskaj klawisz Tab.
Dodawanie zajęć, które są już prowadzone
Obok przycisku Przełącz stan elementu znajduje się przycisk Klasy elementów. Aby przenieść na nią zaznaczenie, naciśnij Tab, a następnie Enter. Fokus przenosi się do pola tekstowego edycji o nazwie Dodaj nową klasę.
Przycisk Klasy elementów służy głównie do dodawania do elementu istniejących klas. Jeśli na przykład Twoja spersonalizowana szata graficzna zawiera klasę pomocniczą o nazwie .clearfix, możesz wcisnąć . w polu tekstowym edycji, aby wyświetlić listę sugestii klas, a następnie użyć strzałki w dół, aby znaleźć propozycję .clearfix. Możesz też wpisać nazwę zajęć i nacisnąć Enter, aby zastosować tę nazwę.
Dodawanie nowej reguły dotyczącej stylów
Obok przycisku Klasy elementów znajduje się przycisk Nowa reguła stylu. Aby przenieść na nią fokus, naciśnij Tab i następnie Enter. Fokus zostanie przeniesiony do pola tekstowego z możliwością edycji w inspektorze stylów. Początkowy tekst w polu to nazwa tagu elementu wybranego w drzewie DOM. W tym polu możesz wpisać dowolną nazwę klasy, a następnie nacisnąć Tab, aby przypisać do niej właściwości CSS.
Karta Wyniki
Gdy zaznaczenie znajduje się na karcie Obliczenia, naciśnij Tab, aby przenieść zaznaczenie na zawartość tej karty i ją przejrzeć. Na karcie Wynikowy znajdziesz elementy sterujące, które umożliwiają sprawdzenie, które właściwości CSS są faktycznie stosowane do elementu w kolejności od najbardziej do najmniej specyficznego.
Wyświetlanie wszystkich stylów obliczonych
Naciskaj Tab, aż dojdziesz do kolekcji obliczonych stylów. Są one wyświetlane jako ARIA tree. Po rozwinięciu listy możesz zobaczyć, które selektory CSS stosują obliczony styl. Te selektory są uporządkowane według specyfikiczności. Narzędzie do odczytu ekranu oznajmi użytkownikowi obliczoną wartość, selektor CSS, który jest obecnie dopasowywany, nazwę pliku arkusza stylów zawierającego selektor oraz numer wiersza selektora.
Znane problemy
- Jeśli użyjesz pola tekstowego Filtr, nie będziesz już mieć możliwości sprawdzania stylów.
Karta Detektory zdarzeń
W panelu Elementy możesz sprawdzić detektory zdarzeń zastosowane do elementu na karcie Detektory zdarzeń. Gdy masz zaznaczony panel Style, naciśnij strzałkę w prawo, aby przejść do karty Odbiorniki zdarzeń.
Poznawanie detektorów zdarzeń
Detektory zdarzeń są prezentowane jako ARIA tree. Do poruszania się po nich możesz używać klawiszy strzałek. Narzędzie do odczytu ekranu ogłasza nazwę obiektu DOM, do którego jest dołączony obiekt odbiorczy zdarzenia, a także nazwę pliku, w którym jest zdefiniowany obiekt odbiorczy zdarzenia, oraz jego numer wiersza.
Panel ułatwień dostępu
Gdy zaznaczona jest karta Ułatwienia dostępu, naciśnij Tab, aby przenieść zaznaczenie na kartę i przeglądać jej zawartość. W panelu Ułatwienia dostępu znajdują się elementy sterujące służące do przeglądania drzewa ułatwień dostępu, atrybutów ARIA zastosowanych do elementu oraz obliczonych właściwości ułatwień dostępu.
Drzewo ułatwień dostępu
Drzewo ułatwień dostępu jest przedstawiane jako ARIA tree, gdzie każdy element treeitem odpowiada elementowi w DOM. Drzewo podaje obliczoną rolę wybranego węzła. Elementy ogólne, takie jak div i span, są ogłaszane w drzewie jako „GenericContainer”. Użyj klawiszy strzałek, aby poruszać się po drzewie i sprawdzać relacje nadrzędny–podrzędny.
Znane problemy
- Typ drzewa ARIA używany przez panel Ułatwienia dostępu może nie być prawidłowo wyświetlany w Chrome na czytnikach ekranu na Macu, takich jak VoiceOver. Zasubskrybuj problem Chromium o numerze 868480, aby otrzymywać informacje o postępach w rozwiązaniu tego problemu.
- Sekcje Atrybuty ARIA i Właściwości obliczone są oznaczone jako drzewa ARIA, ale obecnie nie mają zarządzania fokusem, więc nie można ich obsługiwać za pomocą klawiatury.
Panel audytów
W panelu Audyt możesz przeprowadzać serię testów witryny, aby sprawdzić, czy nie występują w niej typowe problemy związane z wydajnością, dostępnością, SEO i kilkoma innymi kategoriami.
Konfigurowanie i przeprowadzanie kontroli
- Po pierwszym otwarciu panelu Sprawdzanie fokus jest ustawiony na przycisku Uruchom sprawdzenie na końcu formularza. Domyślnie formularz jest skonfigurowany tak, aby przeprowadzać kontrole w przypadku każdej kategorii za pomocą emulacji urządzeń mobilnych na symulowanym połączeniu 3G.
- Aby zmienić ustawienia audytu, naciśnij Shift + Tab lub wróć do trybu przeglądania.
- Gdy wszystko będzie gotowe do przeprowadzenia audytu, wróć do przycisku Przeprowadź audyt i naciśnij Enter.
- Zaznanie przenosi się do okna modalnego z przyciskiem Anuluj, który umożliwia wyjście z audytu. Podczas przeprowadzania kontroli i odświeżania strony kilka razy możesz usłyszeć serię dźwięków.
Znane problemy
- Różne sekcje formularza konfiguracji nie są obecnie oznaczone elementem
fieldset. Może być łatwiej poruszać się po nich w trybie przeglądania, aby dowiedzieć się, które elementy sterujące są powiązane z każdą sekcją. - Po zakończeniu kontroli nie jest odtwarzany żaden dźwięk ani komunikat. Zwykle zajmuje to około 30 sekund. Po tym czasie powinieneś/powinnaś mieć możliwość przejścia do wyników. Najłatwiejszym sposobem na uzyskanie wyników może być użycie trybu przeglądania.
Przechodzenie po raporcie kontrolnym
Raport kontrolny jest podzielony na sekcje odpowiadające poszczególnym kategoriom kontroli. Raport otwiera się z listą wyników dla każdej kategorii. Te wyniki to też linki, które umożliwiają przejście do odpowiednich sekcji. W każdej sekcji znajdują się elementy details, które można rozwinąć. Zawierają one informacje o zaliczonych lub niezaliczonych kontrolach. Domyślnie wyświetlane są tylko nieudane audyty.
Każda sekcja kończy się ostatnim elementem details, który zawiera wszystkie przeprowadzone kontrole.
Aby uruchomić nową kontrolę, naciśnij Shift + Tab, aby zamknąć raport, i znajdź przycisk Przeprowadź kontrolę.