"Inspect Element" on Firefoxi brauseri arendustööriist, mida saate kasutada HTML -koodi jälgimiseks igal veebilehel. Veebilehe HTML- ja CSS -stiililehti saab redigeerida "Inspect Element" abil. Võite proovida lehte oma soovi järgi muuta ja taastada see endisel kujul, laadides redigeeritud veebilehe lihtsalt uuesti.
Samm
Osa 1 /2: Elementide kontrollimine
Samm 1. Värskendage Firefoxi (valikuline)
Võimalik, et te ei pääse käesolevas artiklis käsitletud funktsioonidele juurde, kui kasutate Firefoxi vanemat versiooni. Värskendus installitakse automaatselt, kui kontrollite, millist Firefoxi versiooni kasutate.
Firefox 9 ja varasemad versioonid ei sisalda tööriista "Inspect Element"
Samm 2. Paremklõpsake mis tahes veebilehe elementi
Saate paremklõpsata mis tahes pildil, tekstil, taustal või elemendil. Kui hiirel on ainult üks nupp, saab vasakklõpsu ja juhtklahvi kombinatsiooniga teha paremklõpsu.
Samm 3. Klõpsake rippmenüüst "Kontrolli elementi"
Akna allosas kuvatakse tööriistariba. Samuti kuvatakse tööriistariba all olev paneel, mis kuvab aktiivsel lehel HTML -koodi.
Samm 4. Tutvuge olemasolevate tööriistaribade ja paneelidega
Kui kasutate elementi "Inspect Element", avaneb brauseriakna all mitu paneeli. Järgnevalt kirjeldatakse tööriistaribade ja paneelide nimesid ja funktsioone jaotises "Kontrolli elementi":
- Ülemisel real on tööriistakasti tööriistariba. Siin on mitmeid tööriistu, kuid keskendume vasakul asuvale nupule Inspektor. Veenduge, et see nupp on kogu juhendis aktiivne (seda näitab nupu värv, mis muutub aktiivseks siniseks).
- Selle all on rida HTML -elementide riivsaia, mis näitavad praegu valitud elemendi asukohta.
- Navigeerimisjuhiste all oleval paanil kuvatakse veebilehe HTML -puu või märgistamisvaade. Sellel paanil märgitakse ja tsentreeritakse valitud elemendi HTML.
- Parempoolsel paanil kuvatakse praeguse veebilehe CSS -stiilileht.
Samm 5. Valige teine element
Kui tööriistariba on avatud, saate hõlpsalt teisi elemente valida. Selleks on kolm võimalust.
- Hõljutage kursorit valitud elemendi märkimiseks HTML -rea kohal (selle funktsiooni kasutamiseks on vajalik Firefox 34+). Selle elemendi valimiseks klõpsake HTML -i.
- Klõpsake tööriistariba vasakus nurgas tööriista "Elementide valimine": sellel on kursori kujuline ikoon kasti kohal. Elemendi märkimiseks liigutage kursorit veebilehel ja klõpsake selle valimiseks.
Samm 6. Jälgige HTML -koodi
Klõpsake HTML -i paanil ükskõik kus. Koodilt koodile liikumiseks kasutage klaviatuuri vasak- ja parempoolset suunaklahvi (see funktsioon nõuab Firefox 39+). See meetod on kasulik elementide valimiseks, mis on kursoriga valimiseks liiga väikesed.
- Hallatud HTML näitab elemente, mida lehel ei kuvata. Sellesse elementi kuuluvad kommentaarid, näiteks sõlmed, ja muud CSS -i kuvamisomadusega peidetud elemendid.
- Sisu kuvamiseks või peitmiseks klõpsake kastist vasakul olevat noolt. Kogu sisu kuvamiseks hoidke noolel klõpsates all klahvi alt="Pilt" või suvandit.
Samm 7. Leidke element
Otsige riivsaia rea paremas nurgas otsinguvälja (silmuse kujuline ikoon). Klõpsake otsinguvälja laiendamiseks ja tippige HTML -kood, mida soovite otsida. Sisestades kuvatakse hüpikaken, mis näitab vastavaid otsingutulemusi. Klõpsake otsingutulemustes elemendil ja kerige HTML -paan otsitava koodini.
Osa 2: HTML -i redigeerimine
Samm 1. Alustamiseks laadige leht uuesti
Kui te pole veebisaitide arendamise tööriistades uus, siis pidage meeles, et te ei tee muudetavaid lehti püsivalt. Teie muudatused kuvatakse ekraanil ainult seni, kuni olete lehe uuesti laadinud või sulgenud. Katsetage julgelt isegi siis, kui te ei tea, mis juhtub.
Samm 2. Topeltklõpsake redigeerimiseks HTML -i
Topeltklõpsake tekstisisest HTML -i. Sisestage uus tekst ja muudatuste salvestamiseks vajutage sisestusklahvi.
Samm 3. Rohkemate valikute kuvamiseks klõpsake tööriista riivsaias ja hoidke seda all
Pange tähele, et riivlehe tööriistariba asub HTML -puu ja selle kohal asuva tööriistariba vahel. Rohkemate menüüde avamiseks klõpsake sellel real tööriista ja hoidke seda all. Allpool on vihje saadaolevatele võimalustele (mitte ammendav):
- „Muuda HTML -ina” võimaldab redigeerida kogu HTML -i sisu HTML -puust otse, mitte muuta iga rida.
- "Copy Inner HTML" kopeerib kogu sisu sõlme sees, samas kui "Copy Outer HTML" kopeerib sisu ja sõlmed (nagu või
- "Kleebi →" avab mitu võimalust koopia kleepimiseks, näiteks enne sõlme või pärast sõlme esimest last.
- : hover,: active ja: focus muudavad elemendi välimust, kui kasutaja suhtleb. Muudetud efektid määratletakse CSS -i laadilehelt (redigeeritav parempoolselt paneelilt).
Samm 4. Lohistage
Koodi elementide ümberkorraldamiseks klõpsake ja hoidke HTML -i all, kuni ilmub punktiirjoon. Liigutage rida puust üles ja alla ning vabastage hiirenupp, kui rida on soovitud kohas.
See funktsioon nõuab Firefox 39 ja uuemaid versioone
Samm 5. Sulgege arendaja tööriistariba
Kogu akna Inspect Element sulgemiseks klõpsake CSS -paneeli kohal asuva tööriistariba paremas ülanurgas nuppu X.
Näpunäiteid
- Tööriistariba saate avada ka akna ülaosas asuvatest menüüvalikutest.
- Windows: Firefox → Veebiarendaja → Vaheta tööriistu
- Mac või Linux: Tööriistad → Veebiarendaja → Vaheta tööriistu
- Firefox 40 -l on võimalus CSS -paneel peita, nii et teil on rohkem ruumi HTML -i redigeerimiseks. Otsige nooleikooni riivsaia rea parempoolsest nurgast ja otsinguväljast paremal. CSS -paneeli peitmiseks klõpsake seda ikooni ja selle kuvamiseks uuesti.
- Saate muuta ka CSS -paneele, kuid neid pole selles artiklis loetletud. CSS -koodi muutmise juhised leiate Internetist.
