Kuidas kasutada Firefoxi veebiarendaja tööriistu

Sisukord:

Kuidas kasutada Firefoxi veebiarendaja tööriistu
Kuidas kasutada Firefoxi veebiarendaja tööriistu

Video: Kuidas kasutada Firefoxi veebiarendaja tööriistu

Video: Kuidas kasutada Firefoxi veebiarendaja tööriistu
Video: Tile Vs AirTag Vs Samsung - YouTube 2024, Märts
Anonim
Firefoxi Veebiarenda 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 Veebiarenda 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 veebiarendajate jaoks ideaalseks brauseriks. Kõik tööriistad on Firefoxi menüüs Veebiarenda all.

Leheküljeinspektor

Kontrollige konkreetset elementi, paremklõpsates seda ja valides Kontrollige (või vajutades Q.) Võite ka käivitada Inspektor 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.
Näete ekraani allservas tööriistariba, mida saate inspektori juhtimiseks kasutada. Teie valitud element on esile tõstetud ja lehe muud elemendid muutuvad tuhmiks.
Image
Image

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

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

HTML inspektor

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

Image
Image

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

Image
Image

CSS Inspector

Klõpsake nupul Stiil nuppu, et näha valitud elemendile kohaldatud CSS-i reegleid.

Image
Image

Seal on ka CSS-i omaduste paneel - lülituda nende vahel, klõpsates nupul Reeglid ja Omadused nupud. Spetsiifiliste omaduste leidmiseks on omaduste paneelil otsingukast.

Image
Image

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 ma lisasin font-mass: bold; CSS-i reegel, muutes elemendi teksti paksuks.

Image
Image

JavaScript skriptipad

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

Image
Image

Kui olete, klõpsake nupul Täitke menüü ja vali Jookse Kood töötab praegusel vahekaardil.

Image
Image

Veebikonsool

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

Konsool näitab neli erinevat tüüpi sõnumeid, mille abil saate muuta võrgutaotluste, CSS-i tõrketeadete, JavaScripti veateadete ja veebiarendaja sõnumite nähtavust.
Konsool näitab neli erinevat tüüpi sõnumeid, mille abil saate 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äivitada window.console.log ("Hello World"); Kontoris arendaja sõnumi printimiseks klõpsake Scratchpadis JavaScript-koodi. Veebiarendajad saavad neid sõnumeid JavaScripti koodi integreerida silumiseks.

Lehe värskendamine ja näete loodud võrgutaotlusi ja muid sõnumeid.
Lehe värskendamine ja näete loodud võrgutaotlusi ja muid sõnumeid.
Sõnumite filtreerimiseks kasutage otsingukasti; klõpsake soovi korral, kui soovite näha rohkem üksikasju.
Sõnumite filtreerimiseks kasutage otsingukasti; klõpsake soovi korral, kui soovite näha rohkem üksikasju.
Image
Image

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 käivitada $ 0.style.display = "pole" konsoolis.

Kui olete huvitatud konsooli ja selle sisseehitatud funktsioonide kasutamise kohta, vaadake veebikonsooli lehte Mozilla arendaja võrgustiku veebisaidil.
Kui olete huvitatud konsooli ja selle sisseehitatud funktsioonide kasutamise kohta, vaadake veebikonsooli lehte Mozilla arendaja võrgustiku veebisaidil.

Hankige rohkem tööriistu

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

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

Soovitan: