Google Chrome -laajennusten vivahteita kehittäjille. Google Chrome -laajennukset verkkokehitykseen ja paljon muuta. Mitä Chromen versioita on olemassa?

Selain Google Chrome– erinomainen valinta suunnittelijoille ja web-kehittäjille. GoogleChromen laajennuksilla voit lisätä lisää ominaisuuksia, joka voi auttaa suunnittelussa, virheiden etsimisessä ja muissa sivuston kanssa tehtävissä töissä. Tässä esittelemme parhaat Chrome-laajennukset suunnittelijoille ja kehittäjille.

3.

Resoluutiotesti– Tämä laajennus on suunniteltu tarkistamaan verkkosivuja eri näyttötarkkuuksilla, ja voit määrittää omat tarkkuusasetukset. Tämä työkalu on erittäin kätevä tarkistaaksesi, miltä mallisi näyttää erikokoisilla näytöillä.

4.

Pendule laajentaa Google Chromen sisäänrakennettujen työkalujen toimivuutta. Tämän laajennuksen avulla käyttäjillä on monia lisäominaisuuksia, kuten: rajoitustunnisteiden arviointi W3C:n automatisoitujen verkkopalvelujen avulla, kuvien piilottaminen sivulla, sivulle upotettujen komentosarjojen katseleminen ja monet muut.

5.

Siviiliasu Se tekee vain yhden asian hyvin - se poistaa sivulta kaiken CSS:n. Yksi suosituimmista tavoista arvioida verkkosivun saavutettavuutta on poistaa CSS-tyylit ja verrata sivun luettavuutta tyylien kanssa ja ilman. Tämä lähestymistapa simuloi tilannetta, jossa käyttäjällä on vain osa sivusta näytöllä ja hän voi luottaa vain sivun tunnisteisiin päästäkseen sisältöön.
Vaikka tämä ohjelma luotiin alun perin web-sivujen testaamiseen, voit käyttää sitä suosikkityylejesi katseluun "tyylettömällä" tavalla (joten pomosi ei huomaa sinua katsomasta sitä, kun sinun on suoritettava JavaScript-toiminto).

6.

Jos haluat rajata Web-sivun tiettyjä osia, Image Cropper on ilmeinen valintasi. Tämä ohjelma on yksinkertainen kuin keppi, eikä siinä ole temppuja. Määritä vain alue, jonka haluat leikata, ja sovellus poimii sen. Tarvitsetko pikselitarkkuutta? Jatke näyttää leikattujen kappaleiden koon ja sijainnin, joten voit valita tarvitsemasi koon.

7.

Tämä laajennus on ylpeä siitä, että se on minimalistinen ja yksinkertainen - mikä on hyvä asia, koska ei ole mitään syytä vaikeuttaa Lorem Ipsum -tekstin tuotantoa. Lorem Ipsum -generaattorin avulla voit täyttää kehykset tekstillä, kun suunnittelet esittelysivustoasi.

8.

Vikojen tunnistaminen moottorin sisällä Internet Explorer Trident ei ole hauskaa ollenkaan. Käyttämällä IE-välilehteä voit säästää ainakin vähän aikaa, eikä sinun tarvitse käyttää Internet Exploreria (puhumattakaan siitä, että siinä ei ole paljon laajennuksia) renderöintiongelmien etsimiseen.

9.

jQuery Shellin avulla voit suorittaa JavaScript- ja jQuery-komentoja avoimen verkkosivun yhteydessä. Erittäin hyödyllinen laajennus jQueryn oppimiseen ja kokeiluun.

10.

Tämä sovellus on yhden tempun mestari. Temppu on, että ohjelman avulla voit nopeasti saada minkä tahansa värin Hex- ja RGB-arvot millä tahansa verkkosivulla. Tämä ominaisuus voi olla hyödyllinen, jos sinun on määritettävä, mitä värejä suosikkisivustosi käyttää käyttämättä Photoshopia ja sen Eyedropper-työkalua.

11.

Toiminnon käyttäminen WebEdit, voit asettaa minkä tahansa sivun muokattavaksi (tekemiäsi muutoksia ei tietenkään tallenneta). No miksi sitten tarvitset tätä? Tästä syystä: jos olet luomassa verkkosivustoa ja haluat leikkiä elementeillä tekemättä merkittäviä koodimuutoksia, tämä sovellus on sinulle erittäin hyödyllinen.

12.

