Vaadake veebiarendajate jaoks olulisi Firefoxi tööriistu

Firefox on pikka aega olnud veebiarenduse eelistatud brauser. Töö tegemiseks on mitmeid kasulikke lisandmooduleid. Selles postituses vaatleme mõningaid lisandmooduleid, mis minu arvates on hädavajalikud, kui soovite veebiarendust teha. Samuti avastame mõned lisandmoodulite funktsioonid, mis võivad aidata.

Esiteks peame installima Firebugi.

Firebug

Firebug on veebiarenduse jaoks kohustuslik lisandmoodul. Eeldades, et te ei tea, kust Firebugit saada, saate selle siin installida. Tõenäoliselt peate enne aktiveerimist Firefoxi taaskäivitama.

Seejärel saate Firebugi vaadata ühel järgmistest viisidest: järgige seda menüüd Tööriistad> Veebi arendajad> Firebug, paremklõpsake veebilehel ja valige “Kontrollige elementi Firebugiga”.

Teise võimalusena võite Firefoxis leida Firebugi ikooni ja klõpsata sellel, see näitab tulemüüri akent;

Firebug on üsna identne Chrome'i arendajate tööriistad. see sisaldab paneeli, et näha HTML-i struktuuri ja stiile, ning ka konsooli paneeli, et näha vigu, hoiatusi ja logisid. Aga mul on veel mõned näpunäited, mis loodetavasti on kasulikud.

Kasti suuruse reguleerimine

HTML-element koosneb CSS-kasti mudelist, mis koosneb marginaalist, polsterdusest ja objekti mõõtmetest (laius / kõrgus). On aegu, kui me peame neid omadusi muutma. Sellisel juhul saate valida ühe elementidest, mida soovite muuta, siis minge Paigutus paneeli.

Selles paneelis leiate CSS-kasti mudeli illustratsiooni koos selle teabega, sh laius ja kõrgus. Kuigi neid kahte omadust ei ole CSS-is täpsustatud, see tööriist on piisavalt väärtuslik, et määrata väärtus. Kui teil on vaja neid muuta, võite lihtsalt väärtusele klõpsata ja noolenuppu üles või alla väärtuse suurendamiseks või vähendamiseks.

Arvutatud stiilid

Paljudes olukordades on te ilmselt mõelnud, miks teatud stiile ei rakendata. Üks lihtsamaid ja kiiremaid viise, eriti kui teil on tuhandeid jooni, on selle kontrollimine Arvutatud stiil paneeli. See näide näitab, et ankurkoodi teksti värv on üle kirjutatud .nuppu klass, samas kui taust .nuppu klassi üle kirjutab .button.add.

Fontide perekonna kontrollimine (lihtne viis)

Tõenäoliselt leiate sageli midagi sellist font-pere CSS-i kinnisvara erinevate fontide perekondadega. Kahjuks ei ütle see meile, millist fonti brauser võtab. Identifitseerimise lihtsustamiseks saame selle Firebugi laienduse installida FireFontFamily.

Pärast installeerimise lõpetamist laadige oma veebileht ja nüüd näeme selgelt, millist fontide perekonda rakendatakse. Meie puhul on see tegelikult Helvetica Neue (vaata pilti).

Toimivuse analüüsimine

See võib olla laius, kuid saidi kiirus on nüüd üks Google'i parameetreid (algoritm) veebisaidi kvaliteedi otsustamisel; kiiremini laaditavat veebisaiti peetakse hästi arenenud ja sisu poolest kõrgemaks. Seega ei tohiks kiirust tähelepanuta jätta.

Net Panel

Esimene koht, mida veebisaidi toimimise kontrollimiseks peate külastama, on Net paneeli. See paneel salvestab teie veebisaidi HTTP-päringu laadimise ajal. Allolev pilt näitab veebilehte, mis laadib 42 taotlus ja võtab ümber 4,36 sekundit laadima.

Seejärel saate sorteerida HTTP päringu nende tüübi järgi nagu HTML, CSS ja pildid.

Yslow!

Lisaks saate installida ka YSlow, Firebugi laiendus Yahoo! -lt. Pärast selle aktiveerimist leiate lisapaneeli, mida nimetatakse selgelt Yslow'iks!.

