Chrome DevTools część 1 – wstęp

Zgodnie z zapowiedzią – rozpoczynam serię wpisów o Chrome DevTools. Seria ta jest skierowana do osób, dla których Chromowe narzędzia nie są nowością, ale, tak jak ja, czują, że nie wykorzystują w pełni potencjału jaki oferują. Postaram się omówić i przedstawić na przykładach opcje i zakładki, z którymi webdeveloperzy nigdy „nie mają czasu” się zapoznać.

Pierwszy temat, którym się zajmiemy to zakładka Elements. Przez większość osób jest ona używana jedynie do podglądania drzewa dokumentu HTML lub zmieniania/dodawania reguł CSS.

Powiem o kilku rzeczach, które nie były dla mnie oczywiste na pierwszy rzut oka oraz takich, do których bałem się zbliżyć, bo wydawały mi się zbędne 🙂

Na rozgrzewkę wrzucam coś super prostego i większość z Was pewnie mnie w tym momencie wyśmieje, ale nigdy nie zwróciłem na to uwagi. Otóż, pod drzewkiem HTML jest belka (tzw. breadcrumbs), która umożliwia łatwą nawigację pomiędzy rodzicami aktualnie wybranego elementu drzewa. Zamiast tego zawsze mozolnie klikałem w elementy drzewa…

Mind blown.

breadcrumbs

Kolejny post będzie już bardziej dojrzały. Przedstawię jak i kiedy używać zakładki Event listeners.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Połączenie z %s