Etsi tärkeimmistä Firefox-työkaluista Web-kehittäjille

Firefox on jo pitkään ollut web-kehitystyön suosituin selain. Työhön voi tehdä useita hyödyllisiä lisäosia. Tässä viestissä tarkastelemme muutamia lisäosia, jotka mielestäni ovat välttämättömiä asentaa, jos aiot tehdä web-kehitystä. Lisäksi aiomme paljastaa joitakin näiden lisäosien ominaisuuksia, jotka voivat auttaa.

Ensinnäkin meidän on asennettava Firebug.

pyromaani

Firebug on verkkosovelluksen välttämätön asennus. Olettaen, että et tiedä, mistä saada Firebug, voit asentaa sen täällä. Luultavasti sinun on käynnistettävä Firefox uudelleen, ennen kuin se aktivoidaan.

Tämän jälkeen voit tarkastella Firebugia jollakin seuraavista tavoista: seuraa tätä valikkoa Työkalut> Web-kehittäjät> Firebug, napsauta hiiren kakkospainikkeella verkkosivua ja valitse “Tarkista elementti Firebugilla”.

Vaihtoehtoisesti voit löytää Firebug-kuvakkeen Firefoxissa ja napsauttaa sitä, jolloin se näyttää palomuurin ikkunan;

Firebug on aivan sama Chrome-kehittäjien työkalut. siinä on paneeli nähdäksesi HTML-rakenteen ja -tyylit sekä konsolin paneeli, jossa näkyvät virheet, varoitukset ja lokit. Mutta minulla on vielä muutamia vinkkejä, jotka toivottavasti saattaisivat olla hyödyllisiä.

Box-koon säätäminen

HTML-elementti koostuu CSS-laatikkomallista, joka koostuu marginaalista, pehmusteesta ja objektin ulottuvuudesta (leveys / korkeus). On aikoja, jolloin meidän on ehkä muutettava näitä ominaisuuksia. Tässä tapauksessa voit valita yhden niistä elementeistä, joita haluat muuttaa, ja siirry sitten kohtaan Layout paneeli.

Tässä paneelissa on esimerkki CSS-laatikkomallista sekä sen tiedot, mukaan lukien leveys ja korkeus. Vaikka näitä kahta ominaisuutta ei ole määritelty CSS: ssä, tämä työkalu on tarpeeksi älykäs määrittämään arvo. Jos haluat muuttaa niitä, voit yksinkertaisesti klikata arvoa ja lisätä tai pienentää arvoa ylös- tai alas-nuolinäppäimellä.

Lasketut tyylejä

Monissa tilanteissa olet todennäköisesti miettinyt, miksi tiettyjä tyylejä ei sovelleta. Yksi helpompi ja nopeampi tapa, varsinkin kun sinulla on tuhansia rivejä, on tarkastaa se Laskettu tyyli paneeli. Tämä esimerkki osoittaa, että ankkuritunnisteen tekstin väri korvataan .nappi luokka, kun taas taustan .nappi luokka korvaa .button.add.

Kirjasinperheen tarkastaminen (helppo tapa)

Luultavasti usein löydät jotain tällaisesta font-family omaisuutta CSS: ssä, jossa on erilaisia ​​fonttikuvia. Valitettavasti tämä ei kerro meille, mitä fonttia selain ottaa. Jotta tunnistaminen olisi helpompaa, voimme asentaa tämän Firebug-laajennuksen FireFontFamily.

Kun asennus on suoritettu, lataa verkkosivusi, ja nyt voimme selvästi nähdä, mitä kirjasintyyppiä käytetään. Meidän tapauksessamme se on itse asiassa Helvetica Neue (katso kuva).

Suorituskyvyn analysointi

Tämä voi olla leveys, mutta sivuston nopeus on nyt yksi Googlen parametreista (algoritmi) verkkosivujen laadun määrittämisessä. nopeammin ladattua verkkosivustoa pidetään hyvin kehittyneenä ja sisällön suhteen korkeammana. Niinpä nopeus ei ole sellainen, jota pitäisi jättää huomiotta.

Net-paneeli

Ensimmäinen paikka, joka sinun on ehkä tarkastettava sivustosi suorituskyvyn tarkastamiseksi Netto paneeli. Tämä paneeli tallentaa sivustosi HTTP-pyynnön, kun se ladataan. Alla olevassa kuvassa näkyy verkkosivu, joka latautuu 42 pyyntö ja vie 4,36 sekuntia lastata.

Voit sitten lajitella HTTP-pyynnön niiden tyypin mukaan, kuten HTML, CSS ja kuvat.

YSlow!

Lisäksi voit myös asentaa YSlow, laajennus Firebugille Yahoo!:stä. Kun se on aktivoitu, löydät lisäpaneelin, joka on nimenomaan nimeltään Yslow!.