Oletko koskaan halunnut tietää, mitä teknologioita, rakenteita ja sovelluksia käyttävät avoin lähdekoodi käyttää tiettyä verkkosivustoa? Kokeneet kehittäjät voivat vastata näihin kysymyksiin opiskelemalla lähde, mutta jos haluat saada vastauksen nopeammin ja helpommin, kokeile Chrome Snifferiä. Chrome Sniffer listaa kaikki tunnetut JavaScript-kehykset/kirjastot (jQuery, MooTools jne.) ja sisällönhallintajärjestelmät (Drupal, WordPress jne.), joita verkkosivusto käyttää.

13.
Silmäpipat on Google Chromen laajennus, jonka avulla voit tunnistaa värit millä tahansa verkkosivulla. Lisäksi ohjelma tarjoaa väripyörän ja värinäytteitä (jotka löytyvät mistä tahansa grafiikkaohjelma), joten voit kokeilla ja muokata värejä löytääksesi haluamasi.

15.

Oikein rakennettu verkkosivu, jolla on hyvät merkinnät, johtaa lopulta siihen, että sivu tuottaa vaikuttavia tuloksia hakukoneissa. Jos kuitenkin haluat arvioida verkkosivustoasi tunnettujen hakukoneoptimoinnin parametrien perusteella, sinun kannattaa kokeilla SEO Site Toolsia, laajennusta, joka tarjoaa sinulle valtavan valikoiman hyödyllisiä SEO-arviointityökaluja ja -ominaisuuksia. Se voi lukea monia parametreja sivulla ja sen ulkopuolella, saada tietoa sosiaalisesta mediasta ja kaikesta muusta.

Eri käyttäjäryhmille on luotu useita versioita. Yksi niistä on ns Google Chrome Developer Edition. Millainen versio tämä on ja miksi sitä tarvitaan? Tästä ja puhumme tässä materiaalissa.

On syytä huomata, että vaihtoehtoisia Chrome-versioita on ilmestynyt pitkään. Ne ovat tämän suositun selaimen mukana melkein julkaisuversiosta lähtien. Mutta kaikki käyttäjät eivät sovellu vaihtoehtoisille vaihtoehdoille.

Tosiasia on, että Chromen "muut" rakennelmat on tarkoitettu alan ammattilaisille: taittosuunnittelijoille, testaajille, kehittäjille ja niin edelleen. Tällaiset selaimet eivät sovellu tavallisille käyttäjille. Ja silti meidän on puhuttava niistä.

Mitä Chromen versioita on olemassa?

Itse asiassa niitä ei ole niin paljon. On kuitenkin vain yksi vakaa. Tämä on juuri se, joka on julkisesti saatavilla. Kuka tahansa käyttäjä voi ladata sen. Mutta on myös vaihtoehtoisia versioita. Katsotaanpa niitä tarkemmin.

Nämä ovat olemassa olevia versioita kaikkien suosikki Google Chromesta. Tässä yhteydessä olemme kuitenkin kiinnostuneita Developer Editionista. Siksi kaikki on otettava huomioon Avainominaisuudet tästä versiosta saat lisätietoja. Vasta sen jälkeen voidaan tehdä johtopäätös.

Developer Editionin ominaisuudet

Tämän tärkein ominaisuus Google-versiot Chrome on kehitystyökalujen saatavuus. Ne ovat hyödyllisiä niille, jotka kehittävät laajennuksia ja lisäosia tälle verkkoselaimelle. Keskivertokäyttäjä eksyy tällaisiin työkaluihin.

Toinen ominaisuus on edistynyt konsoli. Sitä käytetään koodin muokkaamiseen ja käyttöönottoon piilotetut toiminnot selain. Sinun on kuitenkin osattava työskennellä sen kanssa. Pieninkin virhe joukkueessa voi johtaa erittäin vakaviin seurauksiin.

Toinen "temppu" on kaikkien uusimpien innovaatioiden läsnäolo tämä versio Kanariasta. Tämän ansiosta kehittäjät voivat optimoida laajennuksiaan uusia verkkoselaimen ominaisuuksia varten.

Säännölliset päivitykset– toinen Developer Editionin erottuva piirre. Niitä tulee epäsäännöllisesti, mutta vähintään kerran kahdessa viikossa. Joissakin tapauksissa päivitykset voivat saapua kahdessa päivässä. Tämä on kätevä niille, jotka testaavat verkkoselaimen uusia ominaisuuksia.

