Chrome DevTools to jeden z głównych powodów, dla których programiści odmawiają dotykania jakiejkolwiek innej przeglądarki.
Ale większość z nas korzysta tylko z kilku funkcji, pozostając nieświadomymi wielu innych niesamowitych funkcji, które są udostępniane po cichu.
Odkryjmy niektóre z tych ukrytych klejnotów!
Każdy ma swój ulubiony system operacyjny, platformę sprzętową, typ urządzenia, rozmiar urządzenia itp. Ale jedno jest wspólne dla wszystkich — używają przeglądarki Chrome i tylko przeglądarki Chrome! Myślę, że można bezpiecznie powiedzieć, że wojny przeglądarek się skończyły, a Chrome wygrał przekonująco.
Użytkownicy systemu Windows używają domyślnej przeglądarki tylko do pobierania Chrome, a następnie używają Chrome, ignorując wszystkie „zalecenia” systemu Windows. To samo dotyczy urządzeń Apple (zwłaszcza MacBooków i urządzeń z większymi ekranami), na których użytkownicy i programiści unikają Safari, pomimo wielu mocnych twierdzeń i taktyk konwersji Apple.
A jeśli na urządzeniu nie działa Chrome, istnieje duże prawdopodobieństwo, że działa na nim spinoff zgodny z Chrome, taki jak Odważny lub Vivaldiego. Tak, wiem, technicznie rzecz biorąc, te przeglądarki nie są oparte na Chrome, ale to już inna dyskusja. Przeciętny użytkownik może używać tych innych przeglądarek z powodów ideologicznych lub specjalnych, ale jeśli chodzi o programistów, nie ma innej przeglądarki niż Chrome.
Nawet fakt, że jest to potwór pożerający pamięć, zostaje zignorowany. Powód jest prosty: Chrome DevTools.
Źródło obrazu: oficjalna dokumentacja Chrome DevTools
Teraz, jeśli czytasz ten artykuł, możesz bezpiecznie założyć, że jesteś zaawansowanym użytkownikiem, majsterkowiczem, programistą stron internetowych lub kimś podobnym. W związku z tym nikt z nas nie potrzebuje wprowadzenia do DevTools, jak go otworzyć, jego różnych funkcji itp.
Zamiast tego, nie marnując czasu, przejdźmy od razu do mniej znanych, ale niezwykle przydatnych funkcji Chrome DevTools.
Spis treści:
Tryb projektowania
Jedną z rutynowych czynności programistów jest sprawdzanie elementu na stronie, a następnie modyfikowanie jego kodu HTML w celu wyświetlenia podglądu lub przetestowania efektu zmiany.
Jednak praca z HTML bezpośrednio w DevTools nie należy do najłatwiejszych — przedzieranie się przez zupę tagów, wytężanie wzroku w poszukiwaniu odpowiedniego nawiasu otwierającego/zamykającego i radzenie sobie z niedorzeczną ilością białych znaków podczas edytowania tekstu (białe znaki, które wyraźnie brakuje w dokumencie, który widzisz), to niektóre z problemów, z którymi możesz się uporać. Jeszcze gorzej, jeśli jesteś projektantem i nie chcesz przekopywać się przez bałagan.
Oto zrzut ekranu z jednej ze stron tego właśnie serwisu (newsblog.pl):
Głęboko zagnieżdżony HTML i tajemnicze, zagmatwane klasy CSS są dziś typowe dla każdej nietrywialnej strony internetowej, w której doświadczenie z DevTools jest co najmniej nieoptymalne. 🤭
Ale istnieje funkcja DevTools o nazwie Tryb projektowania, która w wielu przypadkach może zmniejszyć ból. Korzystając z trybu projektowania (nawiasem mówiąc, nie jest to oficjalna nazwa; ludzie tak go nazwali ze względu na to, jak się aktywuje i co robi — nie martw się, zobaczymy już wkrótce!), strona może być wykonana wizualnie i na żywo, podobnie jak edycja arkusza kalkulacyjnego lub edytora tekstu! Jedynym haczykiem jest to, że ta funkcja nie jest domyślnie włączona, a aktywacja jej jest trochę kłopotliwa, szczególnie dla osób niebędących programistami.
W każdym razie jest to dość proste; wszystko, co musisz zrobić, to postępować zgodnie z poniższymi instrukcjami. W zależności od tego, gdzie siedzisz na krzywej wyrafinowania użytkownika, może to być śmiesznie łatwe lub umiarkowanie trudne. Oto, co należy zrobić:
- Upewnij się, że strona internetowa, którą chcesz edytować, jest załadowana i aktualnie na nią patrzysz (to znaczy, że dana karta jest aktywna).
- Otwórz panel DevTools w zwykły sposób (skrót klawiaturowy, kliknięcia myszą, cokolwiek). Lubię używać skrótów klawiaturowych, a na Macu Opt + Cmd + I wykonują zadanie.
- Teraz, gdy DevTools jest otwarty, przejdź do zakładki o nazwie „Konsola”. Niektórzy z was mogą przewracać oczami, widząc, jak głupie i oczywiste to wszystko wydaje się, ale hej, pomyślmy też o (setkach?) tysiącach ludzi, którzy mają problemy podczas pracy z konsolą przeglądarki i JavaScriptem (z jakiegokolwiek powodu ).
- Kliknij pierwszą linię obok kursora, która wyświetli monit o wpisanie, a teraz możesz tam napisać kod JavaScript (patrz zrzut ekranu nieco dalej).
- Teraz musimy napisać kod JavaScript. Nie martw się, ponieważ to, co musisz napisać/wpisać, jest bardzo krótkie i proste: document.designMode = „on”. Możesz także skopiować i wkleić kod z tej strony (jeśli to zrobisz, upewnij się, że formatowanie nie zostanie skopiowane — potrzebujemy tylko zwykłego tekstu) lub, jeśli czujesz się pewnie, wpisz go.
- Naciśnij Enter/Return.
„Otóż to??!”
Tak, to wszystko!
Teraz możesz swobodnie edytować stronę tak, jakby to był dokument. Obejrzyj ten przykładowy film, w którym edytuję na żywo witrynę Spotify w trybie projektowania:
Funkcja trybu projektowania, choć ekscytująca, nie jest srebrną kulą; nie możesz na przykład łatwo kopiować i wklejać przycisków, zmieniać ich wyglądu i tak dalej. Rzeczywista liczba rzeczy, które może zrobić w porównaniu z wymarzonym wizualnym edytorem stron internetowych, jest bardzo niska; rozwiązuje jednak przypadki użycia, w których zawartość musi być zmieniana wizualnie i na bieżąco.
To powiedziawszy, twierdzenie, że ludzie z Chrome testują, jak dobrze ta funkcja jest odbierana, nie jest zbyt naciągane; jeśli znajdzie dobry odbiór i silny przypadek użycia, można się spodziewać, że wkrótce pojawią się potężniejsze możliwości edycji! 🤞🏻🤞🏻
Symulacja warunków sieciowych
Karta Sieć w Chrome DevTools jest prawdopodobnie najczęściej używana (oczywiście nie mam danych na jej temat, ale jako programista stron internetowych używam karty Konsola może przez 20-30% czasu, a karta Sieć przez resztę czasu). Daje nam wszelkiego rodzaju informacje o żądaniach wysyłanych ze strony, ich typie, metadanych/nagłówkach, statusie, postępie pobierania zasobów (obrazów, arkuszy stylów itp.), czasie ładowania i tak dalej. Przy tak niesamowitej użyteczności nic dziwnego, że karta Sieć jest najpopularniejsza.
A jednak łatwo przegapić omawianą funkcję; być może nie zauważyłeś nieszkodliwej listy rozwijanej, która zawiera oczywiste informacje: Online.
Jeśli to klikniesz, zobaczysz listę rozwijaną z różnymi opcjami, które pozwolą Ci ograniczyć prędkość sieci: Szybkie 3G, Wolne 3G, Offline itp. Chociaż mogą istnieć różne przypadki użycia tej opcji, najczęściej jest to testowanie strony internetowej wydajność w wolnych sieciach lub zachowanie aplikacji internetowych w trybie offline (zakładając, że takie możliwości zostały dodane).
Weźmy to na klatę. Ustawię sieć na „Slow 3G” i ponownie załaduję tę samą stronę z poprzedniego zrzutu ekranu. Zanim to zrobię, zauważ na wcześniejszym zrzucie ekranu, jak przy moim obecnym połączeniu sieciowym (szerokopasmowe łącze 40 Mb/s) większość zasobów jest pobierana w mniej niż 100 milisekund.
A teraz czas zobaczyć, co robi z tym wolne 3G.
Co za różnica!
Zauważ, że czas ładowania zasobów mieści się teraz w przedziale 5-10 sekund. Ponadto witryna zakończyła pełne ładowanie w 17,25 sekundy! Tak, wiem, co myślisz, ale musisz wziąć pod uwagę, że w wolnej sieci 3G każda nowoczesna strona internetowa ładuje się przez kilka sekund. To, czy chcesz szybkiego ładowania w wolnych sieciach, to inna sprawa, ale w sumie musi to być decyzja biznesowa, w której zyski uzasadniają wysiłek.
Na powyższym zrzucie ekranu zwróć uwagę na ikonę ostrzeżenia na karcie Sieć. W ten sposób Chrome przypomina ci, że dokonałeś jakiejś trwałej zmiany innej niż domyślna i jeśli nie wiesz, co robisz, być może powinieneś ją zresetować.
Interaktywny próbnik kolorów
Sprawdzanie elementów DOM w DevTools to coś, co wszyscy robimy prawie codziennie. Jesteśmy również przyzwyczajeni do pokazanej obok sekcji szczegółów CSS i wiemy, że możemy ją edytować i natychmiast zobaczyć wyniki.
Wśród wszystkich tych drobnych udogodnień jest to, że jeśli klikniesz właściwość koloru CSS, pojawi się znajomy interfejs próbnika kolorów!
Zauważ, że nie jest to prosty, podstawowy próbnik kolorów. Pozwala kontrolować przezroczystość, zmieniać używane systemy kolorów, wybierać kolor bezpośrednio ze strony i wiele więcej.
Tak więc następnym razem, gdy będziesz eksperymentować na przykład z kolorami akcentującymi witrynę, nie musisz zastanawiać się ani zgadywać właściwej wartości odcienia, który masz na myśli! W rzeczywistości wiele osób lubi projektować strony internetowe bezpośrednio w przeglądarce; dla nich takie funkcje są darem niebios! 🙂
Monitorowanie zdarzeń na elementach strony
Często znajdujemy się w sytuacji, w której chcielibyśmy wiedzieć, co się dzieje z tym konkretnym elementem, który nas interesuje. Jest to szczególnie prawdziwe, gdy używamy jQuery w nietrywialnej bazie kodu — czy to twojej, czy innej; procedury obsługi zdarzeń i logika są rozproszone po całym miejscu, a wyśledzenie błędu może być koszmarem.
Na szczęście Chrome DevTools ma fajną funkcję właśnie do tego. Będzie obserwował dla Ciebie wskazany element i logował zdarzenia do konsoli. Ale jest trochę rozczarowania: ta funkcja nie ma możliwości wyboru elementów na podstawie nazw klas CSS. Tak więc sposób $(“#email”) jQuery nie jest dostępny. 🙂
Powiedziawszy to, zobaczmy, jak to zrobić. Zaczynamy od wykonania prostego „sprawdzenia elementu” za pomocą inspektora DevTools. Tak, to dokładnie to samo narzędzie kontrolne, którego używamy na co dzień.
Na poniższym zrzucie ekranu użyłem narzędzia inspektora, aby podświetlić wprowadzany tekst. Przez „wyróżnienie” nie rozumiem, że element na stronie jest podświetlony (nie jest, jak widać); raczej kursor inspektora został kliknięty na wprowadzanym tekście, a odpowiedni kod HTML w DevTools jest podświetlony.
W ten sposób kierowany jest aktualnie kontrolowany element do monitorowania zdarzeń, co sprawia, że element jest dostępny jako specjalna zmienna JavaScript o nazwie $0. Następnie, upewniając się, że nie kliknę niedbale w innym miejscu okna przeglądarki (zwłaszcza w części kodu HTML), klikam w Konsolę i dołączam detektor zdarzeń dla tego wprowadzania tekstu. W tym celu potrzebuję tylko jednego wiersza kodu: monitorEvents($0, 'mysz’). Część „mysz” mówi Chrome, że interesuje mnie tylko obserwowanie zdarzeń związanych z myszą.
Jak tylko nacisnę Enter/Return, monitorowanie jest aktywowane, a jeśli teraz najadę kursorem lub kliknę wprowadzany tekst, zdarzenia te zostaną zarejestrowane w konsoli jako obiekty JavaScript:
Jak widać na zrzucie ekranu, kilka typów zdarzeń myszy zostało przechwyconych, gdy kliknąłem element, wpisałem swoje imię, a następnie odsunąłem mysz (zdarzenia pisania, będące zdarzeniami klawiatury, nie zostały zarejestrowane). Zdarzenia same w sobie są obiektami JavaScript, co widać na zrzucie ekranu; każdy obiekt zdarzenia zawiera ogromną ilość informacji. Na przykład rozszerzyłem obiekt zdarzenia „kliknij”, a liczba właściwości nie zmieściła się na jednym zrzucie ekranu!
Gorąco zachęcam do wypróbowania tej funkcji od razu, ponieważ z pewnością zaoszczędzi Ci to wielu bólów głowy w nadchodzących projektach!
Raporty wydajności witryny
W dzisiejszych czasach wydajność witryny internetowej tworzy lub psuje firmę/stronę internetową. Nawet niewielki wzrost wydajności przekłada się na ogromne zyski SEO, a także zadowolenie użytkowników. Ale skąd wiesz, które części Twojej witryny wymagają uwagi, a które są już dobre?
Potrzebujesz zatrudnić zespół ekspertów i cierpliwie czekać kilka dni?
Cóż, są przypadki, w których trzeba to zrobić, ale na szczęście Chrome DevTools obejmuje resztę z nas. W najnowszych wersjach Chrome (koniec 2020 r.) znajdziesz kartę Lighthouse w DevTools. Kilka miesięcy temu nazywało się to Audits i dość mylące, taką nazwę można znaleźć w oficjalnych dokumentach w chwili pisania. W każdym razie chodzi o to, że Lighthouse był kiedyś modną witryną do bezpłatnego sprawdzania wydajności witryny, ale potem Google ją usunął (nie podano powodu). Na szczęście ta sama potężna funkcjonalność pojawiła się później w DevTools.
Aby wygenerować raport wydajności, wystarczy nacisnąć jeden przycisk po załadowaniu interesującej Cię strony:
Jak widać po prawej stronie na zrzucie ekranu, istnieje kilka opcji kontrolowania ilości potrzebnych informacji (i oczywiście tego, co chcesz przetestować). Gdy będziesz zadowolony z ustawień, naciśnij ten duży niebieski przycisk, usiądź wygodnie i zrelaksuj się. Kilka sekund później otrzymasz korzystny raport, który będzie wyglądał mniej więcej tak:
Liczby widoczne na powyższym zrzucie ekranu pokazują ogólny wynik dla każdej kategorii. Kategoria Progressive Web Apps (PWA) jest wyszarzona, prawdopodobnie dlatego, że ta witryna nie obsługuje PWA. Ponadto, jak widać po rozmiarze paska przewijania na zrzucie ekranu (po prawej), jest to długi raport.
Oto jak wygląda część sekcji dotyczącej wydajności:
Nie twierdzę, że Lighthouse i jego sugestie są świętym Graalem wydajności strony internetowej, ale są one niezwykle pomocne; Dzieje się tak dlatego, że właściciele witryn i programiści rzadko mają pojęcie o tym, jakie problemy istnieją i jak dokładnie je rozwiązać.
Szczerze mówiąc, nawet ja czuję się zagubiony jako programista stron internetowych, ponieważ wydajność i testowanie są swego rodzaju specjalizacjami. W związku z tym Lighthouse jest mało znanym, niedocenianym narzędziem, obecnie częścią Chrome DevTools, które jest niezwykle przydatne zarówno dla właścicieli firm, jak i programistów/administratorów systemu.
Umiejętność edycji kodu
Karta Źródła w DevTools umożliwia nam dostęp do różnych plików ładowanych przez witrynę. Ma również możliwości, takie jak edycja kodu, zapisywanie fragmentów itp. To nie powinno dziwić twórców stron internetowych. Jednak DevTools ma również kilka wbudowanych udogodnień, które ułatwiają życie programistom przyzwyczajonym do ich ulubionych środowisk IDE.
DevTools wykorzystuje dobrze znane skróty klawiaturowe, które pozwolą Ci zaoszczędzić czas i zminimalizować frustrację związaną z kodowaniem. Na przykład Ctrl + D (lub Cmd + D na Macu) może służyć do podświetlania wielu wystąpień słowa. Podobnie przytrzymanie Ctrl (lub Cmd na Macu) i kliknięcie w wielu miejscach w kodzie daje wiele kursorów. Spójrz na poniższy film, aby uzyskać lepszy pomysł:
Jeśli uważasz, że to fajne, zajrzyj do oficjalnych dokumentów, aby skorzystać ze wszystkich funkcji edycji kodu oferowanych przez DevTools.
Kontroluj stan elementu DOM
Czasami coś testujemy lub debugujemy, ale zachowanie, za którym podążamy, jest dostępne tylko w określonym stanie elementu. W zależności od tego, jaki to jest stan, możesz skończyć okropnie; dla mnie jest to stan „najechania”, ponieważ pamiętam, jak marnowałem niezliczone minuty, próbując zmierzyć czas akcji najechania lub halsowania dodatkowego, tymczasowego CSS itp.
Na szczęście Chrome DevTools ma łatwy sposób na zmianę stanu kontrolowanego elementu. Co więcej, opcja ta jest dostępna po kliknięciu elementu prawym przyciskiem myszy (na karcie Elementy), ale biorąc pod uwagę liczbę funkcji i presję dnia pracy, łatwo to przeoczyć:
Tak, to naprawdę takie proste!
Teraz nie musisz umieszczać w swoim kodzie logiki testowania warunkowego, pisać dodatkowego kodu CSS ani przeskakiwać przez inne przeszkody, obserwując element w innym stanie.
Panel narzędzi
Ostatnim, ale zdecydowanie nie mniej ważnym elementem na tej liście jest panel Narzędzia. To kolejna z tych niezwykle przydatnych funkcji, które są dobrze ukryte i można je zobaczyć tylko za pomocą skrótów klawiaturowych. Jak sama nazwa wskazuje, panel Narzędzia nie jest pojedynczym narzędziem, ale rodzajem pulpitu nawigacyjnego, w którym dostępne są prawie wszystkie funkcje DevTool. Ponieważ istnieje zbyt wiele funkcji oferujących ogólną funkcjonalność DevTools, pasek wyszukiwania jest dostępny u góry.
Aby aktywować panel Narzędzia, upewnij się, że jesteś w panelu DevTools, a następnie naciśnij Ctrl + Shift + P (lub Cmd + Shift + P dla użytkowników komputerów Mac):
Panel Narzędzia jest pełen możliwości i niespodzianek. Na przykład, czy wiesz, że możesz zrobić zrzut ekranu bezpośrednio z DevTools?
Założę się, że nie, ponieważ musiałbyś uruchomić panel Narzędzia i wpisać „zrzut ekranu” w pasku wyszukiwania, aby odkryć, że:
Zauważysz również kilka opcji robienia zrzutów ekranu, w tym jedną dla wybranego węzła DOM! Zapoznaj się dokładniej z panelem Narzędzia, a zapewniam, że się nie zawiedziesz!
Jeśli chcesz zdalnie zrobić zrzut ekranu dowolnej strony internetowej, wypróbuj narzędzie newsblog.pl Screenshot.
Wniosek
Sama przeglądarka Chrome jest bogata w funkcje, ale tam, gdzie naprawdę błyszczy, jest oferta DevTools. Jak widzieliśmy w tym artykule, istnieje całkiem sporo dobrze ukrytych funkcji — a także inne ukrywające się na widoku — o których zdecydowana większość użytkowników nie wie. Dlaczego te funkcje są ukryte?
Domyślam się, że niektóre z nich są bardzo eksperymentalne (takie jak tryb projektowania), a programiści Chrome chcą utrudnić zwykłym użytkownikom znalezienie tych funkcji. W przypadku pozostałych wielu funkcji uważam, że jest to po prostu przypadek przeciążenia informacjami: jeśli istnieje, powiedzmy, 120 funkcji, z których niektóre mają podfunkcje itd., zaprojektowanie odpowiedniego interfejsu użytkownika dla takich scenariusz. Poza tym Google historycznie nie wykonywał świetnej roboty z UX swoich produktów, więc jest to. 🤷🏻♂️
Niezależnie od tego, mam nadzieję, że niektóre z tych funkcji okazały się przydatne. Ale co ważniejsze, mam nadzieję, że ten artykuł dał ci poczucie tego, co się ukrywa, gdzie następnym razem będziesz chciał zbadać lub poszukać czegoś konkretnego, wiesz, gdzie się udać, aby „kopać głęboko”. 😆