Samankaltainen Netto paneeli, Yslow! tallentaa verkkosivun esitykset ladattaessa, mutta sitten se kertoo myös, miksi verkkosivu on hidas ja mitä voimme tehdä sen ratkaisemiseksi. Tässä esimerkissä suoritetaan testi verkkosivulle ja se pisteytetään 86 yleistä suorituskykyä varten, joka on OK.

Sivunopeus

Voit myös asentaa sivunopeuden Googlesta. Samankaltainen YSlow!, se testaa sivuston nopeuden suorituskykyä, vaikka koetulos voi olla hieman erilainen. Tämä esimerkki näyttää saman verkkosivun sijoitettiin 82 sivunopeuden mukaan.

Web-kehittäjän työkalut

Web-kehittäjätyökalut ovat tietysti web-kehittäjiä varten ja siinä on joukko ominaisuuksia, jotka on pakattu tähän työkaluriviin. Mutta tämä alla on yksi suosikeistani.

Kuvan tarkastus

On aikoja, jolloin saatamme joutua saamaan kuvan tiedot verkkosivulta. Yleisesti näen, että ihmiset tekevät tämän tarttumalla selaimeen tai napsauttamalla kuvaa hiiren kakkospainikkeella ja valitsemalla Näytä kuvatiedot, niin kuin:

Mutta tällä tavalla ei ole varsin tehokasta, kun tarvitsemme tietoa monista kuvista. Tässä tapauksessa voimme hyödyntää kuvat ominaisuus lisäosasta. Tämä ominaisuus on helposti käytettävissä työkalurivin Kuva-valikosta.

Tässä esimerkissä näytetään, kuinka näytämme samanaikaisesti kuvan ulottuvuuden ja kuvatiedoston koon:

Firefoxin sisäänrakennetut työkalut

Viimeisimmissä versioissa Firefox on valtavasti parantanut web-kehittäjien sisäänrakennettuja ominaisuuksia, joista osa on:

Native Inspect Element

Tämä syntyperäinen Tarkastele elementtiä Firefoxista voi näyttää samanlaisilta “Tarkista elementti Firebugissa”, mutta se todella toimii eri tavoin.

Tällä kertaa en mene läpi tätä ominaisuutta enempää, koska se on olennaisesti identtinen Firebug HTML- ja CSS-paneelin kanssa, vaikkakin ulkoasu ja muotoilu eroavat toisistaan. Mutta on yksi erottuva piirre, jota kannattaa kokeilla 3D-näkymä.

käyttämällä 3D-näkymä voit tarkastella verkkosivun rakennetta perusteellisesti. Voit aktivoida tämän näkymän painikkeella “Firefoxin natiivi tarkastaa elementti”. Näin 3D-näkymä näyttää.

En käytä sitä yhtä usein kuin muita ominaisuuksia, mutta Mozillalta olen melko innovatiivinen piirre, jonka myöntän, ja varmasti erittäin hyödyllinen tietyissä tilanteissa.

Web-suunnittelunäkymä

Sen jälkeen, kun Responsive Web Designin suosio on kasvanut, Firefox on aloittanut selaimelle Responsive Bookmarklet. Tämän työkalun avulla voimme testata reagoivaa verkkosivustoa eri näkymävälineissä muuttamatta selainikkunan kokoa.

Tämä näkymä on käytettävissä tästä valikosta: Työkalut> Web Developer> Web Design View. Ja näin näkymä näyttää.

Tyylieditori

Lopuksi, jos työskentelet usein CSS: n kanssa, rakastat todennäköisesti tätä ominaisuutta. Koska versio 11, Firefox oli lisännyt Tyylieditori sen alkuperäisissä kehitystyökaluissa.

Tämä ominaisuus on yhtä viileä kuin Web-suunnittelunäkymä, sen avulla voit muokata CSS: ää, nähdä vaikutuksen välittömästi selaimessa ja tallentaa muutokset, jotka vaikuttavat suoraan CSS-lähdetiedostoon.

Tyylieditori on saatavilla seuraavasta valikosta: Työkalut> Web-kehittäjä> Tyylieditori.

Lopullinen ajatus

Näihin Firefoxin lisäosiin on pakattu joukko ominaisuuksia, ja tässä käsitellyt ominaisuudet ovat vain joitakin ominaisuuksia, joita käytän melko usein web-kehityksen aikana. Saatat kuitenkin olla joitakin muita vinkkejä, jotka voisivat olla hyödyllisiä Web-kehitystuotannon lisäämiseksi Firefoxissa.

Mitä ominaisuuksia käytät usein? Voit jakaa ajatuksesi alla olevaan kommentti-ruutuun.