Johtopäätös

Joten edellä puhuimme siitä, mitä Google Chromen versioita on olemassa, ja keskustelimme yksityiskohtaisesti kehittäjien rakentamisesta. Nyt on selvää, että tämä versio erottuu työkalujoukosta ja edistyneestä konsolista.

On syytä huomata, että tavallisten käyttäjien ei tarvitse asentaa Developer Editionia ollenkaan. Tästä ei tule mitään järkeä. Lisäksi tämä kokoonpano ei ole erityisen vakaa. Jos et ole kehittäjä, on parempi käyttää Stablea.

On olemassa valtava määrä ilmaisia ​​laajennuksia Google-selain Chrome, joka helpottaa elämääsi. Tässä on 20 parasta.

Tässä artikkelissa esittelemme parhaat Google Chrome -laajennukset eri tarkoituksiin – mutta jokainen on suunniteltu helpottamaan työtäsi.

Firefox on ollut pitkään kuuluisa räätälöinnistä ja monista laajennuksistaan, mutta Google Chrome on myös saavuttanut paljon suosiota web-suunnittelijoiden ja kehittäjien keskuudessa viime vuosina. Yksi syy tähän on sen nopeus ja sisäänrakennetut kehittäjätyökalut.

Nyt Chrome-laajennusten kokoelman kehittämisessä, joka laajenee joka päivä, tämä on syy siihen, miksi monet verkkokehittäjät ja suunnittelijat valitsevat tämän selaimen itselleen.

Haluatko tietää lisää tästä? Tutustu luetteloomme.

01. iMacrot Chromelle

Chromen iMacros-laajennuksen avulla voit tallentaa toimintasi ja tallentaa ne.

Verkkokehittäjänä sinun on ehkä tarkistettava verkkosivusi. Samojen asioiden tekeminen uudelleen ja uudelleen voi olla työlästä prosessia. iMacros on kätevä Chrome-laajennus, jonka avulla voit tallentaa toimintosi ja tallentaa ne, mutta sinun ei tarvitse suorittaa toimintoa vain kerran.

Voit sitten tarkistaa sivusi uudelleen ja uudelleen toistaen vaiheet napin painalluksella. Tämä säästää arvokasta aikaa ja antaa sinun keskittyä tärkeämpiin asioihin.

02. Font Playground

Font Playgroundin avulla voit kokeilla paikallisia kirjasimia live-verkkosivuilla.

Jokainen suunnittelija ja kehittäjä löytää tästä laajennuksesta paljon hyödyllistä. Font Playgroundin avulla voit kokeilla paikallisia kirjasimia ja kaikkia Googlen kirjasinkirjastoja aktiivisilla verkkosivuilla ilman, että sinun tarvitsee tehdä muutoksia itse sivuihin.

Hyvä puoli tässä laajennuksessa on, että se sisältää kaikki mahdolliset kirjasinkoot, tyylit ja tehosteet. Voit ensin visualisoida eri fonttivaihtoehdot ennen kuin teet varsinaisia ​​muutoksia koodiin.

03. Mikä kirjasin

Mitä fonttia he käyttävät? What Font Chrome -laajennus voi näyttää sinulle tämän!

Erittäin hyödyllinen Google Chromen laajennus, What Font, jonka avulla kehittäjät ja suunnittelijat voivat määrittää, mitä kirjasimia verkkosivulla käytetään.

Joten jos löydät jossain verkossa fontin, joka näyttää upealta ja haluat käyttää sitä jossakin tulevassa projektissasi, vie hiiri sen päälle, niin tiedät heti, mikä se on.

04. Yslow

YSlow kertoo, mikä hidastaa sivua.

Tällä työkalulla et voi vain tarkistaa, kuinka nopeasti verkkosivu latautuu, se näyttää myös, jos jokin hidastaa sitä.

YSlow testaa verkkosivuja 23:a Yahoo-tiimin kehittämästä 34:stä suorituskykysäännöstä. Tämä on erittäin hyödyllinen työkalu analysoida verkkosivuja, mikä myös ehdottaa tapoja optimoida niiden suorituskykyä.

05. Web-kehittäjä

Chrome Web Developer -laajennus tarjoaa useita hyödyllisiä työkaluja kehittäjille.

