Kā lietot Firefox tīmekļa izstrādātāju rīkus
Firefox Web Developer izvēlnē ir instrumenti lapu apskatei, patvaļīgas JavaScript koda izpildei un HTTP pieprasījumu un citu ziņojumu apskatei. Firefox 10 pievienoja jaunu inspektora rīku un atjaunināja Scratchpad.
Firefox jaunās tīmekļa izstrādātāju funkcijas apvienojumā ar awesome tīmekļa izstrādātāju pievienojumprogrammām, piemēram, Firebug un Web Developer rīkjoslu, padara Firefox par ideālu tīmekļa pārlūkprogrammu pārlūkprogrammu. Visi rīki ir pieejami Firefox izvēlnē Web Developer.
Lapas inspektors
Pārbaudiet konkrētu elementu ar peles labo pogu noklikšķinot uz tā un atlasot Pārbaudiet (vai nospiežot Q). Varat arī palaist Inspektors no Web Developer izvēlnes.
Ekrāna apakšā redzēsiet rīkjoslu, kuru var izmantot, lai kontrolētu inspektoru. Jūsu izvēlētais elements tiks izcelts un citi lapas elementi tiks pelēkoti.
Ja vēlaties izvēlēties jaunu elementu, noklikšķiniet uz Pārbaudiet pogu rīkjoslā, pārvietojiet peli uz lapas un noklikšķiniet uz sava elementa. Firefox izceļ elementu zem kursora.
Varat pārvietoties starp vecāku un bērnu elementiem, noklikšķinot uz rīkjoslā esošajiem rīvmaizi.
HTML inspektors
Noklikšķiniet uz HTML poga, lai apskatītu pašreiz izvēlētā elementa HTML kodu.
HTML inspektors ļauj jums paplašināt un sakļaut HTML tagus, padarot to viegli vizualizējamu. Ja vēlaties skatīt lapas HTML plakanā failā, varat izvēlēties Skatīt lapas avotu no Web Developer izvēlnes.
CSS inspektors
Noklikšķiniet uz Stils poga, lai redzētu izvēlēto elementu CSS noteikumus.
Ir arī CSS rekvizītu panelis - pārslēgties starp diviem, noklikšķinot uz Noteikumi un Rekvizīti pogas. Lai palīdzētu atrast konkrētas īpašības, rekvizītu panelī ir meklēšanas lodziņš.
Jūs varat rediģēt elementa CSS lidojuma laikā no Noteikumu paneļa. Noņemiet atzīmi no izvēles rūtiņām, lai deaktivizētu noteikumu, noklikšķiniet uz teksta, lai mainītu noteikumu, vai pievienojiet savus noteikumus elementam, kas atrodas rūts augšpusē. Šeit es esmu pievienojis font-weight: bold; CSS noteikums, padarot elementa tekstu treknrakstā.
JavaScript Scratchpad
Scratchpad redzēja arī atjauninājumu ar Firefox 10 un tagad satur sintakses izcelšanu. JavaScript kodu var ievadīt pašreizējā lapā.
Pēc tam noklikšķiniet uz Izpildīt izvºlieties un izvºlieties Palaist. Kods darbojas pašreizējā cilnē.
Web konsole
Tīmekļa konsole aizstāj veco kļūdas konsoli, kas ir novecojusi un tiks noņemta turpmākajā Firefox versijā.
Konsolē tiek rādīti četri dažāda veida ziņojumi, kurus var pārslēgt uz tīkla pieprasījumu, CSS kļūdu ziņojumu, JavaScript kļūdu ziņojumu un tīmekļa izstrādātāju ziņojumu redzamību..
Kas ir tīmekļa izstrādātāja ziņojums? Tas ir ziņojums, kas tiek izdrukāts uz window.console objektu. Piemēram, mēs varētu palaist window.console.log (“Hello World”); JavaScript kods Scratchpad, lai izdrukātu izstrādātāja ziņojumu konsolei. Web izstrādātāji var integrēt šos ziņojumus savā JavaScript kodā, lai palīdzētu veikt atkļūdošanu.
Atjauniniet lapu un redzēsiet radītos tīkla pieprasījumus un citus ziņojumus.
Izmantojiet meklēšanas lodziņu, lai filtrētu ziņas; noklikšķiniet uz pieprasījuma, ja vēlaties redzēt sīkāku informāciju.
Sākot ar Firefox 10, Web konsole var darboties kopā ar lapas inspektoru. Mainīgais $ 0 atspoguļo pašlaik izvēlēto objektu inspektorā. Piemēram, ja vēlaties paslēpt pašlaik izvēlēto objektu, jūs varētu palaist $ 0.style.display = "nav" konsolē.
Ja vēlaties uzzināt vairāk par konsoles lietošanu un tās iebūvētām funkcijām, apmeklējiet Web Console lapu Mozilla izstrādātāju tīkla vietnē.
Iegūstiet vairāk rīku
The Iegūstiet vairāk rīku opcija ved uz Web izstrādātāja rīklodziņa papildinājumu kolekciju vietnē Mozilla Add-Ons. Tajā ir daži no labākajiem tīmekļa izstrādātāju papildinājumiem, tostarp Firebug un Web Developer rīkjosla.
Ja dažus gadus esat lietojis Firefox, jūs varat atcerēties DOM inspektoru. Kopš tā laika Firefox integrētie izstrādātāju rīki ir gājuši tālu.
