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!
2 hozzászólás a(z) “5 leghasznosabb Chrome extensionök Frontend fejlesztőknek” című bejegyzéshez
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.
Ebből kettő (2-es és 5-ös) alapból benne van az inspectprban.