Ako používať prvok inšpekcie v programe Mozilla Firefox?
Pod panelom s nástrojmi sa nachádza jeden riadok HTML prvkov typu Breadcrumbs, ktorý zobrazuje úplnú cestu k vybratému prvku.
Skontrolujte Element vývojársky nástroj vo Firefoxe umožňuje určiť HTML kód pre všetko, čo vidíte na svojej webovej stránke. Hneď ako sú tieto nástroje otvorené, je možné HTML a sprievodný list štýlov CSS úplne upravovať. Experimentujte so všetkými zmenami, ktoré sa vám páčia, a potom stránku obnovte, aby ste sa vrátili k plánovanému vzhľadu webovej stránky.
Časť 1 z 2: kontrola prvkov
- 1Kliknite pravým tlačidlom myši na ľubovoľný prvok webovej stránky. Na obrázky, text, pozadie alebo iný prvok môžete kliknúť pravým tlačidlom myši. Ak nemáte dvojtlačidlovú myš, podržte stlačené ľavé tlačidlo Control.
- 2V rozbaľovacej ponuke kliknite na prvok Skontrolovať. V spodnej časti okna by sa mal objaviť panel s nástrojmi. Pod panelom s nástrojmi sa zobrazí aj tabla zobrazujúca kód HTML stránky.
- 3Identifikujte panely nástrojov a tably. Keď kliknete na položku Skontrolovať prvok, v spodnej časti okna sa otvorí niekoľko tabiel. Tu je rozpis ich použití a názvov:
- Horný riadok je panel nástrojov Toolbox. Toto má niekoľko vývojárskych nástrojov, ale nás zaujíma Inšpektor vľavo. Nechajte toto vybraté (zvýraznené modrou farbou) pre celého tohto sprievodcu.
- Pod panelom s nástrojmi sa nachádza jeden riadok HTML prvkov typu Breadcrumbs, ktorý zobrazuje úplnú cestu k vybratému prvku.
- Tabla pod týmto riadkom zobrazuje strom HTML alebo „zobrazenie značiek“ stránky. HTML pre prvok, ktorý ste vybrali, je zvýraznený a vycentrovaný na tejto table.
- Na table vpravo sa zobrazuje šablóna štýlov CSS pre túto stránku.
- 4Vyberte iný prvok. Keď je panel s nástrojmi otvorený, výber iného prvku je jednoduchý. Tu sú tri spôsoby, ako to urobiť:
- Umiestnením kurzora myši na riadok HTML zvýraznite príslušný prvok (vyžaduje Firefox 34+). Kliknutím na HTML prvok vyberiete.
- Kliknite na nástroj Vybrať prvok úplne vľavo na paneli s nástrojmi: ikona je kurzor nad štvorcom. Pohybom kurzora po stránke zvýraznite prvky a kliknutím vyberte prvok.
- 5Prechádzajte kódom. Kliknite kdekoľvek na table HTML. V kóde sa pohybujte pomocou šípok doľava a doprava (vyžaduje Firefox 39+). To je užitočné pre prvky, ktoré sú príliš malé na to, aby ste ich mohli ručne vyberať.
- Sivý HTML sa týka prvkov, ktoré nie sú na stránke zobrazené. To zahŕňa komentáre, určité uzly, ako napríklad <head>, a prvky, ktoré boli skryté s vlastnosťou zobrazenia CSS.
- Kliknutím na šípku vľavo od kontajnerov rozbalíte alebo skryjete jeho obsah. Ak chcete rozšíriť všetok obsah, podržte pri kliknutí kláves Alt alebo Option.
- 6Vyhľadajte prvok. Hľadajte vyhľadávací panel (ikona lupy) úplne vpravo v riadku Breadcrumbs. Kliknutím naň rozbalíte a zadajte hľadaný kód HTML. Počas písania sa zobrazí vyskakovacie okno so zoznamom zodpovedajúcich prvkov. Kliknutím na jeden prvok vyberiete a posuniete tablu HTML na jeho kód.
V rozbaľovacej ponuke kliknite na prvok Skontrolovať.
Časť 2 z 2: úprava html
- 1Ak chcete začať odznova, obnovte stránku kedykoľvek. Ak ste s nástrojmi pre vývojárov webu nováčik, pochopte, že nevykonávajú žiadne trvalé zmeny. Vaše úpravy budú viditeľné iba na obrazovke a iba dovtedy, kým stránku nezavriete alebo neobnovíte. Neváhajte experimentovať, aj keď si nie ste istí, čo sa stane.
- 2Text upravíte dvojitým kliknutím na HTML. Dvakrát kliknite na riadok HTML. Zadajte nový text a zmeny uložte stlačením klávesu Enter.
- 3Ďalšie možnosti zobrazíte kliknutím a podržaním strúhanky. Pamätajte si, že panel nástrojov Breadcrumb je vložený medzi celý strom HTML a horný panel nástrojov. Kliknutím a podržaním na ľubovoľnom z prvkov v tomto riadku otvoríte rozsiahlu ponuku. Tu je neúplný sprievodca týmito možnosťami:
- „Upraviť ako HTML“ umožní uzol a všetok jeho obsah upravovať v strome HTML, namiesto toho, aby bolo potrebné upravovať každý riadok jednotlivo.
- „Kopírovať vnútorný HTML“ skopíruje celý obsah uzla, zatiaľ čo „Kopírovať vonkajší HTML“ skopíruje uzol (napríklad <div> alebo <body>
- „Prilepiť →“ vedie k niekoľkým možnostiam umiestnenia, napríklad pred tento uzol alebo za prvé dieťa uzla.
- : hover,: active a: focus zmení vzhľad prvku, keď s ním používateľ interaguje. Presný účinok určuje šablóna so štýlmi CSS (upraviteľné z pravého panela).
- 4Presuňte myšou. Ak chcete zmeniť usporiadanie prvkov v kóde, kliknite a podržte tlačidlo HTML, kým sa nezobrazí prerušovaná čiara. Pohybujte stromom nahor alebo nadol a pustite ho, keď je prerušovaná čiara na požadovanom mieste.
- Vyžaduje to Firefox 39 alebo novší.
- 5Zatvorte panel s nástrojmi pre vývojárov. Ak chcete zavrieť všetky tieto efektné okná, stačí stlačiť X v pravom rohu panela s nástrojmi nad panelom CSS.
Kliknutím na jeden prvok vyberiete a posuniete tablu HTML na jeho kód.
- Panel s nástrojmi môžete otvoriť aj pomocou týchto možností hornej ponuky:
- Windows: Firefox → Web Developer → Prepnúť nástroje
- Mac alebo Linux: Nástroje → Web Developer → Prepnúť nástroje
- Firefox 40 predstavil možnosť skryť tablu CSS, aby vám poskytol viac miesta pri úprave HTML. Vyhľadajte ikonu šípky úplne vpravo v riadku Drobečková navigácia, napravo od vyhľadávacieho panela. Kliknutím na túto ikonu skryjete tablu CSS a ďalším kliknutím ju znova rozbalíte.
- Tablu CSS je tiež možné upravovať, ale to je nad rámec tejto príručky. Tento článok učí základy CSS.
Prečítajte si tiež: Ako nastaviť Mozilla Firefox ako predvolený prehliadač?
Otázky a odpovede
- Aké sú čísla uvedené za obrázkom v programe Inspector po „IMG“?S najväčšou pravdepodobnosťou majú atribúty šírka a výška.
Nezodpovedané otázky
- Ako môžem vykonať trvalé zmeny ukladania v nástrojoch pre vývojárov?
