5 leghasznosabb Chrome extensionök Frontend fejlesztőknek


  • Share on Google+

Indulásakor a Google Chrome böngészője elég nagy hátrányból indult, ám a Firefox és Internet Explorer (edge) dominanciájának megtörésében nagy szerepet játszott a remek bővíthetősége is. Napjainkban sok fejlesztő és dizájner használja a Chrome-ot, azon belül is ezeket a bővítményeket!

1) Full Page Screen Capture

A név kötelez, a Full Page Screen Capture kis pacman ikonja pillanatok alatt lő egy tökéletes képet bármilyen honlapról. Nekünk csak annyi a dolgunk, hogy közben ne mozgassuk az egerünket, és már küldhetjük is át a dizájnernek, ügyfélnek vagy főnöknek a honlapot, amiben valami megfogott minket.

2) Responsive Webdesign Tester

A Chrome egyik legkedveltebb tulajdonsága, hogy az ablak méretével együtt átméretezi a weboldal tartalmát is, ezáltal is szimulálva különféle képernyőmereteket. A Responsive Webdesign Tester ezt emeli a következő szintre, ugyanis ezen kis bővítmény segítségével pontos méretek alapján is megtekinthetünk egy-egy honlapot. Kíváncsi vagy, hogy néz ki a landing page-d iphone-on vagy egy Galaxy tableten? Itt a lehetőség tesztelni, pixeles pontossággal! Minden webfejlesztő eszköztárában kötelező elem ez a bővítmény.

3) Colorzilla

Mindenkivel megtörtént már, hogy látunk egy zseniális színkombinációt, azonban a tényleges színkódok kinyerése macerás, és inkább hagyjuk is a francba. Elvégre csinálni egy screenshotot, aztán azt megnyitni egy képszerkesztőben idő és energia. A Colorzilla ebben segít, egy kattintás áráért megmutatja, hogy adott kép vagy szöveg milyen színben pompázik!

4) Whatfont

Az előző eszközhöz hasonlóan a Whatfont is már meglévő tartalmakból való ihletmerítésre lett kitalálva. Szimpatikus egy betűtípus, de nincs kedved beletúrni a kódba, hogy kiderüljön mi is az? Ez a Chrome bővítmény itt jön képbe, és ismét csak egy pillanat alatt megmondja, milyen betűtípust is rejt az a csodás szöveg! Frontend fejlesztők egyik kedvence ez.

5) UserCSS

Ez eddigi bővítmények inkább voltak kozmetikai jellegűek, ám a UserCSS már inkább a nehézsúlyú kategóriába tartozik. Tegyük fel, hogy van egy félkész honlapunk, amit épp prezentálunk egy kollégának, aki szerint az a margó ott nem 20, hanem inkább 40 pixel méretű kéne, hogy legyen. Ezt frissíteni a CSS fájlban néhány másodperc, ám a UserCSS segítségével a már renderelt honlapba is belenyúlhatunk, azonnali és látványos eredményeket produkálva!

  • szobek
    Válasz
    Szerző
    szobek

    Kedves Ágnes!
    Remek kis kiegészítők, a screen capture valóban jópofa, de felesleges kiegészítőket használnia egy front-end fejlesztőnek, mert a chrome pl rendelkezik colorpickerrel, ( nem kell külön képszerkesztő…) , ami szerintem egy jó kiegészítő és F12-vel hamar el is érhető, valamint a css módosításokat is meg lehet tenni külön kiegészítő nélkül (szintén a developerben), és a font is pillanatok alatt kideríthető. Nyilván kell egy kis tapasztalat hozzá, de a magam részről nem szeretem az ilyen kiegészítőket, mert feleslegesen terhelik a böngészőt.

  • Tamás
    Válasz
    Szerző
    Tamás

    Ebből kettő (2-es és 5-ös) alapból benne van az inspectprban.

Leave a Comment

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..