Jos olet verkkokehittäjä, voit kysyä itseltäsi: kuinka selvisit tähän asti ilman tätä laajennusta. Se lisää työkalupalkkipainikkeen, jonka avulla Chrome voi käyttää monia hyödyllisiä työkaluja verkkokehittäjille.

Tämä virallinen versio Firefoxille kehitetty Web Developer -laajennus.

06. Web Developer -tarkistuslista

Se korjaa suorituskykyongelmat tässä kätevässä Chrome-työkalussa.

Tämän työkalun avulla voit tarkistaa kaiken, ovatko sivusi SEO-yhteensopivia, käytettävyysyhteensopivia, sekä niiden näkyvyyttä ja suorituskykyä (sivun latausnopeus).

Joten jos sinulta puuttuu esimerkiksi H1-tunniste tai jos sivulta puuttuu metaotsikko tai metakuvaus, Web Developer -tarkistuslistalaajennus ilmoittaa sinulle tästä.

Jotta voit ratkaista tämän ongelman nopeasti. Jos napsautat linkkiä " lisätietoja ja apua» laajennuksen alareunasta löydät tarkemman luettelon.

07. DevTools Autosave

Tallentaa automaattisesti muutokset sivun lähdetiedostoihin (CSS ja JS).

DevTools Autosave on todellinen aarre kaikille kehittäjille. Sen avulla voit tallentaa automaattisesti kaikki sivun CSS- ja JS-lähdetiedostoihin tehdyt muutokset Chrome Dev Tools -ympäristön kautta. Laajennus on helppo asentaa ja käyttää, ja se säästää paljon aikaa.

08. Instant Wireframe

Voit tarkastella WWW-sivujen kehyksiä.

Yhdistä minkä tahansa web-sivun kehyskatselu yhdellä napsautuksella. Tämä Google Chrome -laajennus auttaa verkkokehittäjiä ja suunnittelijoita tarkastelemaan verkkosivuja, olivatpa ne paikallisia tai julkaistuja verkossa, kehyspeittokuvalla.

09. Ripple-emulaattori

Ripple Emulator auttaa verkkosivujen virheenkorjauksessa, DOM-tarkastuksessa ja automaattisessa testauksessa.

Ripple Emulator on monikäyttöinen mobiiliympäristöemulaattori, joka auttaa sinua testaamaan verkkosovellustasi erilaisia ​​laitteita ja näytön resoluutiot.

Ripple Emulator -laajennusta voidaan käyttää yhdessä olemassa olevien kehitystyökalujen kanssa virheenkorjaukseen, DOM-tarkastukseen ja automaattiseen testaukseen.

10. Viiva

Sähköpostikeskustelujen seuranta yhdessä lipussa, tehtävien määrittäminen.

Streak on tärkein CRM- ja tukityökalu Sähköposti Gmail.

Laajennuksen avulla voit yhdistää kaikki sähköpostilaatikot yhdeksi tai järjestää viestien vaihdon seurannan yhdeksi lipuksi, määrittää tehtäviä, jotta voit hallita kommunikaatioprosessia vastapuoliesi kanssa henkilökohtaisesti tai tarjota pääsy tähän muille henkilöille.

11. Hae Stackoverflow

Tämän pakollisen laajennuksen avulla saat nopeita vastauksia kysymyksiisi.

Jos olet verkkokehittäjä, olet varmasti kuullut Stack Overflowsta, paikasta, johon monet kehittäjät kääntyvät erilaisilla verkkoprojektien kehittämiseen liittyvillä kysymyksillä. Jos ei, sinun täytyy ehdottomasti tutustua häneen. Se on todella kukoistava yhteisö, joka kattaa laajan valikoiman aiheita C#:sta ja Javasta PHP:hen ja JQueryyn.

Tämä upea laajennus lisää hakukentän suoraan selaimeesi ja antaa sinun hyödyntää Stack Overflown valtavia resursseja. Pakollinen laajennus!

12. PHP Ninja Manual

Kaikki PHP 5.5:n dokumentaatio selaimessasi.

On todella vaikea muistaa jokaista toimintoa, joten jos olet aiemmin käyttänyt useita tunteja etsiessäsi tiettyjä PHP-toimintoja Googlen kautta, tämä laajennus kiinnittää huomiosi varmasti. PHP Ninja Manual tarjoaa

Saat kaikki PHP 5.5:n dokumentaatiot konkreettisia esimerkkejä kahdeksalla kielellä selaimessasi.

13. PerfectPixel

