10 Hyödyllisiä Firefox-kehitystyökaluja, joita sinun pitäisi tietää
Firefox on "kehittäjän selain", jossa on monia erinomaisia työkaluja helpottaaksemme työtä. Löydät lisää työkalujen kokoelmasta Firefoxin kehitystyökalujen verkkosivulta ja voivat myös kokeilla Developer Edition -selainta, jossa on enemmän testattavia ominaisuuksia ja työkaluja.
Tämä viesti on lueteltu 10 kätevää työkalua saatat pitää kehittäjän työkalujen kokoelmasta. Olen myös osoittanut, mitä nämä työkalut voivat tehdä GIF: ien kanssa, ja miten pääset niihin nopeasti.
1. Tarkastele vaaka- ja pystysuuntaisia johtimia
Firefoxissa on hallintatyökalu näyttää sekä vaakasuuntaiset että pystysuorat viivaimet pikseliyksiköillä sivulla. Työkalu on hyödyllinen elementtien järjestämiseksi sivulle.
Pääset hallitsijoihin valikon kautta: ☰> Kehittäjä > Kehittäjän työkalupalkki (pikavalinta: Shift + F2). Kun työkalurivi näkyy sivun alareunassa, kirjoita hallitsijat ja paina Tulla sisään.
Jotta tämä näkyy kehittäjätyökalujen ikkunassa, siirry kohtaan "Työkalurivin asetukset". Tarkista "Käytettävissä olevat työkalupainikkeet" -osasta "Vaihda sivun hallitsijat"valintaruutu.
2. Ota kuvakaappauksia käyttämällä CSS-valitsimia
Vaikka Firefox-työkalurivin avulla voit ottaa kuvakaappauksia koko sivusta tai näkyvistä osista, mielestäni CSS-valintamenetelmä on käyttökelpoisempi tallennettaessa kuvakaappauksia yksittäisistä elementeistä sekä elementit, jotka näkyvät hiiren hover-tilassa vain (kuten valikot).
Jos haluat ottaa kuvakaappauksia valikon kautta, siirry kohtaan ☰> Kehittäjä > Kehittäjän työkalupalkki (ShortcutShift + F2). Kun työkalurivi näkyy sivun alareunassa, kirjoita kuvakaappaus --selector any_unique_css_selector ja paina tulla sisään.
Jotta tämä näkyy kehittäjätyökalujen ikkunassa: napsauta "Työkalurivin asetukset" ja "Käytettävissä olevat työkalupalkin painikkeet" -osiosta, tarkista "Ota koko sivun kuvakaappaus " valintaruutu.
3. Valitse värit verkkosivuilta
Firefoxissa on sisäänrakennettu värivalitsin, jonka nimi on "Eyedropper". Siirry "Eyedropper" -työkalun kautta valikkoon siirtymällä kohtaan ☰> Kehittäjä > eyedropper.
Jotta tämä näkyy kehittäjätyökalujen ikkunassa, napsauta "Työkalurivin asetukset" ja "Käytettävissä olevat työkalupainikkeet" -osion tarkistusta "Tartu väristä sivulta"valintaruutu.
4. Näytä sivun asettelu 3D-muodossa
Web-sivujen tarkasteleminen 3D-muodossa auttaa asetteluongelmissa. Voit nähdä eri kerrostetut elementit paljon selkeämmin 3D-näkymässä. Voit tarkastella verkkosivua 3D-muodossa napsauttamalla 3D-näkymän työkalupainiketta.
Jotta tämä näkyy kehittäjätyökalujen ikkunassa, napsauta "Työkalurivin asetukset" ja "Käytettävissä olevat työkalupalkin painikkeet" -osiossa tarkista "3D-näkymä"valintaruutu.
5. Näytä selaimen tyyli
Selaimen tyylit koostuvat kahdesta tyypistä: oletustyyli, jonka selain määrittää jokaiselle elementille, ja selainkohtaiset tyylit (selaimen etuliitteellä varustetut). Tarkastelemalla selaimen tyylejä, joita voit käyttää diagnoosi mahdolliset ohitusongelmat ja myös tutustua olemassa oleviin selainkohtaisiin tyyleihin .
Voit avata "Selaimen tyylejä" -valikossa ☰> Kehittäjä > Tarkastaja. Napsauta sitten "Laskettu" -välilehteä oikealla puolella ja tarkista "Selaimen tyylit" -valintaruutu.
Voit myös avata "Tarkastaja"välilehti Ctrl + Shift + C -pikakuvakkeen kautta ja sitten selaimen tyylit" ".
6. Poista JavaScript käytöstä nykyiselle istunnolle
Parhaan käytännön ja näytönlukijan yhteensopivuuden vuoksi on aina suositeltavaa koodata mikä tahansa sivusto siten, että sen toiminnallisuutta ei estetä javascript-vammaisessa ympäristössä. Voit testata tällaisia ympäristöjä poista JavaScripti sen istunnon aikana, jossa työskentelet.
Voit poistaa nykyisen istunnon JavaScript-toiminnon käytöstä napsauttamalla "Toolbox Options" ja "Advanced settings" -osion kohdassa "Poista JavaScript käytöstä* "-valintaruutu.
7. Piilota CSS-tyyli sivulta
Aivan kuten JavaScript, esteettömyysongelmien vuoksi on parasta suunnitella verkkosivustoja siten, että sivujen pitäisi silti olla luettavissa myös ilman tyylejä. Jos haluat nähdä, miten sivu näyttää tyylikkäästi, voit poistaa ne kehittäjän työkaluista.
Voit poistaa kaikki verkkosivulla sovellettavat CSS-tyylit (sisäiset, sisäiset tai ulkoiset) vain klikkaa listattujen tyylitietojen silmäsymbolia "Tyylieditori" -välilehdessä. Palaa alkuperäiseen näkymään napsauttamalla sitä uudelleen.
Pääset "Style Editor" -valikkoon valitsemalla ☰> Kehittäjä > Tyylieditori (pikanäppäin: Shift + F7.
8. Esikatsele HTML-sisällön vastaus pyyntöön
Firefoxin kehitystyökaluilla on mahdollisuus esikatsele HTML-sisällön tyypin vastauksia. Näin kehittäjä voi esikatsella 302 uudelleenohjausta ja tarkistaa, onko vastauksessa arkaluonteisia tietoja.
Siirry "Esikatselu" -valikkoon siirtymällä kohtaan ☰> Kehittäjä > verkko (pikakuvake: Ctrl + Vaihto + Q. Avaa sitten haluamasi verkkosivu tai lataa nykyinen sivu uudelleen, napsauta haluttu pyyntö (HTML-vastaus) luettelosta pyynnöstä ja napsautaesikatselu"välilehti oikealla puolella.
9. Esikatsele verkkosivua eri näytön kokoisina
Jos haluat testata verkkosivua sen reagointikyvyn suhteen, käytä "Vastaanottavan suunnittelun näkymää", jota voi käyttää ☰> Kehittäjä > Reagoiva muotoilunäkymä tai pikavalinnalla: Ctrl + Shift + M.
Jotta "Responsive Design Mode" -työkalupainike tulee näkyviin, napsauta "Toolbox Options" ja valitse "Available Toolbox Buttons" -osiosta "Responsive Design Mode" -valintaruutu.
10. Suorita JavaScript sivuilla
Nopea JavaScript-suoritusten tekeminen missä tahansa verkkosivussa on vain Firefoxin Scratchpad-työkalu. Pääset "Scratchpad" -valikkoon menemällä; ☰> Kehittäjä > scratchpad tai käytä pikanäppäintä Shift + F4.
Jotta "Scratchpad" -työkalupainike ilmestyy kehitystyökalujen ikkunaan, voit käyttää sitä nopeasti: napsauta "Työkalurivin asetukset"ja alla"Käytettävissä olevat työkalupalkin painikkeet"osa tarkista" Scratchpad " valintaruutu.
