Creșteți-vă productivitatea dezvoltatorului web

Ultima actualizare pe 13 octombrie 2020

Dacă îți place să faci dezvoltare web ca mine, ar trebui să știi importanța de a avea instrumente grozave în browserul tău web care să-ți simplifice munca și să-ți sporească productivitatea. Acesta este cazul Google Chrome și al ofertei cuprinzătoare a extensiilor Chrome, care vă va spori productivitatea dezvoltatorului web.

Da, Firefox este un browser excelent pentru dezvoltarea web, iar Firefox Developer Edition este fantastic pentru depanarea și testarea CSS. Cu toate acestea, Chrome are o listă lungă de extensii de instrumente care aduc suport pentru cele mai recente funcții web și instrumente pentru dezvoltatori care îl fac favorit printre mulți dezvoltatori web pentru creșterea productivității dezvoltatorilor web.

Chrome Marketplace are unele dintre cele mai bune extensii, cele mai vechi sau noi, pentru a ajuta dezvoltatorii să dezvolte și să testeze un site web sau o pagină de destinație. Mai jos, veți cunoaște unele dintre cele mai bune extensii pe care le sugerez ca „must-have” în caseta de instrumente pentru dezvoltatori web.

Extensii Chrome care vă sporesc productivitatea dezvoltatorului web

Tag Assistant

Tag Assistant vă ajută să depanați instalarea diferitelor etichete Google, inclusiv Google Analytics, Google Tag Manager etc. Tag Assistant vă permite să verificați dacă ați instalat corect diferite etichete Google pe pagina dvs. Doar navigați la orice pagină, iar Tag Assistant vă va spune ce etichete sunt prezente, va raporta orice erori pe care le găsim și vă va sugera îmbunătățiri care pot fi aduse implementării dvs. Cele mai multe etichete Google sunt verificate, inclusiv Google Analytics, Adwords Conversion Tracking, Google Tag Manager etc.

WhatRuns

Descoperiți ceea ce rulează un site web - cadre, instrumente de analiză, pluginuri WordPress, fonturi - cum doriți. Extensia WhatRuns este la un clic distanță pentru a găsi tehnologiile utilizate pe orice site web pe care îl vizitați. Detectează chiar și instrumentele și serviciile noi și viitoare, de la Instrumente pentru dezvoltatori și rețele publicitare la pluginuri și teme WordPress. Nu doar atât – puteți urmări site-urile web, astfel încât să fiți notificat când folosesc tehnologii noi sau le elimină pe cele existente.

Vue.js Devtools

Numele lui este foarte explicit. Este o extensie Chrome și Firefox DevTools pentru depanarea aplicațiilor Vue.js. Vă permite să inspectați ierarhiile componentelor Vue.js în Instrumentele pentru dezvoltatori Chrome. Veți primi o filă nouă în Chrome DevTools: „Vue”.

Instrumente React pentru dezvoltatori

Ca Vue.js Devtools, React Developer Tools este o extensie Chrome și Firefox DevTools pentru biblioteca open-source React JavaScript. Vă permite să inspectați ierarhiile componentelor React din Chrome Developer Tools. Veți primi două file noi în Chrome DevTools: „Componente” și „Profiler”. Fila Componente vă arată componentele React rădăcină care au fost randate pe pagină și subcomponentele pe care au ajuns să le redea. Selectând una dintre cele trei componente, puteți inspecta și edita elementele de recuzită și starea sa curentă în panoul din dreapta. În breadcrumbs, puteți inspecta componenta selectată, componenta care a creat-o, componenta care a creat-o etc.

Vizualizator JSON Minunat

Această extensie vă ajută să vizualizați răspunsul JSON de la orice site web sau cerere API din browser. Vă prezintă experiențe minunate JSON frumoase. Are multe caracteristici unice care îl fac minunat. Ajută dezvoltatorii să formateze sau să pretific JSON și să parcurgă proprietăți într-o vizualizare grafică. Are o diagramă prietenoasă și interactivă care reprezintă răspunsul serverului dvs. sau JSON furnizat de dvs. în secțiunea de intrare din vizualizarea grafică.

Inspector META SEO

