Inspect Elemendi kasutamine Mozilla Firefoxis: 12 sammu

Sisukord:

Inspect Elemendi kasutamine Mozilla Firefoxis: 12 sammu
Inspect Elemendi kasutamine Mozilla Firefoxis: 12 sammu

Video: Inspect Elemendi kasutamine Mozilla Firefoxis: 12 sammu

Video: Inspect Elemendi kasutamine Mozilla Firefoxis: 12 sammu
Video: Google Classroom koolitus 2024, November
Anonim

"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

Kasutage Mozilla Firefoxi elementi Inspect Element 1
Kasutage Mozilla Firefoxi elementi Inspect Element 1

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"

Kasutage Mozilla Firefoxi 2. toimingu elementi Inspect
Kasutage Mozilla Firefoxi 2. toimingu elementi Inspect

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.

Kasutage Mozilla Firefoxi 3. elemendi kontrollielementi
Kasutage Mozilla Firefoxi 3. elemendi kontrollielementi

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.

Kasutage Mozilla Firefoxi 4. elemendi kontrollielementi
Kasutage Mozilla Firefoxi 4. elemendi kontrollielementi

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.
Kasutage Mozilla Firefoxi 5. toimingu elementi Inspect
Kasutage Mozilla Firefoxi 5. toimingu elementi Inspect

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.
Kasutage Mozilla Firefoxi 6. elemendi kontrollielementi
Kasutage Mozilla Firefoxi 6. elemendi kontrollielementi

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.
Kasutage Mozilla Firefoxi 7. toimingu elementi Inspect
Kasutage Mozilla Firefoxi 7. toimingu elementi Inspect

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

Kasutage Mozilla Firefoxi 8. sammu kontrollielementi
Kasutage Mozilla Firefoxi 8. sammu kontrollielementi

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.

Kasutage Mozilla Firefoxi 9. elemendi inspekteerimise elementi
Kasutage Mozilla Firefoxi 9. elemendi inspekteerimise elementi

Samm 2. Topeltklõpsake redigeerimiseks HTML -i

Topeltklõpsake tekstisisest HTML -i. Sisestage uus tekst ja muudatuste salvestamiseks vajutage sisestusklahvi.

Kasutage Mozilla Firefoxi 10. toimingu elementi Inspect
Kasutage Mozilla Firefoxi 10. toimingu elementi Inspect

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).
Kasutage Mozilla Firefoxis elementi Inspect Element 11
Kasutage Mozilla Firefoxis elementi Inspect Element 11

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

Kasutage Mozilla Firefoxi 12. elemendi kontrollielementi
Kasutage Mozilla Firefoxi 12. elemendi kontrollielementi

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.

Soovitan: