„Inspect Element” to narzędzie programistyczne w przeglądarce Firefox, którego można używać do śledzenia kodu HTML na dowolnej stronie internetowej. Arkusze stylów HTML i CSS strony internetowej można edytować za pomocą "Sprawdź element". Możesz spróbować edytować stronę tak, jak chcesz i przywrócić ją do stanu, w jakim była, po prostu przeładowując edytowaną stronę internetową.
Krok
Część 1 z 2: Sprawdzanie elementów
Krok 1. Zaktualizuj Firefoksa (opcjonalnie)
Możliwe, że nie będziesz mieć dostępu do funkcji omówionych w tym artykule, jeśli używasz starszej wersji Firefoksa. Aktualizacja zostanie zainstalowana automatycznie, gdy sprawdzisz, której wersji Firefoksa używasz.
Firefox 9 i wcześniejsze wersje w ogóle nie mają narzędzia „Sprawdź element”
Krok 2. Kliknij prawym przyciskiem myszy dowolny element strony internetowej
Możesz kliknąć prawym przyciskiem myszy dowolny obraz, tekst, tło lub element. Jeśli mysz ma tylko jeden przycisk, kombinacja kliknięcia lewym przyciskiem i klawisza Control spowoduje kliknięcie prawym przyciskiem myszy.
Krok 3. Kliknij „Sprawdź element” z menu rozwijanego
Na dole okna pojawi się pasek narzędzi. Pojawi się również panel pod paskiem narzędzi i wyświetli kod HTML na aktywnej stronie.
Krok 4. Poznaj istniejące paski narzędzi i panele
Gdy użyjesz opcji „Sprawdź element”, pod oknem przeglądarki otworzy się kilka paneli. Poniżej opisano nazwy i funkcje pasków narzędzi i paneli w "Sprawdź element":
- W górnym rzędzie znajduje się Toolbox Toolbar. Można tu znaleźć kilka narzędzi, ale skupimy się na przycisku Inspektora po lewej stronie. Upewnij się, że ten przycisk jest aktywny (wskazywany przez kolor przycisku, który zmienia kolor na niebieski, gdy jest aktywny) w tym przewodniku.
- Poniżej znajduje się linia okruszków elementów HTML, które wskazują położenie aktualnie wybranego elementu.
- Okienko pod monitami nawigacyjnymi pokazuje drzewo HTML lub „Widok znaczników” strony internetowej. Kod HTML wybranego elementu zostanie zaznaczony i wyśrodkowany w tym okienku.
- Panel po prawej stronie wyświetla arkusz stylów CSS bieżącej strony internetowej.
Krok 5. Wybierz inny element
Gdy pasek narzędzi jest otwarty, możesz łatwo wybrać inne elementy. Można to zrobić na trzy sposoby:
- Najedź kursorem na wiersz kodu HTML, aby oznaczyć wybrany element (ta funkcja wymaga przeglądarki Firefox 34+). Kliknij kod HTML, aby wybrać ten element.
- Kliknij narzędzie „Wybierz element” w lewym rogu paska narzędzi: nad polem znajduje się ikona w kształcie kursora. Przesuń kursor na stronę internetową, aby zaznaczyć element i kliknij, aby go zaznaczyć.
Krok 6. Śledź kod HTML
Kliknij w dowolnym miejscu okienka HTML. Użyj lewego i prawego klawisza kierunkowego na klawiaturze, aby przechodzić od kodu do kodu (ta funkcja wymaga przeglądarki Firefox 39+). Ta metoda jest przydatna do wybierania elementów, które są zbyt małe, aby można je było wybrać kursorem.
- Wyszarzony kod HTML wskazuje elementy, które nie są wyświetlane na stronie. Elementy w tym zawarte to komentarze, takie jak węzły i inne elementy ukryte przez właściwość wyświetlania CSS.
- Kliknij strzałkę po lewej stronie pola, aby pokazać lub ukryć zawartość. Aby wyświetlić całą zawartość, przytrzymaj alt=""Obraz" lub opcję podczas klikania strzałki.</li" />
Krok 7. Zlokalizuj element
Poszukaj pola wyszukiwania (ikona w kształcie pętli) w prawym prawym rogu wiersza bułki tartej. Kliknij, aby rozwinąć pole wyszukiwania i wpisz kod HTML, który chcesz wyszukać. Podczas wpisywania zostanie wyświetlone wyskakujące okienko z pasującymi wynikami wyszukiwania. Kliknij element z wyników wyszukiwania i przewiń panel HTML do kodu, którego szukasz.
Część 2 z 2: Edycja HTML
Krok 1. Odśwież stronę, aby zacząć od nowa
Jeśli jesteś nowym użytkownikiem narzędzi do tworzenia witryn, pamiętaj, że nie wprowadzasz trwałych zmian na edytowanych stronach. Twoje zmiany pojawiają się na ekranie tylko do czasu ponownego załadowania lub zamknięcia strony. Nie krępuj się eksperymentować, nawet jeśli nie wiesz, co się wydarzy.
Krok 2. Kliknij dwukrotnie kod HTML do edycji
Kliknij dwukrotnie wbudowany kod HTML. Wpisz nowy tekst i naciśnij Enter, aby zapisać zmiany.
Krok 3. Kliknij i przytrzymaj narzędzie w bułce tartej, aby wyświetlić więcej opcji
Zauważ, że pasek narzędzi breadcrumb znajduje się pomiędzy drzewem HTML a paskiem narzędzi powyżej. Kliknij i przytrzymaj narzędzie w tym wierszu, aby otworzyć więcej menu. Poniżej znajduje się wskazówka dostępnych opcji (niewyczerpująca):
- „Edytuj jako HTML” umożliwia edycję całej zawartości HTML bezpośrednio z drzewa HTML zamiast edytowania każdej linii.
- „Kopiuj wewnętrzny HTML” kopiuje całą zawartość wewnątrz węzła, podczas gdy „Kopiuj zewnętrzny HTML” kopiuje zawartość i węzły (takie jak lub
- „Wklej →” wyświetla kilka opcji, gdzie wkleić kopię, na przykład przed węzłem lub za pierwszym dzieckiem węzła.
- :hover,:active i:focus zmieniają wygląd elementu podczas interakcji użytkownika. Zmienione efekty definiuje się z arkusza stylów CSS (do edycji z panelu po prawej stronie).
Krok 4. Przeciągnij i upuść
Aby zmienić kolejność elementów w kodzie, kliknij i przytrzymaj kod HTML, aż pojawi się kropkowana linia. Przesuń linię w górę iw dół drzewa i zwolnij przycisk myszy, gdy linia znajdzie się tam, gdzie chcesz.
Ta funkcja wymaga przeglądarki Firefox 39 lub nowszej
Krok 5. Zamknij pasek narzędzi programisty
Aby zamknąć całe okno Sprawdź element, kliknij przycisk X w prawym górnym rogu paska narzędzi znajdującego się nad panelem CSS.
Porady
- Możesz także otworzyć pasek narzędzi z opcji menu u góry okna:
- Windows: Firefox → Web Developer → Przełącz narzędzia
- Mac lub Linux: Narzędzia → Web Developer → Przełącz narzędzia
- Firefox 40 ma opcję ukrycia panelu CSS, dzięki czemu masz więcej miejsca na edycję HTML. Poszukaj ikony strzałki w prawym prawym rogu wiersza bułki tartej i po prawej stronie pola wyszukiwania. Kliknij tę ikonę, aby ukryć panel CSS i kliknij ponownie, aby go wyświetlić.
- Możesz także edytować panele CSS, ale nie są one wymienione w tym artykule. Instrukcje dotyczące edycji kodu CSS można znaleźć w Internecie.