Tämä laajennus auttaa sinua varmistamaan, että jokainen sivustosi pikseli vastaa suunnittelua.

Suunnittelijat vihaavat tilanteita, joissa he luovat hämmästyttävän mallin, mutta kun se on muutettu koodiksi, jokin ei vastaa alkuperäistä suunnittelua. Perfect Pixel -prosessori on todella täydellinen laajennus verkkokehittäjille, jotka pyrkivät luomaan sivustoja, jotka ovat suunnittelutarkkoja.

Tämän helppokäyttöisen laajennuksen avulla voit sijoittaa puoliksi läpinäkyvän peittokuvan verkkosivun päälle ja suorittaa pikseli-pikselin osumatarkistuksen varmistaaksesi 100-prosenttisen vastaavuuden.

14. Code Cola

Mahdollistaa web-sivun CSS:n muokkaamisen paikallaan.

Tämän työkalun avulla voit tarkastella käsittelemääsi lähdekoodia, mutta se voi toimia myös CSS-editorina. Tämä tarkoittaa, että voit muokata verkkosivujesi CSS-tyyliä paikan päällä ja nähdä muutosten tulokset välittömästi.

15. Chrome Sniffer

Verkkosovellusten ja JavaScript-kirjastojen tarkastus.

Tämän laajennuksen avulla verkkokehittäjät voivat tarkastaa ja tunnistaa verkkosovelluksia sekä tiettyyn projektiin liitettyjä JavaScript-kirjastoja. Laajennus toimii mahdollisimman yksinkertaisesti: osoiteriville ilmestyy kuvake, joka ilmaisee käytetyn kehyksen tai sisällönhallintajärjestelmän version.

16. User Agent Switcher

Tarkista, miltä sivustosi näyttää eri laitteilla.

Loistava työkalu nähdäksesi miltä sivusto näyttää erilaisia ​​tyyppejä laitteet, kuten iPad, iPhone tai Android-laitteet. Tämä voi olla myös erittäin hyödyllistä, kun haluat nähdä sivuston sellaisena kuin hakukoneet sen näkevät.

Riippumatta siitä, mitä olet kuullut Google Chromesta, milloin me puhumme Mitä tulee web-suunnitteluun ja -kehitykseen, Firefox on edelleen paras selain, jossa on ystävällinen kehitysympäristö.

Hitto, Firefoxilla on jopa erityinen versio selaimesta, joka on tehty vain verkkokehittäjille. Näin paljon Mozilla välittää web-suunnittelijoista ja kehittäjistä.

Firefoxilla on myös valtava kokoelma laajennuksia, jotka tekevät selaimesta tehokkaamman maksimaalisen tehon saavuttamiseksi. Tässä on joitain parhaista Firefox-laajennuksista, joilla voit helpottaa verkkokehityselämääsi.

Asenna, testaa ja käytä useimpia näistä laajennuksista. Loppujen lopuksi ne kaikki ovat ilmaisia ​​käyttää!

• Mitä se tekee: Tarkistaa verkkosivut

Firebug on laajennus, jota ilman web-suunnittelijat ja kehittäjät eivät yksinkertaisesti voi elää. Tämä laajennus on kuin parannettu versio Firefoxin mukana tulevasta integroidusta kehittäjäkonsolista. Firebugin avulla voit paljon helpommin tarkastaa verkkosivujen elementtejä ja näyttää, miten asiat toimivat eri sivustoilla.

• Sopii: web-kehittäjille
• Mitä se tekee: asiakasohjelma Firefoxille

FireFTP on FTP/SFTP-asiakasohjelma Firefoxille, jonka avulla voit turvallisesti ladata ja siirtää tiedostoja tietokoneesi ja palvelimen välillä suoraan selaimesta. Tämän lisäosan avulla sinun ei enää koskaan tarvitse hypätä selaimesi ja FTP-asiakassovellusten välillä.

• Sopii: web-kehittäjille ja suunnittelijoille
• Mitä se tekee: analysoi ja tarkista verkkosivuja

Se on all-in-one-laajennus, joka lisää useita hyödyllisiä työkaluja Firefoxiin. Jotkut tämän lisäosan työkaluista ovat CSS-tyylisivujen näyttäminen ja muokkaaminen, tyylien poistaminen käytöstä, virheenkorjaustyökalut jne.

• Mitä se tekee: Värianalyysityökalu

