Google Chrome DevTools dla innych niż programistów

Google Chrome jest jedną z najczęściej używanych przeglądarek, z prawie 65% użytkowników na całym świecie. Jest ku temu dobry powód, działa dobrze, obsługuje mnóstwo funkcji internetowych, integruje się natywnie ze wszystkim, co oferuje Google, i jest łatwy w użyciu.

Ale to nie tylko strona użytkownika. Jest również bardzo dobrze zbudowany dla programistów. Firefox to kolejna świetna przeglądarka, która zapewnia doskonałe wrażenia deweloperskie, chociaż jej baza użytkowników jest stosunkowo niewielka. Z tego powodu skupiamy się na Chrome i jego narzędziach dla programistów, ale na szczęście interfejs użytkownika w większości przeglądarek pozostaje bardzo podobny, więc wskazówki tutaj zostaną dobrze przetłumaczone na Firefox, Safari, Edge i inne przeglądarki.

Co to jest Chrome DevTools?

Chrome DevTools to zestaw narzędzi dla programistów internetowych wbudowanych bezpośrednio w przeglądarkę Google Chrome. DevTools mogą pomóc Ci edytować strony w locie i szybko diagnozować problemy, co ostatecznie pomaga w szybszym tworzeniu lepszych witryn.
Strona główna dokumentacji Chrome DevTools

DevTools są tym, czego większość programistów front-end (i często back-end) używa do sprawdzania działania strony internetowej, tagów HTML, które ją definiują i stylów, które są stosowane w najbardziej podstawowej formie. Zapewnia mnóstwo innych super pomocnych funkcji, które przyjrzymy się, o ile działają w ogólnym przypadku użycia również dla osób niebędących programistami.

Narzędzia programistyczne to to, co widać na powyższym zrzucie ekranu, z kodem po lewej stronie i różnymi właściwościami po prawej. To jest domyślny widok, który zobaczysz, naciskając Command + Option + C (Mac) lub Control + Shift + C (Windows, Linux, Chrome OS).

DevTools oferuje wiele możliwości, ale najbardziej godne uwagi to:

• Wygenerowana struktura dokumentu (HTML) po załadowaniu strony i podczas ładowania.
• Jaki CSS ma zastosowanie do określonych elementów HTML, a także co jest dziedziczone po elementach nadrzędnych.
  Zobacz rozmiar widocznego obszaru, rozmiary elementów, wypełnienia, marginesy, obramowania i nie tylko.
• Możliwość modyfikowania wszystkiego na stronie oprócz uruchomionych skryptów.
• Nie ma możliwości wprowadzania zmian w kodzie, które są zapisywane po odświeżeniu strony (chociaż domyślnie nie jest to możliwe)
• Wszystkie zmiany są po stronie klienta - co oznacza, że ​​cokolwiek zmienisz, zobaczysz je tylko do momentu odświeżenia strony.
• Gotowy do testowania bez pamięci podręcznych iz symulowaną wolniejszą prędkością sieci.
• Narzędzia do mierzenia wydajności i oceniania wydajności strony, a także dostarczają wskazówek, jak rozwiązać ten problem.
• Pokaż konsolę strony i jej błędy, ostrzeżenia i komunikaty, a także sposób wykonania tam kodu javascript.

To bardzo krótka lista, ale obejmuje niektóre z bardziej znaczących funkcji, głównie to, co omówimy.

Powiązane : Jak utworzyć pierwsze rozszerzenie do Chrome

Dlaczego potrzebujesz narzędzi dla programistów, jakie są przypadki użycia?

Dla programistów to oczywiste, ale co z osobami, które nie są programistami? Cóż, jest kilka fajnych sztuczek i wskazówek, które przybliżą Cię do statusu użytkownika zaawansowanego. Właściciele witryn często zauważają problemy w witrynie, zadają pytanie lub dwa, a czasami otrzymują fragment kodu do „wklejenia” w celu rozwiązania problemu. Jednym ze sposobów, w jaki programiści testują takie fragmenty, jest bezpośrednie zastosowanie ich w narzędziach programistycznych. Jest to również sposób na zapewnienie programistom dobrego podglądu tego, jak chcesz, aby wyglądały.

Zastosuj kod CSS

Pierwszym i najczęstszym zastosowaniem DevTools jest modyfikowanie i stosowanie CSS. To CSS definiuje wygląd strony, to estetyka. Aby to zrobić, wystarczy wskazać element, który chcesz stylizować, kliknąć prawym przyciskiem myszy i wybrać opcję „Sprawdź”

To samo dotyczy większości innych przeglądarek, chociaż tekst pozycji menu może się nieznacznie różnić. Gdy to zrobisz, zobaczysz, że DevTools otwierają się i bezpośrednio wybierasz potrzebny element. Tam zobaczysz dwie główne części narzędzi deweloperskich. Strony HTML i CSS (lewa i prawa):