Util pentru a inspecta metadatele găsite în paginile web, de obicei nu sunt vizibile în timpul navigării. Metadatele nu sunt doar metaetichetele HTML obișnuite, ci și etichetele XFN, diferitele microformate, atributul canonic recent introdus, link-urile ne-follow etc. Această extensie se adresează în principal dezvoltatorilor web care trebuie să verifice HTML-ul site-ului lor pentru a urmați Ghidul Google pentru webmasteri, dar chiar și pentru cine este curios despre orice conținut al paginii care de obicei nu este vizibil, dar care poate dezvălui proprietăți interesante ale site-ului. De asemenea, are o opțiune de imprimare/exportare care vă permite să tipăriți sau să salvați raportul ca PDF sau să copiați/lipiți datele în instrumentul preferat.

Vizualizare rapidă în stil HTML

Vizualizare rapidă în stilul elementelor HTML DOM. Doar mișcați mouse-ul și va afișa stilurile țintei.

CSSViewer

CSSViewer este un simplu vizualizator de proprietăți CSS pentru Chrome și Firefox. Pentru a activa CSSViewer, faceți clic pe pictograma barei de instrumente și apoi plasați cursorul pe orice element pe care doriți să îl inspectați în pagina curentă.

Fonturi Ninja

Identificați fonturile de pe orice site web, marcați, încercați și cumpărați-le. Analizează fișierele cu fonturi pentru a obține rezultate mai precise. Treceți peste orice text pentru a obține numele fontului și proprietățile CSS. Fereastra principală de extensie va afișa, de asemenea, un rezumat al tuturor fonturilor utilizate pe un site web. Puteți obține mai multe informații despre fonturi. Verificați câte stiluri sunt disponibile, turnătoria lor și prețul.

Iubesc testarea adaptivă – Mobile/Responsive

Instrument pentru testarea site-urilor web responsive. Extensia ILOVEADAPTIVE Chrome adaugă un buton la bara de instrumente. Când faceți clic pe buton, se va deschide adresa URL la care vă aflați în fila curentă. Caracteristicile principale includ previzualizarea unei adrese URL pe mai multe dispozitive simultan, filtrarea dispozitivelor, filtrarea sistemului de operare, modificarea cantității acestora, mărirea, afișarea panoului iOS, trecerea la peisaj și portret.

Web Vitals

Măsurați valorile pentru un site sănătos. Web Vitals sunt semnale de calitate cheie pentru a oferi un UX excelent pe web (https://web.dev/vitals). Această extensie măsoară Core Web Vitals, oferind feedback instantaneu cu privire la valorile de încărcare, interactivitate și schimbarea aspectului. Este în concordanță cu modul în care aceste valori sunt măsurate de Chrome și raportate altor instrumente Google.

Page Ruler Redux

O riglă Web Developer\Designer pentru a obține dimensiuni perfecte în pixeli și poziționare pentru a măsura elementele pe orice pagină web. Page Ruler Redux este un instrument de bază pentru dezvoltatori și designeri web care vă permite să obțineți măsurători perfecte în pixeli ale elementelor web. Este conceput pentru dezvoltarea front-end a site-ului web, design web sau orice sarcină de care ați putea avea nevoie pentru a obține măsurători perfecte ale pixelilor oricăror elemente web.

Riglă grilă

Creați grile și măsurați cu ușurință distanța. Vă permite să creați grile verticale și orizontale, în stil Photoshop. Are o riglă pentru a măsura distanța dintre grilele dvs.

Conturează-l

Această extensie conturează fiecare element HTML de pe o pagină web, permițându-vă să vedeți marginile elementelor. Extensia acceptă toate culorile curcubeu (roșu, portocaliu, galben, verde, albastru, indigo și violet). De asemenea, are și funcționalitatea de a elimina conturul după ce a fost aplicat.

Emulator de browser mobil

Testați paginile web mobile și receptive pe desktop. Selectați cele mai comune rezoluții ale ecranului mobil cu un singur clic de mouse. Pagina filei active se va deschide într-o fereastră separată.

Ei bine, aceasta este lista mea de extensii Chrome pe care vă sugerez să le aveți în browserul Chrome pentru a vă crește productivitatea dezvoltatorului web. Da, da... Există și alte extensii utile și interesante pe care nu le-am inclus în lista de mai sus. Dar, când va veni momentul, voi continua să explorez și alte extensii fantastice care probabil vor fi enumerate într-un blog viitor.