ColorZilla on loistava työkalu, josta web-suunnittelijat pitävät varsin hyödyllisenä. Tässä lisäosassa on pipetti värien valitsemiseen nopeasti verkkosivulta, CSS-gradienttigeneraattori, värianalysaattori, väripaletteja ja paljon muuta.

• Sopii: web-kehittäjille
• Mitä se tekee: Muokkaa verkkosivustoja mukautetulla koodilla

Yli miljoonan Firefox-käyttäjän rakastama Greasemonkey on laajennus, joka tarjoaa loputtomasti hauskaa. Tämän lisäosan avulla voit mukauttaa suosittuja verkkosivustoja muokkaamalla niitä omalla JavaScript-koodillasi. Voit myös nauttia muiden kehittäjien jo luomista skripteistä.

• Paras: Käyttöliittymäsuunnittelijat
• Mitä se tekee: Säätää verkkoelementtien siirtymää

Yksinkertainen mutta hyödyllinen laajennus, jonka avulla voit tarkastella verkkoelementtejä ja nähdä visuaalisesti, kuinka monta pikseliä elementeissä on poissa, luoden koostumuksen läpinäkyvistä kerroksista. Tämän koostumuksen avulla voit määrittää todellisen verkkosivusi vastaamaan peittokuvaa parhaan tuloksen saavuttamiseksi ilman arvailuja.

Jos esimerkiksi yksi Web-sivusi kuvista on päällekkäin toisen objektin kanssa, voit käyttää Pixel Perfectiä määrittääksesi, kuinka monta pikseliä sinun on säädettävä saadaksesi kuvan oikeaan paikkaan.

• Sopii: web-suunnittelijoille
• Mitä se tekee: Lataa kaiken verkkosivulta

Tämä laajennus on nimensä mukainen, koska sen avulla voit ladata kaiken verkkosivulta. Yhdellä napsautuksella voit ladata kaikki verkkosivun kuvat, linkit ja muut tiedot tämän laajennuksen avulla. Lisäyksessä on myös sisäänrakennettu latauskiihdytin, joka optimoi latausnopeuden neljä kertaa.

• Paras: Käyttöliittymäsuunnittelijat
• Mitä se tekee: Tarkista verkkosivut Internet Explorerissa

Usko tai älä, mutta jotkut käyttävät edelleen vanhoja Internet-versiot Explorer käyttää Internetiä. Näissä vanhemmissa selaimissa hyvin toimivien sivustojen luominen on yksi ongelmista, jonka kanssa verkkosuunnittelijat kamppailevat edelleen. Tämän laajennuksen avulla on helppo mukauttaa web-malleja vanhemmille Internet-selaimet Explorer, uuden välilehden luominen IE:ssä.

• Sopii: web-suunnittelijoille ja kehittäjille
• Mitä se tekee: Näyttää sinulle verkkosivustolla käytetystä tekniikasta

Mietitkö, mitä tekniikoita käytettiin suosikkisivustojesi luomiseen? Sitten tämä lisäosa on hyödyllinen sinulle. BuiltWith on laajennus, jonka avulla voit skannata verkkosivustoja löytääksesi, mitä tekniikoita sivulla käytetään. Loistava työkalu kaikille verkkosuunnittelijoille, jotka voivat oppia valmiilta verkkosivustoilta.

• Sopii: web-kehittäjille
• Mitä se tekee: Ottaa Javan käyttöön tai poistaa sen käytöstä

Tämän lisäosan avulla voit helposti ottaa Javan käyttöön tai poistaa sen käytöstä selaimessasi. Se voi myös poistaa käytöstä JavaScriptin, evästeet, animoidut kuvat, Flashin ja paljon muuta verkkosivulta. Tämä on hyödyllinen laajennus paitsi kehittäjille, myös muille tavallisia käyttäjiä parantaa selaimen suojausta ja vähentää kaistanleveyttä.

• Paras: Käyttöliittymäsuunnittelijat
• Mitä se tekee: Mittaa elementit pikseleinä

Tämän lisäosan toiminto on yksinkertainen, sillä voit piirtää virtuaalisen viivaimen web-sivun päälle tai sivun elementin mittaamaan web-sivun elementin leveyttä, korkeutta tai pikselikohdistusta. MeasureIt on hyödyllinen useimmille käyttöliittymäkehittäjille rautalankakehysten luomisessa.

• Sopii: web-suunnittelijoille
• Mitä se tekee: vaihtaa selaimen kielen

