Jak badać element na Chromebooku

Jeśli bawienie się kodem strony internetowej brzmi zachęcająco lub chcesz rozwiązać uciążliwy problem z układem, skorzystanie z narzędzia Inspect Element w Chrome jest praktycznie niezbędne. Pokazuje ono surowy kod HTML, CSS i JavaScript, z których składa się strona internetowa, co może być prawdziwym odkryciem. Dodatkowo, możesz tymczasowo modyfikować elementy, aby sprawdzić, jak będą wyglądać bez psucia niczego – to trochę jak zabawa w lekarza z kodem. Na Chromebookach jest to proste, ale czasami metoda, którą wybierzesz, zależy od preferowanego sposobu dostępu lub preferowanych skrótów.

Jak sprawdzić element na Chromebooku

Ponieważ Chromebooki to po prostu laptopy z systemem operacyjnym ChromeOS, w przeglądarce Chrome wbudowane są narzędzia programistyczne. Możesz sobie poradzić, klikając prawym przyciskiem myszy, możesz też wybrać menu lub skróty klawiaturowe – cokolwiek wydaje Ci się szybsze lub wygodniejsze. Pamiętaj jednak, że opcje menu Chrome czasami ukrywają się pod różnymi ścieżkami w zależności od aktualizacji, ale ogólny proces pozostaje taki sam.

To prawdopodobnie najprostszy sposób, ponieważ potrzebujesz tylko myszki lub touchpada. Nic wyszukanego, ale skutecznego. Jeśli nie masz ochoty grzebać w menu ani ustawieniach:

Otwórz przeglądarkę Chrome i przejdź do strony internetowej, którą chcesz obejrzeć.
Kliknij prawym przyciskiem myszy w dowolnym miejscu strony — tak, użyj zwykłego prawego przycisku, którego używasz w przypadku innych czynności.
Z tego menu kontekstowego wybierz opcję „Inspekcja”. Bum! Otworzą się Narzędzia programistyczne, w których możesz zobaczyć kod HTML i CSS.

To trochę dziwne, że czasami menu podręczne może mieć inną kolejność lub opcje w zależności od strony internetowej lub wersji Chrome, ale opcja Inspect zazwyczaj jest dostępna. W niektórych konfiguracjach może nazywać się __Inspect Element__ lub po prostu __Inspect__.

Jeśli wolisz menu lub chcesz skorzystać z opcji bez klikania prawym przyciskiem myszy, menu Chrome’a sprawdzi się idealnie. Ta metoda sprawdzi się, jeśli wolisz przeglądać menu, aby uzyskać dostęp do większej liczby funkcji dla programistów:

Kliknij ikonę trzech kropek w prawym górnym rogu przeglądarki Chrome.
Najedź kursorem na Więcej narzędzi w menu rozwijanym.
Wybierz Narzędzia programistyczne z podmenu.

Spowoduje to otwarcie panelu z boku lub u dołu okna, w którym będzie widoczny kod źródłowy strony internetowej. Czasami ta metoda jest nieco wolniejsza, ale jest bardziej przejrzysta, jeśli nie chcesz, aby przypadkowe kliknięcia prawym przyciskiem myszy uruchamiały inne opcje.

Korzystanie ze skrótu klawiaturowego w celu szybkiego dostępu

No dobrze, to chyba najszybsza droga – jeśli pamiętasz skrót. Na Chromebooku to po prostu Ctrl + Shift + Ikombinacja i bum, narzędzia programistyczne pojawiają się natychmiast. Nie trzeba bawić się menu ani klikać prawym przyciskiem myszy.

Ten skrót często działa od razu i zazwyczaj po jakimś czasie to właśnie do niego wracam, ponieważ wydaje się szybszy niż przeszukiwanie menu. Należy jednak pamiętać, że w niektórych nowszych konfiguracjach lub po zmianie przypisania klawiszy skróty mogą się nieco różnić, ale generalnie ten jest standardowy.

Podsumowanie

Prawdopodobnie na Chromebooku inspekcja elementów stanie się całkiem naturalna, gdy już przyzwyczaisz się do tych metod. Niezależnie od tego, czy chcesz szybko debugować, zrozumieć, jak zbudowana jest strona internetowa, czy po prostu pobawić się stylami stron, narzędzia programistyczne Chrome’a będą Twoim sprzymierzeńcem. Metoda kliknięcia prawym przyciskiem myszy jest tania i wygodna, menu jest nieco bardziej formalne, a skrót to prawdziwy demon szybkości.

Powiązane artykuły

Ostatnio przeglądane

Czy ten artykuł był pomocny?

Na tej stronie