Poruszanie się po części HTML może być trochę trudne, ale nie martw się, DevTools podświetli elementy, gdy umieścisz je na lewym panelu. Gdy znajdziesz to, czego potrzebujesz, po prawej stronie możesz pisać style. Jest już kilka dodanych. Zmieńmy więc tło, aby przeczytać i zobaczyć, jak to wygląda:

Style na stronie zostaną zaktualizowane natychmiast po wpisaniu. Możesz tutaj napisać dowolny kod CSS i zostanie on zastosowany tak samo, jak style już na stronie. Jeśli naciśniesz pod koniec reguł (pod „szerokością”), rozpocznie się dodawanie nowych stylów. Możesz też napisać je u góry, gdzie jest napisane „element.style”. Następnie, jeśli chcesz udostępnić to swoim programistom, możesz po prostu wybrać kod i skopiować go i wkleić. Porada dla profesjonalistów, także skorzystaj z „selektora” stylów. To jest „.RNNXgb” na powyższym zrzucie ekranu. Dzięki temu programiści zostaną poinformowani, do którego elementu dodajesz style.

Powiązane : WordPress CSS: Podstawowy przewodnik dla początkujących

Wybierz kolor

Kolejną fajną rzeczą, którą możesz zrobić, jest dowiedzieć się, jaki dokładnie kolor jest używany, a także użyć próbnika kolorów bezpośrednio z narzędzi dla programistów, aby zobaczyć inne kolory. Wystarczy kliknąć kwadrat obok kodu koloru (tam, gdzie wskazuje strzałka powyżej), a otworzy się próbnik kolorów.

Znajdź używaną czcionkę

Programiści CSS definiują również używane czcionki, rozmiar czcionki, wysokość linii, kolor, grubość czcionki i inne właściwości związane z typografią. Wszystkie z nich byłyby pokazane po prawej stronie. Dopóki nie jest skrzyżowane, stosowany jest styl, który widzisz. Dowiedzmy się, jaka czcionka jest używana do wyszukiwania w formularzu Google. Kliknij prawym przyciskiem myszy, sprawdź i przewiń w dół, aż zobaczysz czcionkę lub po prostu wyszukaj w polu „Filtr” u góry prawej sekcji:

Jeśli zaktualizujesz czcionkę, zobaczysz, jak witryna będzie wyglądać z inną czcionką, na którą możesz chcieć się wkrótce przełączyć. Oczywiście programista będzie później musiał zmodyfikować kod i naprawić wszelkie problemy, które spowodowałaby zmiana czcionki, ale ta metoda działa świetnie do szybkiego testowania rzeczy bez ustawiania środowiska programistycznego.

Oto jak wyglądałaby strona główna Google z czcionką „Georgia”. Aby to osiągnąć, musieliśmy zaktualizować więcej niż jedną właściwość, ale dzięki dobrej architekturze CSS od programistów Google było to dość łatwe. W większości przypadków słabo napisana witryna wymaga zaktualizowania wielu właściwości, aby cała witryna została zaktualizowana.

Powiązane : Jak wybrać najlepsze czcionki do swojej witryny

Pamięć podręczna, przepustnica i prędkość

Co to jest pamięć podręczna? Mówiąc najprościej, zasób zapisywany na komputerze do wykorzystania w przyszłości. Zasobem może być JS, plik CSS lub obraz. Jeśli nie zmienia się za każdym razem, gdy otwierasz stronę, nie ma potrzeby pobierania jej za każdym razem, prawda? Więc przeglądarka po prostu pozostawi go na twoim komputerze przez jakiś czas.

Ale co się stanie, jeśli nastąpiła zmiana na serwerze, a konfiguracja nie wykorzystuje najlepszych praktyk w celu aktualizacji zasobów? Krótko mówiąc, nawet jeśli programiści zmienili kod źródłowy, nadal widzisz stare style. Cóż, możesz po prostu zatrzymać pamięć podręczną i wykonać „twarde odświeżanie”.

Otwórz narzędzia programistyczne i przejdź do karty „Sieć”. Następnie kliknij „wyłącz pamięć podręczną” i wykonaj „twarde odświeżanie”:

Teraz podczas przeglądania stron z otwartymi narzędziami deweloperskimi w przeglądarce nie będzie żadnych zasobów pamięci podręcznej. Strony będą ładować się wolniej, gdy zasoby będą ładowane za każdym razem, ale zobaczysz zmiany. Generalnie programiści domyślnie włączają opcję „Wyłącz pamięć podręczną” i wyłączają ją tylko podczas testowania rzeczywistych interakcji użytkownika, gdy ważne są czasy ładowania.

Na tej samej karcie po odświeżeniu zobaczysz również pomiary szybkości i wagi strony. Jak długo do wyzwolenia „Załaduj” (zdarzenie, gdy inne skrypty dołączają się, aby wykonać więcej pracy), ile plików jest żądanych (31 żądań powyżej, całkiem dobra ilość), ile zostało pobranych i tak dalej. To proste, im niższa, tym lepiej dla każdej wartości. Wszystko powyżej 100-150 żądań i zaczniesz widzieć duże problemy z szybkością.

