Chrome DevTools

Tworząc naszą stronę internetową, możemy oczywiście zobaczyć efekty naszej pracy w oknie przeglądarki. Jednak w pewnym momencie samo okno przeglądarki będzie dla nas niewystarczającym narzędziem. Jak sprawdzić, czy tagi, które umieściliśmy w naszym kodzie, faktycznie pojawiają się na stronie? A jeżeli się nie pojawiają, to czemu? Czy na pewno na stronie mamy tylko jeden nagłówek <h1> oraz niepowtarzające się atrybuty id? Jakie klasy nadaliśmy elementom <li> w nawigacji? 🤔

Pisanie kodu i wyświetlanie go w przeglądarce jest łatwe i wygodne do czasu, gdy nagle coś nam działa inaczej niż zakładaliśmy. Na szczęście niemal wszystkie przeglądarki posiadają wbudowane tzw. narzędzia deweloperskie (nazywane również DevTools). To dzięki nim możemy podejrzeć, jak wygląda kod HTML, CSS oraz JavaScript tworzący przeglądaną przez nas stronę. W takich narzędziach możemy również tymczasowo zmieniać tagi, atrybuty, treść oraz CSS. Wszystko po to, aby zobaczyć jak te zmiany wpłyną na wygląd strony. Dzięki temu możemy najpierw poeksperymentować na działającej stronie i natychmiastowo widzieć efekt wszystkich wprowadzanych poprawek, zanim zapiszemy zadowalający nas kod w pliku.

DevTools są niezbędnymi narzędziami podczas tworzenia stron oraz aplikacji, więc dobre poznanie ich możliwości sprawi, iż nasza praca będzie bardziej komfortowa i profesjonalna. Na tym kursie będziemy korzystać z narzędzi deweloperskich dostępnych w Chrome, ale ich wygląd i działanie jest niemal identyczne w każdej przeglądarce, więc opanowanie Chrome DevTools pozwoli nam na korzystanie z tego rozwiązania również w innych przeglądarkach.

Poniższe lekcje omówią trzy funkcjonalności, które będą nam potrzebne na etapie nauki HTML. Wraz z kolejnymi lekcjami będziemy również stopniowo poznawać kolejne możliwości DevTools.

Jeżeli jesteś już teraz ciekawy czym są DevTool to naciśnij klawisz F12 na klawiaturze – moje gratulacje, właśnie powoli odkrywasz co tak naprawdę dzieje się “za kulisami” każdej strony internetowej 🙂

🔗 Dodatkowe materiały:

• 21+ Browser Dev Tools & Tips
  Trzy najważniejsze zakładki poznamy również w następnych lekcjach.