Jak používat funkci "Prozkoumat element" v Mozilla Firefox

Funkce "Prozkoumat element" ve Firefoxu vám umožní zobrazit kód webové stránky HTML. Aktivací této funkce můžete změnit HTML a CSS. Experiment, provádění změn a pak aktualizujte stránku, abyste se vrátili do původního formuláře.

Kroky

Část 1 z 2:

Studijní prvky

jeden. Aktualizace Firefox (pokud chcete). Nebudete moci aktivovat všechny funkce popsané v tomto článku, pokud pracujete se starou verzí Firefoxu. Určete verzi tohoto prohlížeče pro spuštění automaticky aktualizovat.

Ve Firefox 9 a starších verzích funkce "Prozkoumat prvek" vůbec.

Obrázek s názvem Použijte kontrolní prvek v Mozilla Firefox Krok 2

2. Klepněte pravým tlačítkem myši na libovolnou položku webové stránky, například obrázkem, textem, pozadí nebo jiným prvkem. Pokud nemáte dvoupodlažní myš, stiskněte ovládací prvek a klikněte na levé tlačítko myši.

Obrázek s názvem Použijte prvek kontroly v Mozilla Firefox Krok 3

3. V nabídce se otevře, vyberte "Prozkoumat element". V dolní části okna se zobrazí panel nástrojů a pod ním - spodní s kódem stránky HTML.

Obrázek s názvem Použijte kontrolní prvek v Mozilla Firefox Krok 4

4. Dodržujte panely nástrojů a dole. Volba "Prozkoumejte prvek", otevře se několik dna v dolní části okna. Zde je jejich popis:

Top řetězec je panel nástrojů. Zahrnuje několik záložek, ale zajímáme se o první (vlevo) kartu "inspektor" (malované v modrém). Nepřepínejte na jiné karty.

Pod panelu nástrojů je řetězec s operátory ladění.

Níže je dole s kódem stránky HTML. HTML kód vybraného prvku bude zvýrazněn (v modrém markeru) a nachází se ve středu tohoto podsudku.

Uprostřed práva najdete CSS této stránky.

Obrázek s názvem Použijte kontrolní prvek v Mozilla Firefox Krok 5

Pět. Vyberte jinou položku. Po otevření funkcí "Prozkoumat položky" můžete snadno vybrat jinou položku jednou ze tří způsobů:

Přesuňte myš v kódu HTML, abyste zvýraznili odpovídající prvek (ve firefoxu 34+). Klepnutím na tlačítko HTML kód vyberte tuto položku.

Klepněte na ikonu "Vybrat prvek ze stránky". Tato ikona je umístěna na panelu nástrojů vlevo a má čtverec s kurzorem. Myši na požadovanou položku (v dolní části s kódem HTML) a klepněte na položku, kterou chcete vybrat.

Obrázek s názvem Použijte kontrolní prvek v Mozilla Firefox kroku 6

6. HTML navigační kód. Klikněte na libovolnou oblast v dolní části s kódem HTML. Pomocí kláves se šipkami (na klávesnici) procházejte kód (ve Firefoxu 39+). To je užitečné, pokud je prvek poměrně malý.

HTML kód prezentovaný s šedým písma odkazuje na položky, které nejsou zobrazeny na stránce. Například komentáře, uzly (např ) a prvky skryté s CSS.

Kliknutím na šipku vlevo od kontejneru nasadíte nebo skryjete jeho obsah. Pro rozšíření všech kontejnerů klepněte na tlačítko ALT nebo volbu při klepnutí.

Obrázek s názvem Použijte kontrolní prvek v Mozilla Firefox Krok 7

7. Najít prvek. Na řádku s operátory ladění naleznete ikonu ve formě zvětšovacího skla (vpravo). Kliknutím na tuto ikonu otevřete vyhledávací řetězec a zadejte kód HTML v něm hledáte. Jak se otevírají vyskakovací okno s odpovídajícími prvky. Klikněte na požadovanou položku a procházejte kódem HTML k nalezení kódu této položky.

Část 2 z 2:

Úprava HTML Code

jeden. Aktualizujte stránku pro zrušení všech zadaných změn. Nezapomeňte, že provedené změny budou zobrazeny pouze na obrazovce, to znamená, že nejsou konstantní. Zavření nebo aktualizace stránky se vrátí do původního formuláře. Takže se nebojte experimentovat, i když si nemusíte si představit, co to povede.

Obrázek s názvem Použijte kontrolní prvek v Mozilla Firefox Krok 9

2. Poklepejte na kód HTML, abyste jej upravili. Zadejte nový kód a stisknutím klávesy Enter uložte změny.

Obrázek s názvem Použijte kontrolní prvek v Mozilla Firefox kroku 10

3. Stiskněte a podržte řetězec s operátory ladění pro přístup k dalším možnostem. Tento řetězec je umístěn mezi panelu nástrojů a zemí s kódem HTML. Zde je neúplný seznam dalších možností:

"Edit jako HTML". Umožňuje upravit celý uzel a veškerý obsah, nikoli jednotlivé řádky.

"Kopírovat interní html". Zkopíruje celý obsah uzlu a kopírování externích HTML "kopií a uzlu (například,

nebo ).

"Vložit". Možnosti Vložky se otevře, například před uzlem nebo po uzlu.

": Vznášet se", ": aktivní", ": zaměření". Změňte vzhled prvku. Přesný efekt je určen CSS (upravenými na pravé straně).

Obrázek s názvem Použijte kontrolní prvek v Mozilla Firefox Krok 11

4. Přetažený. Uspořádání položek stiskněte a podržte kód HTML, dokud se objeví tečkovaná čára. Přesuňte nahoru nahoru nebo dolů a uvolněte, když je linka dosáhne požadované polohy.

Funguje pouze ve Firefoxu 39+.

Obrázek s názvem Použijte kontrolní prvek v Mozilla Firefox Krok 12

Pět. Zavřete spodní část funkcí "Prozkoumejte položky". Chcete-li to provést, klikněte na ikonu "X" (v pravém rohu panelu nástrojů).

Tipy

Panel nástrojů můžete také otevřít takto:

Okna. Klikněte na "Firefox" - "Developer" - "Toolbar".
Mac OS nebo Linux. Klikněte na položku Nástroje ";" Developer ";" Toolbar ".

Ve Firefoxu 40 můžete skrýt dolní hodnotu CSS kódu pro rozbalení dole pomocí kódu HTML. Chcete-li to provést, na lince s operátory ladění naleznete ikonu ve formě šipky směřující doprava (vedle zvětšovacího skla). Kliknutím na tuto ikonu skryjete spodní s kódem CSS - znovu klikněte na ikonu, kterou chcete nasadit.

Můžete také upravit CSS kód, ale přesahuje tento článek. Takže čtení tento článek.