Narzędzie programistyczne Inspect Element w Firefoksie pozwala wskazać kod HTML wszystkiego, co widzisz na swojej stronie internetowej. HTML i towarzyszący mu arkusz stylów CSS są w pełni edytowalne po otwarciu tych narzędzi. Eksperymentuj z dowolnymi zmianami, a następnie odśwież stronę, aby powrócić do zamierzonego wyglądu strony internetowej.
Kroki
Część 1 z 2: Kontrola elementów
Krok 1. Kliknij prawym przyciskiem myszy dowolny element strony internetowej
Możesz kliknąć prawym przyciskiem myszy obrazy, tekst, tła lub dowolny inny element. Jeśli nie masz myszy z dwoma przyciskami, kliknij lewym przyciskiem myszy, trzymając Control.
Krok 2. Kliknij opcję Sprawdź element z menu rozwijanego
Na dole okna powinien pojawić się pasek narzędzi. Pod paskiem narzędzi pojawi się również okienko z kodem HTML strony.
Krok 3. Zidentyfikuj paski narzędzi i panele
Kiedy klikniesz Sprawdź element, kilka okienek otworzy się na dole twojego okna. Oto zestawienie ich zastosowań i nazw:
- Górny wiersz to pasek narzędzi Toolbox. Zawiera kilka narzędzi programistycznych, ale interesuje nas Inspektor po lewej. Zachowaj to zaznaczone (podświetlone na niebiesko) w całym przewodniku.
- Poniżej paska narzędzi znajduje się pojedynczy wiersz Breadcrumbs elementów HTML, pokazujący pełną ścieżkę odnoszącą się do wybranego elementu.
- Panel poniżej tego wiersza pokazuje drzewo HTML lub „Widok znaczników” strony. Kod HTML wybranego elementu jest podświetlony i wyśrodkowany w tym okienku.
- Panel po prawej stronie wyświetla arkusz stylów CSS dla tej strony.
Krok 4. Wybierz inny element
Gdy pasek narzędzi jest otwarty, wybranie innego elementu jest łatwe. Oto trzy sposoby, aby to zrobić:
- Najedź kursorem na wiersz kodu HTML, aby podświetlić odpowiedni element (wymaga przeglądarki Firefox 34+). Kliknij kod HTML, aby wybrać ten element.
- Kliknij narzędzie Wybierz element po lewej stronie paska narzędzi: ikona jest kursorem nad kwadratem. Przesuń kursor nad stronę, aby wyróżnić elementy, a następnie kliknij, aby wybrać element.
Krok 5. Przejdź przez kod
Kliknij w dowolnym miejscu okienka HTML. Użyj strzałek w lewo i w prawo na klawiaturze, aby poruszać się po kodzie (wymaga przeglądarki Firefox 39+). Jest to przydatne w przypadku elementów, które są zbyt małe, aby można je było wybrać ręcznie.
- Szary HTML odnosi się do elementów, które nie są wyświetlane na stronie. Obejmuje to komentarze, niektóre węzły, takie jak i elementy, które zostały ukryte za pomocą właściwości wyświetlania CSS.
- Kliknij strzałkę po lewej stronie kontenera, aby rozwinąć lub ukryć jego zawartość. Aby rozwinąć całą zawartość, przytrzymaj alt=""Obraz" lub opcję podczas klikania.</li" />
Krok 6. Wyszukaj element
Poszukaj paska wyszukiwania (ikona szkła powiększającego) po prawej stronie wiersza Bułka tarta. Kliknij, aby go rozwinąć, a następnie wpisz kod HTML, którego szukasz. Podczas wpisywania pojawi się wyskakujące okienko z listą pasujących elementów. Kliknij jeden, aby wybrać ten element i przewiń panel HTML do jego kodu.
Część 2 z 2: Edycja kodu HTML
Krok 1. Odśwież stronę, aby zacząć od nowa w dowolnym momencie
Jeśli jesteś nowym użytkownikiem narzędzi dla programistów internetowych, pamiętaj, że nie wprowadzają one żadnych trwałych zmian. Twoje zmiany będą widoczne tylko na ekranie i tylko do momentu zamknięcia strony lub jej odświeżenia. Nie wahaj się eksperymentować, nawet jeśli nie jesteś pewien, co się stanie.
Krok 2. Kliknij dwukrotnie kod HTML, aby edytować tekst
Kliknij dwukrotnie wiersz kodu HTML. Wpisz nowy tekst i naciśnij Enter, aby zapisać zmiany.
Krok 3. Kliknij i przytrzymaj bułkę tartą, aby uzyskać więcej opcji
Pamiętaj, że pasek narzędzi Breadcrumb jest umieszczony pomiędzy pełnym drzewem HTML a górnym paskiem narzędzi. Kliknij i przytrzymaj dowolny element w tym wierszu, aby otworzyć rozbudowane menu. Oto niekompletny przewodnik po tych opcjach:
- „Edytuj jako HTML” umożliwia edycję węzła i całej jego zawartości w drzewie HTML, bez konieczności edytowania każdego wiersza osobno.
- „Kopiuj wewnętrzny HTML” kopiuje całą zawartość węzła, podczas gdy „Kopiuj zewnętrzny HTML” kopiuje również węzeł (na przykład lub
- "Wklej →" prowadzi do kilku opcji gdzie wkleić, na przykład przed tym węzłem lub po pierwszym potomku węzła.
- :hover,:active i:focus zmieniają wygląd elementu, gdy użytkownik wchodzi z nim w interakcję. Dokładny efekt jest określany przez arkusz stylów CSS (edytowalny z prawego panelu).
Krok 4. Przeciągnij i upuść
Aby zmienić kolejność elementów w kodzie, kliknij i przytrzymaj kod HTML, aż pojawi się linia przerywana. Przesuń go w górę lub w dół drzewa i puść, gdy przerywana linia znajdzie się w żądanym miejscu.
Wymaga to przeglądarki Firefox 39 lub nowszej
Krok 5. Zamknij pasek narzędzi programisty
Aby zamknąć wszystkie te fantazyjne okna, po prostu naciśnij X w prawym rogu paska narzędzi, nad panelem CSS.
Porady
- Możesz także otworzyć pasek narzędzi za pomocą następujących opcji menu górnego:
- Windows: Firefox → Web Developer → Przełącz narzędzia
- Mac lub Linux: Narzędzia → Web Developer → Przełącz narzędzia
- Firefox 40 wprowadził opcję ukrywania panelu CSS, aby zapewnić więcej miejsca podczas edycji HTML. Poszukaj ikony strzałki po prawej stronie wiersza Bułka tarta, po prawej stronie paska wyszukiwania. Kliknij tę ikonę, aby ukryć panel CSS i kliknij go ponownie, aby ponownie go rozwinąć.
- Panel CSS można również edytować, ale wykracza to poza zakres tego przewodnika. Ten artykuł uczy podstaw CSS.
