15 cele mai bune extensii de browser pentru dezvoltatori (2020)

Cea mai mare schimbare pentru 2018 a fost revizuirea majoră a FireFox și, odată cu aceasta, modul în care funcționează suplimentele în acel browser. Ca urmare, multe programe de completare populare nu mai sunt menținute sau au devenit indisponibile.

Majoritatea programelor de completare pentru Firefox sunt disponibile și ca extensii pentru Google Chrome. În acest articol, vom încerca să acordăm preferință suplimentelor / extensiilor cross-browser, ceea ce înseamnă că, în acest context, vor funcționa pe Firefox, Chrome și Chromium. De asemenea, vom acorda preferință extensiilor gratuite care nu sunt cunoscute pentru a transmite informațiile dvs. către terți și care nu sunt acceptate de veniturile din publicitate. Ne vom concentra mai mult pe extensii care nu vă restricționează la o anumită tehnologie de dezvoltare.

Puțini dezvoltatori ar vedea vreun avantaj în utilizarea Microsoft Edge ca browser de dezvoltare, dar este bine pentru testarea post-dezvoltare. Doar puțin peste 4 din 100 de vizitatori ai site-ului pot fi de așteptat să îl folosească, deși acest număr poate fi de așteptat să crească ușor pe măsură ce mai mulți utilizatori abandonează Internet Explorer.

Chiar dacă există mult mai mulți utilizatori Chrome decât sunt utilizatori Firefox, cei din mulțimea IT tind să prefere Firefox, motiv pentru care există mai multe și mai bune extensii destinate dezvoltatorilor din Firefox.

Acum, să analizăm cele mai bune extensii de browser pentru dezvoltatori și de ce ați putea dori să le adăugați în browser.

1. Construită cu

Când vă aflați pe un site foarte bine făcut și doriți să știți cum au reușit, această extensie vă va economisi mult timp și efort să căutați în codul sursă. Link-uri de descărcare: Chrome / crom, Firefox

2. topor

Acesta este un instrument de audit al accesibilității. Este întotdeauna cel mai bine să încercați să vă faceți paginile cât mai accesibile posibil, iar ax vă va ajuta să evitați excluderea accidentală a unui segment de utilizatori de pe site-ul dvs. Link-uri de descărcare: Chrome / crom, Firefox

3. ColorZilla

Un vechi, dar încă un bun, această extensie vă permite să testați culori direct dintr-o pagină, să preluați coduri de culoare, să generați degradeuri și multe altele. Link-uri de descărcare: Chrome / crom, Firefox

4. WebDeveloper

Adaugă câteva extrase utile browserului dvs. pentru controlul CSS, formularelor, imaginilor și informațiilor. Una dintre cele mai populare extensii realizate vreodată. Link-uri de descărcare: Chrome / crom, Firefox

5. Woo Rank

Analizați orice pagină web pentru date SEO. Oferă un raport puternic care vă arată toate internele SEO, inclusiv un scor general SEO, sugestii de îmbunătățire, cloud de cuvinte cheie și multe altele. Link-uri de descărcare: Chrome / crom, Firefox

6. Tab2QR

Generați un cod QR al paginii pe care vă aflați și puteți vizita pagina cu telefonul dvs. doar scanând codul QR. Bun pentru testarea site-urilor receptive, chiar dacă nu le-ați creat. Link-uri de descărcare: Chrome / crom, Firefox

7. HTTP Request Maker

Acest lucru poate fi foarte util pentru testarea răspunsurilor de formular PHP în cazul în care nu doriți cu adevărat să trimiteți formularul (ceea ce ar putea declanșa procesări suplimentare pe care nu trebuie să le testați). Cu acest instrument puteți crea fără efort cereri HTTP. Rețineți că, deși extensiile Chrome și Firefox au același nume și fac aceleași lucruri, sunt create de dezvoltatori diferiți și nu sunt exact la fel. Link-uri de descărcare: Chrome / crom, Firefox

8. Test de performanță a paginii

Obțineți rapid un raport despre performanța paginii dvs. în diferite etape ale călătoriei către browserul dvs. Este cam ca o versiune mai avansată a tracert. Acesta este disponibil pentru moment numai pe Firefox. Există extensii similare pentru Chrome și Chromium, dar nu sunt la fel de bogate în funcții ca aceasta. Link-uri de descărcare: Firefox

9. Instrumentul de numărare a cuvintelor

Acesta poate face de fapt mai mult decât sugerează numele, deoarece vă va spune și câte caractere și câte propoziții se află într-un bloc selectat de text (sau întreaga pagină). Link-uri de descărcare: Chrome / crom, Firefox

10. Lista de verificare a dezvoltatorilor web

Asigurați-vă că urmați cele mai bune linii directoare privind practicile de dezvoltare web cu acest instrument care va arăta unde s-ar putea să fi scăpat standardele dvs. Link-uri de descărcare: Chrome / crom, Firefox

11. Editor Hărți Imagini

Unul dintre trio-urile de extensii excelente ale dezvoltatorului german Heinz-Jürgen Boms, acesta face exact ceea ce spune numele. Puteți genera o hartă a imaginii direct în browser doar urmărind zonele unei imagini pe care doriți să o mapați. Link-uri de descărcare: Firefox

12. Advanced Frame Editor

O altă extensie de la Heinz-Jürgen Boms, aceasta este într-adevăr un instrument de stil CSS în care puteți construi un cadru direct în browser specificând atributele acestuia. Merită să verificați documentaţie înainte de a începe să-l utilizați. Link-uri de descărcare: Firefox

13. Bootstrap Responsive Helper

Aceasta este o extensie mică foarte simplă, care vă ajută să vedeți rapid dacă punctele dvs. de întrerupere funcționează corect și ce nivel de bootstrap este modul curent. Desigur, veți avea nevoie de această extensie numai dacă lucrați efectiv în Bootstrap. Versiunea Chrome este dezvoltată de Jonathan Defraiteur, iar versiunea Firefox este dezvoltată de Kevin Bon. Link-uri de descărcare: Chrome / crom, Firefox

14. Încearcă-l singur HTML5 Editor

Dacă preferați să păstrați lucrurile simple și să vă faceți toată munca dintr-un singur loc, această extensie este pentru dvs. Bogat în funcții, acest editor contextual funcționează direct în browser și acceptă HTML, CSS și JavaScript. Este departe de a fi perfect, dar pentru o editare rapidă și murdară fără deranjul de a deschide o aplicație separată, se face treaba. Link-uri de descărcare: Firefox

15. Ochelari cu raze X

Din punct de vedere tehnic, aceasta nu este o extensie, este de fapt un bookmarklet. Dar funcționează atât de bine, încât nu am putut să o lăsăm de pe listă. Chiar dacă este realizat de Mozilla, funcționează la fel de bine în Chrome, deoarece ambele browsere sunt pe deplin conforme cu standardele. Pentru ao utiliza, va trebui să faceți vizibilă bara de marcaje. Apoi accesați pagina de descărcare, pe care o puteți accesa prin linkurile de mai jos, și trageți butonul X-Ray Goggles pe bara de marcaje. Apoi, vizitați orice site, deschideți marcajul X-Ray Goggles, selectați un element din pagină și puteți edita codul pentru acesta. Link-uri de descărcare: Chrome / crom, Firefox

imaginea antetului prin amabilitatea

Bogdan Rancea

Bogdan este membru fondator al Inspired Mag, acumulând aproape 6 ani de experiență în această perioadă. În timpul liber îi place să studieze muzică clasică și să exploreze artele vizuale. Este destul de obsedat și de fixe. El deține deja 5.