13Sep

Kuidas kasutada Firefoxi veebiarendaja tööriistu

Firefoxi veebiarenduse menüü sisaldab tööriistu lehtede ülevaatamiseks, suvalise JavaScripti koodi täitmiseks ja HTTP-päringute ja muude sõnumite vaatamiseks. Firefox 10 lisas täiesti uue Inspectori tööriista ja värskendatud Scratchpadi.

Firefoxi uued veebiarendaja funktsioonid koos suurepäraste veebiarendaja lisandmoodulitega nagu Firebug ja veebiarenduste tööriistariba muudavad Firefoxi veebiarendajatele ideaalseks brauseriks. Kõik tööriistad on Firefoxi menüüs Veebiarenda all.

Page Inspector

Kontrollige konkreetset elementi, paremklõpsates seda ja valides Kontrollige ( või vajutage Q ).Võite käivitada ka inspektori veebiarenduse menüüst.

Näete ekraani allservas tööriistariba, mida saate inspektori juhtimiseks kasutada. Teie valitud element on esile tõstetud ja lehe muud elemendid muutuvad tuhmiks.

Kui soovite valida uue elemendi, klõpsake tööriistaribal nuppu Inspect , hõljutage kursorit lehe kohal ja klõpsake oma elemendil. Firefox tõstab esile kursori all oleva elemendi.

Saate navigeerida vanemate ja lasteelementide vahele, klõpsates tööriistariba riba riba.

HTML Inspector

Klõpsake nuppu HTML , et vaadata valitud elemendi HTML-koodi.

HTML-i inspektor võimaldab teil HTML-i silte laiendada ja kollapsa muuta, et oleks lihtne lühidalt visualiseerida. Kui soovite näha lehekülje HTML-vormingus lamedat faili, saate veebiarenduse menüüst valida View Page Source .

CSS Inspector

Klõpsake nupul Style , et näha valitud elemendile rakendatud CSS-i reegleid.

Samuti on olemas CSS-i omaduste paneel - lülitub kahe vahel, klõpsates reeglitele ja omadused nuppe. Spetsiifiliste omaduste leidmiseks on omaduste paneelil otsingukast.

Te saate muuta elemendi CSS-i lennult reeglite paneelilt. Režiimi desaktiveerimiseks tühjendage märkeruudud, märkige reegli muutmiseks ükskõik milline märkeruut või lisage paneeli ülaosale elemendile oma reeglid. Siin lisasin font-weight: bold; CSS reegel, milles elemendi tekst on paksus.

JavaScript Scratchpad

Scratchpad nägi ka värskendust Firefox 10-s ja nüüd sisaldab süntaksi esiletõstmist. Võite sisestada JavaScripti koodi, mida jooksval lehel näidata.

Kui olete, klõpsake menüüd Execute ja valige Run. Kood töötab praegusel vahekaardil.

veebikonsool

Veebikonsool asendab vana vigakonsooli, mis on aegunud ja eemaldatakse tulevases Firefoxi versioonis.

Konsool näitab neli erinevat tüüpi sõnumeid, mille abil saab muuta võrgutaotluste, CSS-i tõrketeadete, JavaScripti veateadete ja veebiarendaja sõnumite nähtavust.

Mis on veebiarendaja sõnum? See on aken.konsooli objektile trükitud sõnum. Näiteks võiksime käitada window.console.log( "Hello World"); JavaScript-kood Scratchpadis, et printida arendaja sõnumit konsooli. Veebiarendajad saavad neid sõnumeid JavaScripti koodi integreerida silumiseks.

Värskendage lehte ja näete genereeritud võrgupäringuid ja muid teateid.

Sõnumite filtreerimiseks kasutage otsingukasti;klõpsake soovi korral, kui soovite näha rohkem üksikasju.

Alates Firefox 10-st võib veebikonsool töötada koos Page Inspectoriga. Muutuja $ 0 esindab valitud inspekteeritava objekti. Näiteks, kui soovid praegu valitud objekti peita, võiksite konsoolis käitada $ 0.style.display = "none" .

Kui soovite saada rohkem teavet konsooli ja selle sisseehitatud funktsioonide kasutamise kohta, vaadake veebikonsooli lehte Mozilla arendaja võrgustiku veebisaidil.

Võta rohkem tööriistu

Võta rohkem tööriistu Võimalus viib teid Veebiarenda tööriistakomplekti lisakogusse Mozilla lisandmoodulite veebisaidile. See sisaldab mõnda parimat veebiarendaja lisandmoodulit, sealhulgas Firebugit ja veebiarendajate tööriistariba.

Kui olete Firefoxi mõne aasta jooksul kasutanud, võite DOMi inspektorit meeles pidada. Sellest ajast alates on Firefoxi integreeritud arendaja tööriistad jõudnud kaugele.