„Inspect Element“je nástroj pre vývojárov v prehliadači Firefox, ktorý môžete použiť na sledovanie kódu HTML na ľubovoľnej webovej stránke. Šablóny štýlov HTML a CSS webovej stránky je možné upravovať pomocou položky „Skontrolovať prvok“. Môžete sa pokúsiť upraviť stránku podľa svojho vkusu a vrátiť ju tak, ako bola, jednoduchým načítaním upravenej webovej stránky.
Krok
Časť 1 z 2: Kontrola prvkov
Krok 1. Aktualizujte Firefox (voliteľné)
Je možné, že k funkciám popísaným v tomto článku nebudete mať prístup, ak používate staršiu verziu prehliadača Firefox. Aktualizácia sa nainštaluje automaticky, keď skontrolujete, ktorú verziu Firefoxu používate.
Firefox 9 a staršie verzie vôbec nemajú nástroj „Skontrolovať prvok“
Krok 2. Kliknite pravým tlačidlom myši na ľubovoľný prvok webovej stránky
Môžete kliknúť pravým tlačidlom myši na ľubovoľný obrázok, text, pozadie alebo prvok. Ak má vaša myš iba jedno tlačidlo, kombinácia ľavého kliknutia a ovládacieho klávesu spôsobí kliknutie pravým tlačidlom myši.
Krok 3. V rozbaľovacej ponuke kliknite na „Skontrolovať prvok“
V spodnej časti okna sa zobrazí panel s nástrojmi. Zobrazí sa tiež panel pod panelom s nástrojmi, ktorý na aktívnej stránke zobrazí kód HTML.
Krok 4. Zoznámte sa s existujúcimi panelmi nástrojov a panelmi
Keď použijete „Skontrolovať prvok“, pod oknom prehliadača sa otvorí niekoľko panelov. Nasledujúci text popisuje názvy a funkcie panelov s nástrojmi a panelov v časti „Skontrolovať prvok“:
- V hornom riadku je panel nástrojov Toolbox. Existuje niekoľko nástrojov, ale zameriame sa na tlačidlo Inšpektor vľavo. Uistite sa, že je toto tlačidlo v tejto príručke aktívne (označené farbou tlačidla, ktoré sa pri aktivácii zmení na modré).
- Pod tým je rad drobkov na prvky HTML, ktoré označujú umiestnenie aktuálne vybraného prvku.
- Tabla pod navigačnými výzvami zobrazuje strom HTML alebo „zobrazenie značiek“webovej stránky. HTML vybraného prvku bude označené a vycentrované na tomto paneli.
- Tabla vpravo zobrazuje šablónu štýlov CSS aktuálnej webovej stránky.
Krok 5. Vyberte iný prvok
Keď je panel s nástrojmi otvorený, môžete jednoducho vybrať ďalšie prvky. Existujú tri spôsoby, ako to urobiť:
- Vybratý prvok označíte umiestnením kurzora myši na riadok HTML (táto funkcia vyžaduje Firefox 34 a novší). Kliknutím na HTML prvok vyberiete.
- Kliknite na nástroj „Vybrať prvok“v ľavom rohu panela s nástrojmi: nad poľom sa nachádza ikona v tvare kurzora. Pohybom kurzora na webovej stránke označíte prvok a kliknutím ho vyberiete.
Krok 6. Sledujte kód HTML
Kliknite kdekoľvek na table HTML. Na prechod z kódu na kód použite ľavé a pravé smerové tlačidlo na klávesnici (táto funkcia vyžaduje Firefox 39+). Táto metóda je užitočná pri výbere prvkov, ktoré sú príliš malé na to, aby ich bolo možné vybrať pomocou kurzora.
- Sivý kód HTML označuje prvky, ktoré sa na stránke nezobrazujú. Prvky zahrnuté v tomto sú komentáre, ako napríklad uzly, a ďalšie prvky skryté vo vlastnosti zobrazovania CSS.
- Kliknutím na šípku vľavo od poľa zobrazíte alebo skryjete obsah. Ak chcete zobraziť celý obsah, podržte stlačený kláves alt=„Obrázok“alebo možnosť a zároveň kliknite na šípku.
Krok 7. Nájdite prvok
Vyhľadajte vyhľadávacie pole (ikona v tvare slučky) v pravom hornom rohu riadku s drobenkou. Kliknutím rozbaľte vyhľadávacie pole a zadajte HTML kód, ktorý chcete hľadať. Počas písania sa zobrazí vyskakovacie okno so zodpovedajúcimi výsledkami vyhľadávania. Kliknite na prvok vo výsledkoch vyhľadávania a posuňte panel HTML na kód, ktorý hľadáte.
Časť 2 z 2: Úprava HTML
Krok 1. Začnite znova načítaním stránky
Ak ste s nástrojmi na vývoj webových stránok nováčik, uvedomte si, že na upravovaných stránkach nevykonávate trvalé zmeny. Vaše úpravy sa zobrazia iba na obrazovke, kým stránku znova nenačítate alebo nezavriete. Nebojte sa experimentovať, aj keď neviete, čo sa stane.
Krok 2. Dvakrát kliknite na HTML, ktoré chcete upraviť
Dvakrát kliknite na vložený HTML. Zadajte nový text a zmeny uložte stlačením klávesu Enter.
Krok 3. Kliknutím na nástroj a jeho podržaním v strúhanke zobrazíte ďalšie možnosti
Všimnite si toho, že panel s nástrojmi typu drobenka sa nachádza medzi stromom HTML a panelom s nástrojmi nad ním. Kliknutím a podržaním nástroja v tomto riadku otvoríte ďalšie ponuky. Nasleduje náznak dostupných možností (nie vyčerpávajúci):
- „Upraviť ako HTML“vám umožňuje upravovať všetok obsah HTML zo stromu HTML namiesto úpravy každého riadka.
- „Kopírovať vnútorný HTML“skopíruje celý obsah vnútri uzla, zatiaľ čo „Kopírovať vonkajší HTML“skopíruje obsah a uzly (ako napr.
- „Vložiť →“ponúka niekoľko možností, kam umiestniť kópiu, napríklad pred uzol alebo za prvé dieťa uzla.
- : hover,: active a: focus zmení vzhľad prvku, keď používateľ interaguje. Zmenené efekty sú definované v šablóne štýlov CSS (upraviteľné z panela vpravo).
Krok 4. Presuňte myšou
Ak chcete zmeniť usporiadanie prvkov v kóde, kliknite a podržte tlačidlo HTML, kým sa nezobrazí bodkovaná čiara. Pohybujte riadkom nahor a nadol po strome a uvoľnite tlačidlo myši, keď je riadok na požadovanom mieste.
Táto funkcia vyžaduje Firefox 39 a novší
Krok 5. Zatvorte panel s nástrojmi pre vývojárov
Ak chcete zatvoriť celé okno Skontrolovať prvok, kliknite na tlačidlo X v pravom hornom rohu panela s nástrojmi umiestneného nad panelom CSS.
Tipy
- Panel s nástrojmi môžete otvoriť aj z možností ponuky v hornej časti okna:
- Windows: Firefox → Web Developer → Prepnúť nástroje
- Mac alebo Linux: Nástroje → Web Developer → Prepnúť nástroje
- Firefox 40 má možnosť skryť panel CSS, aby ste mali viac priestoru na úpravu HTML. V pravom rohu vyhľadávacieho poľa a napravo od vyhľadávacieho poľa vyhľadajte ikonu šípky. Kliknutím na túto ikonu skryjete panel CSS a ďalším kliknutím ho vyvoláte.
- Panely CSS môžete tiež upravovať, ale nie sú uvedené v tomto článku. Pokyny na úpravu kódu CSS nájdete na internete.
