Az "Inspect Element" egy fejlesztői eszköz a Firefox böngészőben, amellyel nyomon követheti a HTML kódot bármely weboldalon. A weblap HTML és CSS stíluslapjai az "Inspect Element" segítségével szerkeszthetők. Megpróbálhatja szerkeszteni az oldalt tetszése szerint, és visszaállíthatja azt az eredeti állapotába, egyszerűen töltse be újra a szerkesztett weboldalt.
Lépés
Rész 1 /2: Elemek ellenőrzése
1. lépés. Frissítse a Firefoxot (opcionális)
Lehetséges, hogy a Firefox régebbi verzióját használva nem tudja elérni a cikkben tárgyalt funkciókat. A frissítés automatikusan települ, amikor ellenőrzi, hogy a Firefox melyik verzióját használja.
A Firefox 9 és korábbi verziók egyáltalán nem rendelkeznek az "Inspect Element" eszközzel
2. lépés: Kattintson jobb gombbal bármely weboldal elemre
Jobb egérgombbal kattinthat bármely képre, szövegre, háttérre vagy elemre. Ha az egérnek csak egy gombja van, akkor a bal egérgomb és a Control billentyű kombinációja jobb kattintást eredményez.
Lépés 3. Kattintson a legördülő menü "Elem vizsgálata" elemére
Az ablak alján megjelenik egy eszköztár. Az eszköztár alatti panel is megjelenik, és megjeleníti a HTML kódot az aktív oldalon.
4. lépés Ismerje meg a meglévő eszköztárakat és paneleket
Az "Inspect Element" használatakor több panel nyílik meg a böngészőablak alatt. Az alábbiakban az "Elem vizsgálata" eszköztárak és panelek neveit és funkcióit ismertetjük:
- A felső sorban az Eszköztár eszköztár található. Számos eszköz található itt, de a bal oldalon található Inspector gombra összpontosítunk. Győződjön meg arról, hogy ez a gomb aktív (ezt jelzi a gomb színe, amely kékre vált, amikor aktív) ebben az útmutatóban.
- Ez alatt egy sor HTML elemek zsemlemorzsa található, amelyek jelzik az éppen kiválasztott elem helyét.
- A navigációs utasítások alatti ablaktáblán a weboldal HTML -fája vagy "Jelölő nézete" látható. Ebben az ablaktáblában a kijelölt elem HTML -je meg lesz jelölve és középre helyezve.
- A jobb oldali ablaktáblán az aktuális weboldal CSS stíluslapja látható.
5. lépés Válasszon másik elemet
Ha az eszköztár nyitva van, könnyen kiválaszthat más elemeket. Ennek három módja van:
- Vigye az egérmutatót a HTML -sor fölé a kijelölt elem megjelöléséhez (ehhez a funkcióhoz Firefox 34+ szükséges). Kattintson a HTML -re az elem kiválasztásához.
- Kattintson az "Elem kiválasztása" eszközre az eszköztár bal sarkában: egy kurzor alakú ikon látható egy doboz felett. Mozgassa a kurzort a weblapon egy elem megjelöléséhez, és kattintson rá a kiválasztásához.
6. lépés. Kövesse nyomon a HTML kódot
Kattintson bárhová a HTML panelen. A billentyűzet bal és jobb iránygombjaival lépjen át kódról kódra (ehhez a funkcióhoz Firefox 39+ szükséges). Ez a módszer hasznos olyan elemek kiválasztásához, amelyek túl kicsiek ahhoz, hogy a kurzorral kijelölhetőek legyenek.
- A szürkés HTML jelzi azokat az elemeket, amelyek nem jelennek meg az oldalon. Az ebben szereplő elemek megjegyzések, például csomópontok és a CSS megjelenítési tulajdonság által elrejtett egyéb elemek.
- A tartalom megjelenítéséhez vagy elrejtéséhez kattintson a doboz bal oldalán található nyílra. A teljes tartalom megjelenítéséhez tartsa lenyomva az alt="Kép" vagy az opciót, miközben a nyílra kattint.
7. lépés. Keresse meg az elemet
Keresse meg a keresési mezőt (hurok alakú ikon) a panír sor jobb szélén. Kattintson a keresőmező kibontásához, és írja be a keresni kívánt HTML -kódot. Gépelés közben megjelenik egy előugró ablak, amely a megfelelő keresési eredményeket mutatja. Kattintson a keresési eredmények egyik elemére, és görgessen a HTML panelen a keresett kódhoz.
2/2. Rész: HTML szerkesztése
1. lépés: Töltse be újra az oldalt, és kezdje elölről
Ha még nem ismeri a webhelyfejlesztő eszközöket, ne feledje, hogy nem véglegesen módosítja a szerkesztett oldalakat. A szerkesztések csak addig jelennek meg a képernyőn, amíg újra nem tölti be vagy bezárja az oldalt. Bátran kísérletezzen akkor is, ha nem tudja, mi fog történni.
2. lépés: Kattintson duplán a HTML -re a szerkesztéshez
Kattintson duplán a soron belüli HTML -re. Írja be az új szöveget, és nyomja meg az Enter billentyűt a módosítások mentéséhez.
3. lépés: Kattintson és tartsa lenyomva az eszközt a böngészőben, hogy további lehetőségek jelenjenek meg
Ne feledje, hogy a navigációs eszköztár a HTML -fa és a felette található eszköztár között helyezkedik el. Kattintson és tartson lenyomva egy eszközt ebben a sorban további menük megnyitásához. Az alábbiakban egy tipp a rendelkezésre álló lehetőségekről (nem kimerítő):
- A "Szerkesztés HTML -ként" lehetővé teszi az összes HTML -tartalom közvetlen szerkesztését a HTML -fából a sorok szerkesztése helyett.
- A "Belső HTML másolása" a csomóponton belüli teljes tartalmat másolja, míg a "Külső HTML másolása" a tartalmat és a csomópontokat (például
- A "Beillesztés →" számos lehetőséget kínál a másolás beillesztésére, például a csomópont elé vagy a csomópont első gyermeke után.
- : hover,: aktív és: fókusz megváltoztatja az elem megjelenését, amikor a felhasználó interakcióba lép. A módosított effektusok a CSS stíluslapból kerülnek meghatározásra (szerkeszthető a jobb oldali panelről).
4. lépés Húzza és vidd
A kód elemeinek átrendezéséhez kattintson és tartsa lenyomva a HTML -t, amíg egy szaggatott vonal meg nem jelenik. Mozgassa a sort felfelé és lefelé a fán, és engedje el az egérgombot, amikor a vonal a kívánt helyen van.
Ehhez a funkcióhoz Firefox 39 és újabb verziók szükségesek
5. lépés Zárja be a fejlesztői eszköztárat
A teljes elemvizsgálati ablak bezárásához kattintson az X gombra a CSS panel felett található eszköztár jobb felső sarkában.
Tippek
- Az eszköztárat az ablak tetején található menüopciókból is megnyithatja:
- Windows: Firefox → Webfejlesztő → Eszközök váltása
- Mac vagy Linux: Eszközök → Webfejlesztő → Eszközök váltása
- A Firefox 40 opciója elrejti a CSS panelt, így több lehetősége van a HTML szerkesztésére. Keresse meg a nyíl ikont a zsemlemorzsa sor jobb szélén és a keresési mezőtől jobbra. Kattintson erre az ikonra a CSS panel elrejtéséhez, majd kattintson újra a megjelenítéséhez.
- A CSS paneleket is szerkesztheti, de ezek nem szerepelnek ebben a cikkben. A CSS -kód szerkesztésére vonatkozó utasításokat az interneten találja.