Tämä on hyödyllinen työkalu, joka kääntää Firefoxin välittömästi toiselle kielelle. Kaikki selaimessasi, mukaan lukien käyttöliittymä, oikeinkirjoituksen tarkistussanakirja ja verkkosivuston sisältö käännetään valitsemallesi kielelle. Loistava ominaisuus, jota voit käyttää monikielisten verkkosivustojen kehittämisessä.

• Paras: Käyttöliittymäsuunnittelijat
• Mitä se tekee: luo valetekstiä

Tekevän tekstin luominen uusille verkkosivustojen malleille ja prototyypeille on tylsä ​​tehtävä, joka tuskin viihdyttää yhtäkään suunnittelijaa. Tämä laajennus tekee prosessista vähemmän tylsää, koska voit luoda Lorem Ipsum -tekstiä suoraan Firefoxista.

• Sopii: web-kehittäjille
• Mitä se tekee: muokkaa ja luo evästeitä

Tämä lisäosa ei ainoastaan ​​hallitse sivustosi evästeitä, vaan antaa sinun myös helposti muokata ja luoda uusia tiedostoja. Joihinkin laajennuksen ominaisuuksiin kuuluu sisäinen selaus keksit, mahdollisuus vaihtaa verkkotunnusta, mahdollisuus muokata useita evästeitä kerralla ja paljon muuta.

• Paras: Käyttöliittymäsuunnittelijat
• Mitä se tekee: Valitsee värit verkkosivulta

Helppokäyttöinen työkalu, jonka avulla voit valita minkä tahansa web-sivun pikselin värit ja helposti kopioida RGB- tai Hex-värikoodin käytettäväksi omissa projekteissasi. Tämän työkalun kauneus ja visuaalinen käyttöliittymä tekevät aloittelijoille paljon helpompaa oppia väreistä verkkosivuilla.

• Sopii: web-suunnittelijoille ja kehittäjille
• Mitä se tekee: Antaa tietoa verkkosivuston käyttämistä ohjelmistoista

Kuten BuiltWith-lisäosa, Wappalyzer on toinen hyödyllinen laajennus, jonka avulla voit selvittää mitä ohjelmisto käytetty sivustolla. Voit esimerkiksi selvittää, minkä tyyppistä sisällönhallintajärjestelmää sivusto käyttää, mitä käyttöjärjestelmää verkkosivustopalvelin tukee ja paljon muuta.

• Sopii: web-kehittäjille
• Mitä se tekee: Muuttaa selaimen käyttäjäagentin

Haluatko tietää, miltä sivustosi näyttää eri alustoilla ja käyttöjärjestelmillä? Sitten tämä on työkalu, joka on varmasti hyödyllinen sinulle. User-Agent Switcherin avulla voit vaihtaa eri alustojen välillä, kuten Android, Mac, Windows ja tietyt käyttöjärjestelmät vaihtaaksesi selaimesi käyttäjäagenttia.

• Sopii: web-suunnittelijoille ja kehittäjille
• Mitä se tekee: Näyttää esimerkin selaimen muistivälilehden käytöstä

Tämä on kätevä lisäosa, joka auttaa sinua määrittämään, kuinka paljon tietokoneesi resursseista käytetään kukin Firefoxin avoimena välilehtenä. Tämän työkalun avulla voit selvittää, kuinka monta resurssia sivustosi käyttää, ja optimoida sivustosi parhaan suorituskyvyn saavuttamiseksi.

• Soveltuu: web- ja graafisille suunnittelijoille
• Mitä se tekee: Avaa kuvat Photoshopissa

Tämä lisäosa tekee sen, mitä sen nimi sanoo, avaa vain yhdellä napsautuksella kuvat, jotka löydät verkkosivulta käyttämällä Photoshopia. Sinun ei tarvitse ladata kuvaa tai käynnistää Photoshopia, laajennus tekee kaiken tarvitsemasi.

• Paras: Käyttöliittymäsuunnittelijat
• Mitä se tekee: Parantaa HTML-taulukoita

Kaaviot, tilastot, vertailut, taulukot - tämä lisäosa voi tehdä kaiken. Tämän työkalun avulla voit luoda käyttäjäystävällisiä ja kauniita HTML-taulukoita ja -kaavioita.

• Sopii: web-kehittäjille
• Mitä se tekee: SSH-asiakasohjelma Firefoxille

