Ako používať funkciu "Preskúmať prvku" v Mozille Firefox

Funkcia "Preskúmať element" v Firefox vám umožní zobraziť kód webovej stránky HTML. Aktiváciou tejto funkcie môžete zmeniť HTML a CSS. Experiment, vykonanie akýchkoľvek zmien a potom stačí aktualizovať stránku, aby ste sa vrátili do pôvodného formulára.

Kroky

Časť 1 z 2:

Študijné prvky

jeden. Aktualizujte Firefox (ak chcete). Nebudete môcť aktivovať všetky funkcie opísané v tomto článku, ak pracujete so starou verziou Firefoxu. Určite svoju verziu tohto prehliadača spustíte automatické aktualizáciu.

Vo Firefoxe 9 a starších verziách funkcie "Preskúmať prvok" vôbec.

Obrázok s názvom Použite kontrolu kontroly v Mozille Firefox Krok 2

2. Kliknite pravým tlačidlom myši na ľubovoľnú položku webovej stránky, napríklad obrazom, textom, pozadím alebo iným prvkom. Ak nemáte dve tlačidlo tlačidlo, stlačte ovládač a kliknite na položku ľavého tlačidla myši.

Obrázok s názvom Použite kontrolu kontroly v Mozille Firefox Krok 3

3. V ponuke, ktoré sa otvorí, vyberte položku "Preskúmať element". V spodnej časti okna sa zobrazí panel s nástrojmi a pod ním - dole s kódom stránky HTML.

Obrázok s názvom Použite kontrolu inšpekcií v Mozille Firefox Krok 4

4. Dodržujte panely s nástrojmi a dno. Výber "Preskúmajte prvku", otvorí sa niekoľko botthone v dolnej časti okna. Tu sú ich popis:

Top String je panel s nástrojmi. Zahŕňa niekoľko kariet, ale zaujímame sa o prvú (ľavú) kartu "inšpektor" (maľovaný modrý). Neprepínajte na iné karty.

Pod panelom s nástrojmi je reťazec s ladiacimi operátormi.

Nižšie je spodná strana s kódom stránky HTML. HTML kód vášho zvoleného prvku sa zvýrazní (v modrej značke) a nachádza sa v strede tohto substat.

Uprostred správneho nájdete CS tejto stránky.

Obrázok s názvom Použite inšpekčný prvok v Mozille Firefox Krok 5

päť. Vyberte inú položku. S otvorením funkcií "Preskúmať položku" môžete jednoducho vybrať inú položku jeden z troch spôsobov:

Presuňte myš do riadku HTML, aby ste zvýraznili zodpovedajúci prvok (vo Firefox 34+). Kliknutím na položku HTML kód vyberte túto položku.

Kliknite na ikonu "Vybrať prvku z stránky". Táto ikona sa nachádza na paneli s nástrojmi na ľavej strane a má námestie kurzorom. Myšou na požadovanú položku (v spodnej časti s kódom HTML) a potom kliknite na položku, ktorú chcete vybrať.

Obrázok s názvom Použite kontrolu kontroly v Mozille Firefox Krok 6

6. HTML navigačný kód. Kliknite na ľubovoľnú oblasť v spodnej časti s kódom HTML. Pomocou klávesov so šípkami (na klávesnici) na navigáciu kódu (vo Firefoxe 39+). To je užitočné, ak je prvok pomerne malý.

HTML kód prezentovaný s sivým písmom označuje položky, ktoré sa nezobrazia na stránke. Napríklad komentáre, uzly (napr ) a prvky skryté CSS.

Kliknite na šípku vľavo od kontajnera na nasadenie alebo skrytie jej obsahu. Ak chcete rozšíriť všetky kontajnery, kliknite na položku Alt alebo Option.

Obrázok s názvom Použite kontrolu kontroly v Mozille Firefox Krok 7

7. Nájsť prvok. Na riadku s ladiacimi operátormi nájdete ikonu vo forme zväčšovacieho skla (vpravo). Kliknutím na túto ikonu otvoríte vyhľadávací reťazec a zadajte kód HTML v ňom, ktorý hľadáte. Ako sa otvorí kontextové okno s príslušnými prvkami. Kliknite na požadovanú položku a prejdite cez kód HTML, aby ste našli kód tejto položky.

Časť 2 z 2:

Úprava HTML Kód

jeden. Aktualizujte stránku na zrušenie všetkých zadaných zmien. Nezabudnite, že vykonané zmeny sa zobrazia len na obrazovke, to znamená, že nie sú konštantné. Zatvorenie alebo aktualizácia stránky sa vráti do pôvodného formulára. Nebojte sa experimentovať, aj keď si nie ste celkom predstaviť, čo to povedie.

Obrázok s názvom Použite kontrolu kontroly v Mozille Firefox Krok 9

2. Dvakrát kliknite na HTML kód, ktorý chcete upraviť. Zadajte nový kód a stlačte ENTER a uložte zmeny.

Obrázok s názvom Použite kontrolu kontroly v Mozille Firefox Krok 10

3. Stlačte a podržte reťazec s operátormi Debugs na prístup k ďalším možnostiam. Tento reťazec sa nachádza medzi panelom s nástrojmi a zemou s HTML kódom. Tu je neúplný zoznam ďalších možností:

"Upraviť ako html". Umožňuje upraviť celý uzol a všetky jeho obsah, nie jednotlivé riadky.

"Kopírovať interné HTML". Skopíruje všetky obsah uzla a "Kopírovať externé HTML" voliteľné kópie a uzol (napríklad,

alebo ).

"Vložiť". Vložky možností sa otvoria napríklad pred uzlom alebo po uzde.

": Hovver", ": Active", ": Focus". Zmeňte vzhľad prvku. Presný účinok je určený CSS (upravený na pravej strane).

Obrázok s názvom Použite kontrolu kontroly v Mozille Firefox Krok 11

4. Ťahať. Ak chcete usporiadať položky, stlačte a podržte HTML kód, kým sa nezobrazí bodkovaná čiara. Presuňte ho nahor alebo nadol a uvoľnite, keď linka dosiahne požadovanú polohu.

Pracuje len vo Firefoxe 39+.

Obrázok s názvom Použite kontrolu kontroly v Mozille Firefox Krok 12

päť. Zatvorte spodnú časť funkcií "Preskúmať položky". Ak to chcete urobiť, jednoducho kliknite na ikonu "X" (v pravom rohu panela s nástrojmi).

Tipy

Panel s nástrojmi môžete tiež otvoriť nasledovne:

Okná. Kliknite na "Firefox" - "Developer" - "Toolbar".
Mac OS alebo Linux. Kliknite na "Nástroje" - "Developer" - "Toolbar".

Vo Firefoxe 40 môžete skryť spodnú časť kódov CSS, aby ste rozšírili spodnú časť s kódom HTML. Ak to chcete urobiť, na riadku s ladiacimi operátormi nájdite ikonu vo forme šípky namierenej vpravo (vedľa zväčšovacieho skla). Kliknutím na túto ikonu skryjte spodnú časť CSS Code - Opäť kliknite na ikonu na nasadenie.

Môžete tiež upravovať CSS kód, ale presahuje tento článok. Tak čítať tento článok.