Izpētīt Essential Firefox rīkus Web izstrādātājiem

Firefox jau sen ir bijusi vēlamā pārlūkprogramma tīmekļa izstrādei. Lai veiktu darbu, ir vairāki noderīgi papildinājumi. Šajā ziņojumā mēs aplūkosim dažus papildinājumus, kas, manuprāt, ir būtiski instalēt, ja jūs gatavojaties veikt tīmekļa attīstību. Tāpat mēs atklāsim dažas no šo papildinājumu funkcijām, kas var palīdzēt.

Pirmkārt, mums ir jāinstalē Firebug.

Firebug

Firebug ir obligāts instalēšanas papildinājums tīmekļa izstrādei. Pieņemot, ka jūs nezināt, kur iegūt Firebug, varat to instalēt šeit. Iespējams, jums ir nepieciešams restartēt Firefox, pirms tā ir aktivizēta.

Pēc tam varat apskatīt Firebug, izmantojot kādu no šiem veidiem: sekojiet šai izvēlnei Rīki> Web izstrādātāji> Firebug, ar peles labo pogu noklikšķiniet uz tīmekļa lapas un izvēlieties “Pārbaudiet elementu ar Firebug”.

Alternatīvi, jūs varat atrast Firebug ikonas Firefox un noklikšķiniet uz tā, tas parādīs firebug logu;

Firebug ir diezgan identisks Chrome izstrādātāju rīki. tai ir panelis, lai redzētu HTML struktūru un stilus, kā arī konsoles panelis, lai redzētu kļūdas, brīdinājumus un žurnālus. Bet man ir vēl daži padomi, kas, cerams, var noderēt.

Kastes lieluma pielāgošana

HTML elements ir veidots ar CSS kastes modeli, kas sastāv no rezerves, polsterējuma un objekta izmēra (platuma / augstuma). Ir reizes, kad mums var būt nepieciešams mainīt šīs īpašības. Tādā gadījumā jūs varat izvēlēties vienu no elementiem, kurus vēlaties mainīt, un tad dodieties uz Izkārtojums panelis.

Šajā panelī jūs atradīsiet CSS kastes modeļa ilustrāciju kopā ar tās informāciju, tostarp platums un augstums. Pat ja šīs divas īpašības nav norādītas CSS, šis rīks ir pietiekami gudrs, lai noteiktu vērtību. Ja vēlaties tos mainīt, varat vienkārši noklikšķināt uz vērtības un izmantot augšup vai lejup vērsto bulttaustiņu, lai palielinātu vai samazinātu vērtību.

Aprēķinātie stili

Daudzās situācijās, iespējams, domājat, kāpēc daži stili netiek piemēroti. Viens no vienkāršākiem un ātrākiem veidiem, it īpaši, ja jums ir tūkstošiem rindu stilu, ir to pārbaudīt no Aprēķinātais stils panelis. Šis piemērs parāda, ka enkura taga teksta krāsa tiek pārrakstīta .poga klasē, bet fona .poga klasi pārraksta .button.add.

Fontu saimes pārbaude (vienkāršākais veids)

Jūs, iespējams, bieži atrodat kaut ko līdzīgu font-family īpašums CSS ar dažādām fontu grupām. Diemžēl tas nenosaka mums konkrēti, kuru fontu lieto pārlūks. Lai atvieglotu identifikāciju, mēs varam instalēt šo Firebug paplašinājumu FireFontFamily.

Kad instalēšana ir pabeigta, ielādējiet savu tīmekļa lapu, un tagad mēs varam skaidri redzēt, kura fontu saime ir piemērota. Mūsu gadījumā tas patiesībā ir Helvetica Neue (skat. attēlu).

Veiktspējas analīze

Tas varētu būt platums, bet vietnes ātrums tagad ir viens no Google parametriem (algoritms), lemjot par tīmekļa vietnes kvalitāti; Tīmekļa vietne, kas ielādējas ātrāk, tiek uzskatīta par labi attīstītu un augstāku satura ziņā. Tāpēc ātrums nav kaut kas tāds, kas būtu jāņem vērā.

Tīkla panelis

Pirmā vieta, kas, iespējams, būs jāapmeklē, lai pārbaudītu jūsu vietnes veiktspēju Tīkls panelis. Šis panelis ierakstīs jūsu vietnes HTTP pieprasījumu, kad tas ir ielādēts. Tālāk redzamajā attēlā redzama tīmekļa lapa, kas ielādē 42 pieprasījums un paņem apkārt 4,36 sekundes ielādēt.

Pēc tam varat kārtot HTTP pieprasījumu pēc to veida, piemēram, HTML, CSS un attēli.

Yslow!

