„Inspect Element“je nástroj pro vývojáře v prohlížeči Firefox, který můžete použít ke sledování kódu HTML na jakékoli webové stránce. Šablony stylů HTML a CSS webové stránky lze upravit pomocí „Inspect Element“. Můžete se pokusit upravit stránku, jak chcete, a vrátit ji tak, jak byla, jednoduše znovu načíst upravenou webovou stránku.
Krok
Část 1 ze 2: Kontrola prvků
Krok 1. Aktualizujte Firefox (volitelně)
Je možné, že nebudete mít přístup k funkcím popsaným v tomto článku, pokud používáte starší verzi Firefoxu. Aktualizace se nainstaluje automaticky, když zkontrolujete, jakou verzi Firefoxu používáte.
Firefox 9 a starší verze vůbec nemají nástroj „Inspect Element“
Krok 2. Klepněte pravým tlačítkem na libovolný prvek webové stránky
Můžete kliknout pravým tlačítkem na libovolný obrázek, text, pozadí nebo prvek. Pokud má vaše myš pouze jedno tlačítko, kombinace kliknutí levým tlačítkem a ovládací klávesy povede k kliknutí pravým tlačítkem.
Krok 3. V rozevírací nabídce klikněte na „Zkontrolovat prvek“
V dolní části okna se zobrazí panel nástrojů. Zobrazí se také panel pod panelem nástrojů, který na aktivní stránce zobrazí kód HTML.
Krok 4. Seznamte se se stávajícími panely nástrojů a panely
Když použijete „Zkontrolovat prvek“, pod oknem prohlížeče se otevře několik panelů. Následující text popisuje názvy a funkce panelů nástrojů a panelů v části „Zkontrolovat prvek“:
- V horním řádku je panel nástrojů Toolbox. Najdeme zde několik nástrojů, ale my se zaměříme na tlačítko inspektora vlevo. Ujistěte se, že je toto tlačítko v této příručce aktivní (označené barvou tlačítka, které se při aktivaci změní na modré).
- Pod tím se nachází řada drobečků prvků HTML, které označují umístění aktuálně vybraného prvku.
- Podokno pod navigačními výzvami zobrazuje strom HTML nebo „Zobrazení značek“webové stránky. HTML vybraného prvku bude v tomto podokně označeno a vycentrováno.
- Podokno vpravo zobrazuje šablonu stylů CSS aktuální webové stránky.
Krok 5. Vyberte jiný prvek
Když je panel nástrojů otevřený, můžete snadno vybrat další prvky. To lze provést třemi způsoby:
- Umístěním kurzoru na řádek HTML označíte vybraný prvek (tato funkce vyžaduje Firefox 34+). Kliknutím na HTML vyberte tento prvek.
- Klikněte na nástroj „Vybrat prvek“v levém rohu panelu nástrojů: nad rámečkem je ikona ve tvaru kurzoru. Přesuňte kurzor na webovou stránku a označte prvek a kliknutím jej vyberte.
Krok 6. Sledujte kód HTML
Klikněte kamkoli v podokně HTML. K přechodu z kódu na kód použijte levou a pravou směrovou klávesnici na klávesnici (tato funkce vyžaduje Firefox 39+). Tato metoda je užitečná pro výběr prvků, které jsou příliš malé na to, aby je bylo možné vybrat pomocí kurzoru.
- Šedý HTML označuje prvky, které se na stránce nezobrazují. Prvky zahrnuté v tomto jsou komentáře, jako uzly a další prvky skryté vlastností zobrazení CSS.
- Kliknutím na šipku nalevo od pole zobrazíte nebo skryjete obsah. Chcete -li zobrazit celý obsah, podržte při kliknutí na šipku alt=„Obrázek“nebo možnost.
Krok 7. Najděte prvek
Vyhledejte vyhledávací pole (ikona ve tvaru smyčky) v pravém rohu řádku se strouhankou. Kliknutím rozbalte vyhledávací pole a zadejte kód HTML, který chcete vyhledat. Při psaní se zobrazí vyskakovací okno se shodnými výsledky vyhledávání. Klikněte na prvek ve výsledcích hledání a v podokně HTML přejděte na kód, který hledáte.
Část 2 ze 2: Úpravy HTML
Krok 1. Znovu načtěte stránku a začněte znovu
Pokud s nástroji pro vývoj webových stránek teprve začínáte, mějte na paměti, že na stránkách, které upravujete, neprovádíte trvalé změny. Vaše úpravy se zobrazí pouze na obrazovce, dokud stránku znovu nenačtete nebo nezavřete. Nebojte se experimentovat, i když nevíte, co se stane.
Krok 2. Poklepáním na HTML upravte
Dvakrát klikněte na vložený HTML. Zadejte nový text a změny uložte stisknutím klávesy Enter.
Krok 3. Kliknutím a podržením nástroje ve strouhance zobrazíte další možnosti
Panel nástrojů se strouhankou se nachází mezi stromem HTML a panelem nástrojů nad ním. Kliknutím a podržením nástroje v tomto řádku otevřete další nabídky. Níže je uveden náznak dostupných možností (není vyčerpávající):
- „Upravit jako HTML“vám umožňuje upravovat veškerý obsah HTML ze stromu HTML místo úpravy každého řádku.
- „Kopírovat vnitřní HTML“zkopíruje celý obsah uvnitř uzlu, zatímco „Kopírovat vnější HTML“zkopíruje obsah a uzly (jako např.
- „Vložit →“vyvolá několik možností, kam kopii vložit, například před uzel nebo za první podřízený uzel.
- : hover,: active a: focus změní vzhled prvku při interakci uživatele. Změněné efekty jsou definovány z šablony stylů CSS (upravitelné z panelu vpravo).
Krok 4. Přetáhněte
Chcete -li změnit uspořádání prvků v kódu, klikněte a podržte HTML, dokud se nezobrazí tečkovaná čára. Přesuňte řádek nahoru a dolů po stromě a uvolněte tlačítko myši, když je čára na požadovaném místě.
Tato funkce vyžaduje Firefox 39 a novější
Krok 5. Zavřete panel nástrojů pro vývojáře
Chcete -li zavřít celé okno Zkontrolovat prvek, klikněte na tlačítko X v pravém horním rohu panelu nástrojů umístěného nad panelem CSS.
Tipy
- Panel nástrojů můžete také otevřít z možností nabídky v horní části okna:
- Windows: Firefox → Web Developer → Přepnout nástroje
- Mac nebo Linux: Nástroje → Web Developer → Přepnout nástroje
- Firefox 40 má možnost skrýt panel CSS, takže máte více prostoru pro úpravu HTML. Vyhledejte ikonu šipky v pravém krajním rohu řádku se strouhankou a napravo od vyhledávacího pole. Kliknutím na tuto ikonu skryjete panel CSS a dalším kliknutím jej vyvoláte.
- Panely CSS můžete také upravovat, ale nejsou uvedeny v tomto článku. Pokyny pro úpravu kódu CSS najdete na internetu.
