Firefoxi arendajatööriist Inspect Element võimaldab teil täpselt määrata HTML-koodi kõige jaoks, mida oma veebilehel näete. HTML ja sellega kaasnev CSS-laaditabel on pärast nende tööriistade avamist täielikult redigeeritavad. Katsetage soovitud muudatustega ja seejärel värskendage lehte, et naasta veebilehe kavandatud välimusele.
1
Paremklõpsake mis tahes veebilehe elementi. Saate paremklõpsata piltidel, tekstil, taustal või mis tahes muul elemendil. Kui teil pole kahe nupuga hiirt, tehke vasakklõps, hoides all nuppu Control.
2
Klõpsake rippmenüüs nuppu Kontrolli elementi. Akna allossa peaks ilmuma tööriistariba. Tööriistariba alla ilmub ka paan, mis kuvab lehe HTML-koodi.
3
Tuvastage tööriistaribad ja paanid. Kui klõpsate nuppu Kontrolli elementi, avaneb akna allservas mitu paani. Siin on nende kasutusalade ja nimetuste jaotus: ülemine rida on tööriistakasti tööriistariba. Sellel on mitu arendaja tööriista, kuid meid huvitab vasakpoolne inspektor. Hoidke see valitud (sinisega esile tõstetud) kogu selle juhendi jaoks. Tööriistariba all on üks HTML-elementide rida, mis näitab valitud elemendiga seotud täielikku teed. Selle rea all olev paan näitab HTML-puud või “Märgistusvaadet”. lehelt. Valitud elemendi HTML on sellel paanil esile tõstetud ja keskel. Parempoolsel paanil kuvatakse selle lehe CSS-laaditabel.
4
Valige mõni muu element. Kui tööriistariba on avatud, on teise elemendi valimine lihtne. Siin on kolm võimalust seda teha: vastava elemendi esiletõstmiseks hõljutage kursorit HTML-i rea kohal (vajalik Firefox 34+). Selle elemendi valimiseks klõpsake HTML-il. Klõpsake tööriistariba vasakus servas tööriista Vali element: ikoon on kursor ruudu kohal. Elementide esiletõstmiseks liigutage kursorit lehe kohal, seejärel klõpsake elemendi valimiseks.
5
Liikuge koodis. Klõpsake HTML-paanil ükskõik kus. Kasutage koodis liikumiseks klaviatuuri vasakut ja paremat noolt (vajalik Firefox 39+). See on kasulik käsitsi valimiseks liiga väikeste elementide puhul.Hall HTML on seotud elementidega, mida lehel ei kuvata. See hõlmab kommentaare, teatud sõlme (nt
6
Otsige elementi. Otsige leivapuru rea paremas servas otsinguriba (suurendusklaasi ikoon). Klõpsake seda selle laiendamiseks ja seejärel sisestage otsitav HTML-kood. Tippimise ajal ilmub hüpikaken, mis loetleb vastavad elemendid. Selle elemendi valimiseks klõpsake ühel ja kerige HTML-paanil selle koodini.
7
Uuendage lehte, et igal ajal uuesti alustada. Kui olete veebiarendaja tööriistadega uus, mõistke, et need ei tee püsivaid muudatusi. Teie muudatused on nähtavad ainult teie ekraanil ja ainult seni, kuni sulgete lehe või värskendate seda. Ärge kõhelge katsetamast isegi siis, kui te pole kindel, mis juhtub.
8
Teksti redigeerimiseks topeltklõpsake HTML-i. Topeltklõpsake HTML-i real. Sisestage uus tekst ja vajutage muudatuste salvestamiseks sisestusklahvi.
9
Rohkemate valikute nägemiseks klõpsake ja hoidke sõrmeriba. Pidage meeles, et Breadcrumbi tööriistariba on kogu HTML-puu ja ülemise tööriistariba vahel. Laia menüü avamiseks klõpsake ja hoidke all mõnda selle rea elementi. Siin on nende valikute mittetäielik juhend: “Muuda HTML-ina” muudab sõlme ja kogu selle sisu HTML-puus redigeeritavaks, selle asemel, et iga rida eraldi redigeerida.”Kopeeri sisemine HTML” kopeerib kogu sõlme sisu, samas kui ” Kopeeri välimine HTML” kopeerib ka sõlme (nt
10
Tõmba ja lase lahti. Koodi elementide ümberkorraldamiseks klõpsake HTML-i ja hoidke seda all, kuni kuvatakse katkendjoon. Liigutage seda puu otsas üles või alla ja laske lahti, kui katkendjoon on soovitud kohas. Selleks on vaja Firefox 39 või uuemat versiooni.
11
Sulgege arendaja tööriistariba. Kõigi nende uhkete akende sulgemiseks vajutage lihtsalt tööriistariba paremas nurgas CSS-i paani kohal olevat X-i.