Turklāt varat instalēt arī YSlow, pagarinājums Firebug no Yahoo !. Pēc tam, kad tas ir aktivizēts, jūs atradīsiet papildu paneli, kas izteikti sauc par Yslow!.

Līdzīgs Tīkls panelis, Yslow! tiks ielādēts tīmekļa lapas izrādes, kad tas tiek ielādēts, bet tad tas arī pateiks, kāpēc tīmekļa lapa ir lēna un ko mēs varam darīt, lai to atrisinātu. Šajā piemērā mēs testējam tīmekļa lapu, un tas tiek iegūts 86 par kopējo veiktspēju, kas tiek uzskatīts par OK.

Lapas ātrums

Varat arī instalēt lapas ātrumu no Google. Līdzīgs Yslow!, tā pārbauda vietnes ātruma veiktspēju, lai gan testa rezultāts var būt nedaudz atšķirīgs. Šis piemērs parāda to pašu tīmekļa lapu ieguva 82 saskaņā ar lapas ātrumu.

Web izstrādātāju rīki

Web izstrādātāju rīki acīmredzami ir tīmekļa izstrādātājiem un šajā rīkjoslā ir virkne funkciju. Bet tas ir viens no maniem favorītiem.

Attēlu pārbaude

Ir reizes, kad mums var būt nepieciešams iegūt attēla informāciju no tīmekļa lapas. Es parasti redzu, ka cilvēki to dara, nokļūstot pārlūkprogrammā vai noklikšķinot ar peles labo pogu uz attēla un izvēloties Skatīt attēla informāciju, tāpat kā:

Taču šāds veids nav pietiekami efektīvs, ja mums ir nepieciešams iegūt informāciju no daudziem attēliem. Tādā gadījumā mēs varam izmantot Attēli funkcija no pievienojumprogrammas. Šī funkcija ir viegli pieejama rīkjoslas izvēlnē Image.

Šis piemērs parāda, kā vienlaicīgi attēlojam attēla izmēru un attēla faila lielumu:

Firefox iebūvētie rīki

Jaunākajās versijās Firefox ir ārkārtīgi uzlabojis savu iebūvēto funkciju tīmekļa izstrādātājiem, daži no tiem ir:

Native Inspect Element

Šī dzimtā Pārbaudiet elementu no Firefox var izskatīties līdzīgs “Pārbaudiet elementu Firebug”, bet tā faktiski darbojas dažādos veidos.

Šoreiz es turpināšu šo funkciju turpināt, jo tā būtībā ir identiska Firebug HTML un CSS panelim, kaut arī ar izkārtojumu un dizainu. Bet ir viena atšķirīga iezīme, kuru ir vērts izmēģināt 3D skats.

Lietošana 3D skats Jūs varat apskatīt tīmekļa lapas struktūru. Lai aktivizētu šo skatu, pogu var atrast apakšējā labajā stūrī “Firefox Native Inspect Element”. Tādā veidā 3D skats izskatās kā.

Es to nelietoju tik bieži kā citas funkcijas, bet tas ir diezgan inovatīva iezīme no Mozilla, ko es atzīstu, un, protams, ļoti noderīga noteiktās situācijās.

Web dizaina skats

Kopš arvien pieaugošā popularitāte, reaģējot uz Web dizains, Firefox ir uzsācis pārlūkprogrammā atsaucīgu grāmatzīmi. Šis rīks ļaus pārbaudīt mūsu atsaucīgo tīmekļa vietni dažādās skatu vietās, nepārveidojot pārlūkprogrammas loga izmērus.

Šis skatījums ir pieejams šajā izvēlnē: Rīki> Web Developer> Web dizaina skats. Un tas izskatās kā skats.

Stila redaktors

Visbeidzot, ja jūs bieži strādājat ar CSS, jūs, iespējams, iemīlēsieties ar šo funkciju. Kopš versijas 11, Firefox pievienoja Stila redaktors vietējos izstrādātāju rīkos.

Šī funkcija ir tikpat atdzist kā Web dizaina skats, tas ļauj jums rediģēt CSS, nekavējoties redzēt pārlūkprogrammas ietekmi un saglabāt izmaiņas, kas tieši ietekmē CSS avota failu.

Stila redaktors ir pieejams šādā izvēlnē: Rīki> Web izstrādātājs> Stila redaktors.

Galīgā doma

Šajās Firefox pievienojumprogrammās ir virkne funkciju, un šeit apskatītās ir tikai dažas no iezīmēm, ko izmantoju diezgan bieži tīmekļa izstrādes laikā. Tomēr jums var būt daži citi padomi, kas varētu būt noderīgi, lai palielinātu tīmekļa izstrādes produktivitāti Firefox.

Kādas funkcijas jūs bieži izmantojat? Jūs varat dalīties savās domās zemāk esošajā komentāru lodziņā.