Sarnane Net paneel, Yslow! salvestab selle laadimise ajal veebilehe esitusviisid, kuid ütleb teile, miks veebileht on aeglane ja mida me saame selle lahendamiseks teha. Selles näites teostame testi veebilehele ja see on hinnatud 86 üldise jõudluse jaoks, mida peetakse OK.

Lehekülje kiirus

Teise võimalusena võite installida ka lehekiiruse Google'ist. Sarnane Yslow!, see testib veebisaidi kiiruse jõudlust, kuigi testitulemus võib olla veidi erinev. See näide näitab, et sama veebileht löödi 82 vastavalt lehe kiirusele.

Veebiarendustööriistad

Veebiarendajate tööriistad on ilmselgelt veebiarendajatele ja sellel tööriistaribal on hulgaliselt funktsioone. Kuid see allpool on üks minu lemmikuid.

Pildi kontroll

On aegu, mil võib-olla peame veebisaidilt pildiandmeid hankima. Tavaliselt näen, et inimesed teevad seda brauseri kaudu komistades või paremklõpsates pildil ja valige Kuva info, meeldib nii:

Kuid see ei ole päris tõhus, kui me vajame teavet paljude piltide kohta. Sel juhul saame seda kasutada Pildid lisandmooduli funktsioon. See funktsioon on hõlpsasti kättesaadav tööriistariba menüüst Pilt.

Ja see näide näitab, kuidas kuvame pilti ja kujutise faili suurust üheaegselt:

Firefoxi sisseehitatud tööriistad

Viimastel versioonidel on Firefoxi veebipõhiste arendajate sisseehitatud funktsioonid tohutult täiustatud, mõned neist on:

Native Inspect Element

See emakeel Kontrollige elementi Firefoxist võib tunduda sarnane “Kontrollige elementi Firebug”, kuid see toimib tegelikult erinevalt.

Seekord ma ei lähe läbi selle funktsiooni edasi, kuna see on sisuliselt identne Firebug HTML ja CSS paneeliga, ehkki erinevusega paigutus ja disain. Kuid on üks eripära, mida tasub proovida 3D-vaade.

Kasutamine 3D-vaade saate vaadata veebilehe struktuuri põhjalikult. Selle vaate aktiveerimiseks leiate nupu parempoolses nurgas “Firefoxi loomulik kontrollimine”. See on nii 3D-vaade paistab nagu.

Ma ei kasuta seda nii tihti kui muid funktsioone, kuid see on Mozilla uuenduslikud funktsioonid, mida ma luban, ja kindlasti väga kasulik teatud olukordades.

Veebidisainivaade

Alates kasvavast populaarsusest veebipõhises disainilahenduses on Firefox käivitanud brauserile vastusliku järjehoidja. See tööriist võimaldab meil testida oma reageerivat veebisaiti erinevates vaatlusportides ilma brauseri akna suurust muutmata.

See vaade on selles menüüs saadaval: Tööriistad> Veebiarendaja> Veebidisainivaade. Ja see näeb välja.

Stiili redaktor

Lõpuks, kui te töötate sageli CSS-iga, siis tõenäoliselt armute seda funktsiooni. Alates versioonist 11 oli Firefox lisanud Stiili redaktor oma emakeelse arendaja tööriistades.

See funktsioon on nii lahe kui Veebidisainivaade, see võimaldab teil CSS-i redigeerida, näha brauseri mõju koheselt ja salvestada muudatused, mis mõjutavad otseselt CSS-lähtefaili.

Stiiliredaktor on saadaval järgmises menüüs: Tööriistad> Veebiarendaja> Stiiliredaktor.

Lõplik mõte

Nendesse Firefoxi lisandmoodulitesse on pakitud hulk funktsioone ning siin käsitletud on vaid mõned funktsioonid, mida veebiarenduse käigus üsna sageli kasutan. Sellegipoolest võib teil olla mõned muud nõuanded, mis võiksid olla kasulikud veebiarenduse tootlikkuse suurendamiseks Firefoxis.

Milliseid funktsioone kasutate sageli? Võite oma mõtteid jagada allpool olevasse märkeruutu.