Extensii Firefox si Chrome pentru dezvoltarea web

Daca vrei sa urmaresti calea de dezvoltator web, trebuie sa tii cont si de extensii Firefox si Chrome care te pot ajuta. Acestea pot sa iti usureze munca, sa o automatizeze sau sa ii ofere calitate in plus.

Despre Mozilla  Firefox si Google Chrome

Firefox este un navigator de internet (browser in engleza) creat de Mozilla Foundation. Are mai multe versiuni in functie de dispozitiv, dar nu numai. Firefox se regaseste pentru sistemele de operare bazate pe Linux, Windows, Android, iOS si Firefox OS. Functionalitatea sa poate fi extinsa cu extensii, iar design-ul cu teme disponibile gratuit in mare parte.

Este un program compatibil cu orice versiune de Windows, OS X, Linux, Android, Firefox OS, iOS. Foloseste Gecko si SpiderMonkey. Este disponibil in peste 79 de limbi.

In 2015, Firefox a fost al doilea cel mai folosit browser pentru internet. Primul este insa Chrome.

Acest program a fost creat de Google si a fost scris in C++.

Este compatibil cu versiunile mai noi de Android 4, iOS 9, Linux, OS X 10.5 si Windows XP. Foloseste Blink si V8 pentru iOS. Este disponibil in peste 47 de limbi.

Chrome suporta foarte multe extensii si teme la fel ca si Firefox. Are implicit si functia de traducere automata a paginilor Web.

Extensiile Firefox

Sunt disponibile foarte multe extensii variate extensii pentru Firefox si nu doar pentru dezvoltare web.

ColorZilla

Unul dintre cele mai folositoare este ColorZilla. Extensia iti permite sa alegi si sa copiezi culori pe care le vezi pe o pagina de internet. Culoarea poate fi a unei imagini, a unui text sau oricare alt element web. Extensia este gratuita. Ai la dispozitie codurile HSV, RGB, Lab, Hex si CMYK pentru culoarea selectata. Ai si codul CSS disponibil pentru culoarea aleasa. 

Poti sa folosesti functia Eyedropper pentru a selecta culoarea pe care o vrei de pe o pagina web. Ai si navigatorul de palete de culori, generatorul CSS Gradient, analizatorul webpage DOM de culori. Poti sa inspectezi ultimul element, sa dai zoom sau sa adaugi culoarea la favorite.

Empty Cache Button

Daca vrei sa stergi cache-ul browser-ului tau cu un singur click ai nevoie de aceasta extensie. Poti rapid sa stergi modificarile pe care un site le-a facut prin cookies browser-ului tau. Apoi reincarci pagina si poti sa vezi eventualele actualizari/ noutati pe site.

MeasureIt

O extensie foarte folositoare pe care orice dezvoltator web ar trebui sa o aibe este un liniar virtual. MeasureIt te lasa sa masori marimile oricarui element de pe o pagina web si nu numai. Poti masura atat latimea cat si inaltimea meniurilor, imaginilor, tabelelor, elementelor div si altele.

FireFTP

Daca vrei un client FTP integrat in browser fara sa folosesti un alt program instalat pe calculatorul tau, FireFTP este solutia. Are aproape aceleasi functii ca si un client normal FTP.

Firebug

Firebug are extensii care pot fi adaugare la cea principala. Este cea mai folosita extensie de programatori si designeri. Tine locul functiei de inspect element din browser. Poti sa vezi atat erorile cat si codul HTML, JS si CSS al unei pagini web. Poti si sa modifici aceste coduri si sa vezi in direct modificarile. Atentie insa, aceste modifcari nu vor ramane pe site si sunt disponibile doar pe partea de client, nu si pe partea de server. 

Printre extensiile sale enumeram FireDiff care urmareste modificarile in Firebug.

Image Zoom si ImageTweak

Daca vrei sa inspectezi mai bine imaginile, pot da zoom in sau out cu Image Zoom. Iar cu ImageTweak poti sa imbunatatesti atat clip-urile video cat si imaginile pe care apoi le poti folosi pe site-ul tau.

ReloadEvery si Resurrect Pages

Daca vrei sa reincarci automat anumite site-uri la cateva secunde sau minute poti folosi ReloadEvery. Ressurect Pages te ajuta sa „reinvii” paginile vechi sau sterse folosind motoarele de cautare care au indexat pagina respectiva.

Savetexttofile si Save Image

Poti salva texte direct intr-un fisier, intr-un director specific cu Savetexttofile. Poti face acelasi lucru si cu extensia Save Image pentru imagini.

Wappalyzer

O alta extensie super folositoare este Wappalyzer care iti arata detalii despre un site. Iti arata limbajul de programare, platforma de management al continutului, editorul web, script-urile, serverul si multe altele.

URL Fixer

Daca ai probleme cu url-urile, URL Fixer repara url-urile. De exemplu, din gogle.ro, automat, extensia te va redirectiona la google.ro

Foxy Proxy

Poti sa schimbi conexiunea de internet sau serverele proxy cu Foxy Proxy. Poti testa site-urile prin alte companii de internet.

Open with Photoshop

Pentru a deschide o imagine web direct cu Adobe Photoshop foloseste aceasta extensie.

TableTools2

Pentru a copia tabele, randuri, coloane, celule, dar si pentru sortare, cautari si filtrare poti folosi TableTools2. Aceasta extensie poate rearanja, combina sau compara informatiile copiate.

Build Link HTML

Daca vrei sa faci un link HTML cu textul sau titlul selectat foloseste Build Link HTML.

DataScrapper

Ultima extensie pe care o recomandam pentru firefox este DataScrapper care te ajuta sa salvezi informatii de la paginile web in fisiere CSV si apoi poti sa le pui pe site-ul tau.

Extensiile Chrome

Aproape toate extensiile de mai sus pot fi folosite si pentru Chrome. Daca nu au o versiune proprie, atunci poti folosi o alta extensie care le face compatibile cu Chrome. In acest caz ai extensii Firefox si Chrome intr-un pachet.

In plus, la Chrome poti sa gasesti extensii similare sau interesante cum ar fi :

• Clear Cache – similar cu Empty Cache Button care sterge informatiile din browser cu un click;
• Image Alt Text Viewer – care inlocuieste imaginile cu atributul alt text;
• JSONView – care valideaza codurile JSON;
• CSS Shapes Editor – care creeaza si modifica CSS SHAPES cu un editor interactiv;
• Capture Webpage Screenshot Entirely care poate captura pagini web si salva ca si o imagine jpg, gif, bmp, png sau pdf;
• EditThisCookie care te lasa sa administrezi cookie-uri;
• Alexa Traffic Rank pentru a vedea nota Alexa pe site-uri;
• User-Agent Switcher te ajuta sa schimbi browser-ul pentru a testa site-ul propriu;
• IP Address and Domain Information pentru a vedea informatii utile despre IP, Domain Name si ISP;
• Window Resizer pentru a testa site-ul la diferite rezolutii.

Speram ca acest articol v-a fost de ajutor.