Yleensä sinun on asennettava sovellus suorittaaksesi SSH-päätteen. Nämä sovellukset eroavat yhdestä asiasta käyttöjärjestelmä toisesta. FireSSH toimii kuitenkin kaikilla alustoilla niin kauan kuin sinulla on Firefox. Laajennuksen avulla voit käynnistää SSH-päätteen suoraan selaimesta.

• Paras: Käyttöliittymäsuunnittelijat
• Mitä se tekee: Päivitä verkkosivut automaattisesti

Yksi ärsyttävistä asioista, joita web-suunnittelijat kohtaavat verkkosivustoja kehittäessään, on verkkosivun päivittäminen manuaalisesti jokaisen pienen koodin muutoksen jälkeen. Automaattinen päivitys on laajennus, joka korjaa tämän ongelman sallimalla sinun päivittää automaattisesti yhden tai useamman välilehden Firefoxissa määrittäminsi aikavälein.

• Paras: Käyttöliittymäsuunnittelijat
• Mitä se tekee: Muuttaa Firefox-ikkunoiden kokoa tiettyjä näyttötarkkuuksia varten

Tämän lisäosan avulla voit muuttaa Firefox-ikkunan kokoa tietyillä resoluutioilla nähdäksesi, miltä verkkosivustosi näyttää eri näytöillä. Sinun on asennettava Firefoxin lisäosapalkki, jotta tämä laajennus toimii oikein.

• Sopii: web-suunnittelijoille ja kehittäjille
• Mitä se tekee: etsii tietoa sivun ja sen elementtien fonteista

Font Finder on kätevä työkalu, jonka avulla voit tutkia verkkosivuston elementtejä selvittääksesi ne tärkeää tietoa sivulla käytetyt kirjasimet, kuten kirjasinten perheen nimi, fontin väri, rivivälit, koristeet ja paljon muuta.

• Paras: Käyttöliittymäsuunnittelijat
• Mitä se tekee: tarkistaa verkkosivut eri selaimissa

Tämän lisäosan toiminto on yksinkertainen. Sen avulla voit avata välittömästi minkä tahansa verkkosivun, jota katselet Firefoxissa toisella selaimella yhdellä napsautuksella. Sinun ei tarvitse kopioida URL-osoitteita, avaa jokainen selain yksitellen ja liitä URL-osoitteet avataksesi verkkosivuston.

• Sopii: web-suunnittelijoille ja kehittäjille
• Mitä se tekee: tyhjentää selaimen välimuistin

Tämä lisäosa tyhjentää välimuistin välittömästi Firefox selain(RAM ja DISK) vähentääksesi tietokoneen resurssien käyttöä. Laajennuksen avulla voit tyhjentää välimuistin yksinkertaisesti napsauttamalla painiketta tai painamalla näppäimistön F9-näppäintä. Jos haluat nopeasti tarkastella verkkosivulle tehtyjä muutoksia, tämä lisäosa on erittäin hyödyllinen.

Google Chrome -selaimen kasvavan suosion myötä ilmaantuu laajennuksia, jotka säästävät verkkokehittäjien aikaa antamalla heille mahdollisuuden seurata virheitä ja sivuston suorituskykyongelmia.

Tässä on joitain hyödyllisiä Google Chromen laajennuksia.

Web-kehittäjälaajennus

Haluaisin mainita kätevimmän ja tehokkaimman työkalun verkkokehittäjälle ja web-suunnittelijalle - Verkkokehittäjälaajennus Google Chromelle.

Laajennus lisätään Google Chromen työkalupalkkiin painikkeen muodossa, jossa on rataskuvake, ja se sisältää erilaisia ​​työkaluja verkkosivuston kehittämiseen ja virheenkorjaukseen. Tämä on suositun virallinen sovitus, jonka on kirjoittanut sama kehittäjä.

Laajennuksella on suuri määrä vaihtoehtoja.

Esimerkiksi monet ihmiset vain tarvitsevat selvittää elementin väri näytön näytöllä heksadesimaalimuodossa. Tätä tarkoitusta varten laajennuksessa on erikoistoiminto. Valitse Muut-osiossa Display Color Picker.

Valitsemalla Display Color Picker -vaihtoehdon kursorista tulee risti. Nyt kun napsautat mitä tahansa näytön aluetta selaimen oikeassa alakulmassa, väri näkyy heksadesimaalimuodossa käytettäväksi CSS:ssä.