Jak korzystać z funkcji "Element Element" w Mozilla Firefox

Funkcja "Element Explore" w Firefoksie pozwoli Ci wyświetlić kod strony internetowej HTML. Aktywując tę funkcję, możesz zmienić HTML i CSS. Eksperymentuj, wprowadzanie jakichkolwiek zmian, a następnie wystarczy zaktualizować stronę, aby powrócić do pierwotnej formy.

Kroki

Część 1 z 2:

Elementy nauki

jeden. Zaktualizuj Firefox (jeśli chcesz). Nie będziesz mógł aktywować wszystkich funkcji opisanych w tym artykule, jeśli pracujesz ze starą wersją Firefoksa. Określ swoją wersję tej przeglądarki, aby uruchomić go automatycznie aktualizować.

W Firefoksie 9 i wcześniejszych wersjach funkcji "Explore Element".

Obraz zatytułowany Użyj elementu Inspect w Mozilla Firefox Krok 2

2. Kliknij prawym przyciskiem myszy dowolną stronę internetową, na przykład przez obraz, tekst, tło lub inny element. Jeśli nie masz myszy dwóch przycisków, naciśnij sterowanie i kliknij po lewej stronie przycisku myszy.

Obraz zatytułowany Użyj elementu Inspect w Mozilla Firefox Krok 3

3. W menu, które się otwierają, wybierz "Eksploruj element". Na dole okna pojawi się pasek narzędzi, a pod nim - dno z kodem strony internetowej HTML.

Obraz zatytułowany Użyj elementu Inspect w Mozilla Firefox Krok 4

cztery. Obserwuj paski narzędzi i dno. Wybór "Eksploruj element", otwiera się kilku dno w dolnej części okna. Oto ich opis:

Top String to pasek narzędzi. Zawiera kilka zakładek, ale jesteśmy zainteresowani pierwszą (lewą) zakładką "Inspector" (malowany na niebiesko). Nie przełączaj się na inne karty.

Pod paskiem narzędzi znajduje się ciąg z operatorami debugowania.

Poniżej znajduje się dno z kodem strony internetowej HTML. Kod HTML wybranego elementu zostanie podświetlony (w niebieskim znaczniku) i znajduje się w środku tego subcast.

W środku prawa znajdziesz CSS tej strony.

Obraz zatytułowany Użyj elementu inspektu w Mozilla Firefox Krok 5

pięć. Wybierz inny przedmiot. Po otwarciu funkcji "Eksploruj element", można łatwo wybrać inny element jeden z trzech sposobów:

Przesuń mysz w linii kodu HTML, aby podświetlić odpowiedni element (w Firefoksie 34+). Kliknij kod HTML, aby wybrać ten element.

Kliknij ikonę "Wybierz element z strony". Ta ikona znajduje się na pasku narzędzi po lewej stronie i ma kwadrat z kursorem. Przejdź do żądanego elementu (na dole z kodem HTML), a następnie kliknij element, aby go wybrać.

Obraz zatytułowany Użyj elementu inspektu w Mozilla Firefox Krok 6

6. Kod nawigacji HTML. Kliknij dowolny obszar na dole z kodem HTML. Użyj klawiszy strzałek (na klawiaturze), aby poruszać się po kodzie (w Firefox 39+). Jest to przydatne, jeśli element jest dość mały.

Kod HTML prezentowany ze szarą czcionką odnosi się do elementów, które nie są wyświetlane na stronie. Na przykład komentarze, węzły (takie jak ) i elementy ukryte z CSS.

Kliknij strzałkę po lewej stronie pojemnika, aby wdrożyć lub ukryć jego zawartość. Aby rozwinąć wszystkie pojemniki, kliknij przycisk Alt lub opcja przy kliknięciu.

Obraz zatytułowany Użyj elementu inspektu w Mozilla Firefox Krok 7

7. Znajdź element. W rzędzie z operatorami debugowania znajdź ikonę w postaci lupy (po prawej). Kliknij tę ikonę, aby otworzyć ciąg wyszukiwania i wprowadź w nim kod HTML, szukasz. Jak otwiera się okno wyskakujące z odpowiednimi elementami. Kliknij żądany element i przewiń kod HTML, aby znaleźć kod tego elementu.

Część 2 z 2:

Edycja kodu HTML

jeden. Zaktualizuj stronę, aby anulować wszystkie wprowadzone zmiany. Pamiętaj, że wprowadzone zmiany zostaną wyświetlone tylko na ekranie, czyli, nie są one ciągłe. Zamknięcie lub aktualizowanie strony, powróci do oryginalnej formy. Więc nie bój się eksperymentować, nawet jeśli nie wyobrażasz sobie, co doprowadzi.

Obraz zatytułowany Użyj elementu Inspect w Mozilli Firefox Krok 9

2. Kliknij dwukrotnie kod HTML, aby go edytować. Wprowadź nowy kod i naciśnij ENTER, aby zapisać zmiany.

Obraz zatytułowany Użyj elementu Inspect w Mozilli Firefox Krok 10

3. Naciśnij i przytrzymaj ciąg z operatorami debugowania, aby uzyskać dostęp do dodatkowych opcji. Ten ciąg znajduje się między paskiem narzędzi a podłożem z kodem HTML. Oto niekompletna lista dodatkowych opcji:

"Edytuj jako HTML". Umożliwia edycję całego węzła i wszystkich jej zawartości, a nie indywidualnych linii.

"Kopiuj wewnętrzny HTML". Kopiuje wszystkie zawartość węzła, a opcja "Kopiuj zewnętrzną HTML" Kopie i węzeł (na przykład,

lub ).

"Pasta". Wkładki opcji otworzą się na przykład przed węzłem lub po węźle.

": Hover", ": Aktywny", ": Focus". Zmienić wygląd elementu. Dokładny efekt określa CSS (edytowany po prawej stronie).

Obraz zatytułowany Użyj elementu Inspect w Mozilli Firefox Krok 11

cztery. Włóka. Aby zmienić rozłączenie elementów, naciśnij i przytrzymaj kod HTML, aż pojawi się linia przerywana. Przenieś go w górę lub w dół i zwolnij, gdy linia osiąga żądaną pozycję.

Działa tylko w Firefoksie 39+.

Obraz zatytułowany Użyj elementu Inspect w Mozilla Firefox Krok 12

pięć. Zamknij spód funkcji "Eksploruj elementy". Aby to zrobić, po prostu kliknij ikonę "X" (w prawym dolnym rogu paska narzędzi).

Rada

Możesz także otworzyć pasek narzędzi w następujący sposób:

Windows. Kliknij "Firefox" - "Developer" - "Toolbar" ".
Mac OS lub Linux. Kliknij "Narzędzia" - "Developer" - "Pasek narzędzi".

W Firefoksie 40 możesz ukryć dno kodem CSS, aby rozszerzyć dno kodem HTML. Aby to zrobić, na linii z operatorami debugowania, znajdź ikonę w postaci strzałki skierowanej w prawo (obok szkła powiększającego). Kliknij tę ikonę, aby ukryć dolny kod CSS - po raz kolejny kliknij ikonę, aby go wdrożyć.

Możesz także edytować kod CSS, ale wykracza poza ten artykuł. Tak czytać Ten artykuł.