DevTools zapewnia również symulację wolnego połączenia. Bardzo pomocna funkcja umożliwiająca sprawdzenie, jak witryna będzie działać w wolniejszej sieci, takiej jak 3G. Aby go włączyć, po prostu zmień wartość obok „Wyłącz pamięć podręczną” i naciśnij przycisk odświeżania. Po odświeżeniu zobaczysz każdy krok ładowania witryny. Przy wyłączonej pamięci podręcznej byłaby to pierwsza wizyta przy regularnym użytkowaniu.

Zobacz różnicę w szybkości, gdy wybierzemy „Wolne 3G” i odświeżymy w porównaniu z pierwszym przykładem, który wykorzystuje rzeczywistą prędkość połączenia. Tutaj możesz również przetestować „Offline” - jak działałaby strona bez połączenia z Internetem. Jeśli to brzmi dziwnie, to nieprawda, progresywne aplikacje internetowe pozwalają już witrynom działać nawet bez połączenia z Internetem, jeśli odwiedzający przynajmniej raz uzyskali do nich dostęp.

Audyty to kolejna świetna funkcja, która zapewnia przyjazną dla użytkownika analizę szybkości strony. Możesz go po prostu uruchomić, przechodząc do zakładek „Audyty” i naciskając „Generuj raport”:

Po prawej stronie masz kilka opcji, aby zdecydować, co chcesz przetestować, ponieważ czasami testy mogą zająć trochę czasu (minutę lub dwie), więc jeśli uruchamiasz je wiele razy, możesz wybrać to, co jest potrzebne do bieżącego testu . Oto przykładowy wynik z powyższymi opcjami dla ekranu głównego Google:

Świetny wynik! 94 jest bardzo dobry i prezentuje wspaniałą pracę włożoną w tę stronę. Pamiętaj, że z pozoru może to wyglądać bardzo prosto, ale w tle działa mnóstwo skryptów, które pozostają ukryte i spowalniają strony. Przetestowano wiele innych wskaźników i możesz to zrobić w dowolnej witrynie, aby dowiedzieć się, jakie problemy występują i co można poprawić.

Powiązane : Co naprawdę oznacza „Przyspieszenie witryny” i jak to osiągnąć?

Konsola DevTools

Ostatnim widokiem, który omówimy, jest konsola. Łatwy dostęp po prostu naciskając klawisz ESC lub przechodząc do zakładki „Konsola”. Zgodnie z oczekiwaniami nie ma błędów, tylko kilka ostrzeżeń, które nie powinny powodować zbyt wielu problemów:

Ale jeśli z jakiegoś powodu po ostatniej aktualizacji w Twojej witrynie interaktywny komponent (taki jak menu rozwijane, menu, mapa, formularz) przestanie działać, zawsze możesz rzucić okiem na konsolę. Może zawierać błędy, które mówią, jaka jest przyczyna.

Oto przykład, jak wyglądałby taki błąd:

Trochę ironiczne jest używanie strony z dokumentacją dzienników błędów, aby pokazać błędy, prawda? W każdym razie służy to dobremu celowi. Są to błędy, które uniemożliwiają działanie niektórych funkcji. Zawsze możesz udostępnić takie informacje swoim programistom i poprosić o pomoc. Dzienniki są publikowane na żywo podczas interakcji ze stroną, więc jeśli klikniesz przycisk i pojawi się błąd, najprawdopodobniej wystąpił problem ze skryptem za nim.

Powiązane : Droga do zostania dobrym projektantem stron internetowych

Uwaga dotycząca bezpieczeństwa : nie jest dobrym pomysłem kopiowanie i wklejanie kodu do konsoli bez zrozumienia jej działania. Zwłaszcza jeśli pochodzi z niewiarygodnego źródła i jest używany w wewnętrznych aplikacjach / witrynach Twojej firmy. Facebook opublikował ostrzeżenie z tego powodu na swojej konsoli:

Podsumowanie

DevTools to niesamowite narzędzie, które pomaga zarówno programistom, jak i właścicielom witryn. Zapewnia wszystko, czego potrzebujesz, aby ulepszyć i zmodyfikować stronę. Dzięki niemu możesz zmieniać CSS, modyfikować HTML, usuwać i przestawiać elementy na stronie, przeglądać raporty szybkości i zgłaszane błędy.

Właściciele witryn mogą go używać do przedstawiania deweloperom pomysłów i przykładów swoich potrzeb, które mogą być łatwiejsze do zrozumienia niż pisanie akapitów tekstu. Mając pewną wiedzę na temat podstawowych właściwości CSS, możesz znacznie lepiej opisać swoje potrzeby, co znacznie skróci czas spędzany na wprowadzaniu nowych zmian tam iz powrotem.

Jest mnóstwo innych funkcji, które czekają na użycie, nie bój się ich odkrywać!