Top 15 extensii Google Chrome pentru web designeri 2020

Google Chrome este cel mai recunoscut browser web existent și nu pentru că este creat doar de Google. Este un lider solid în listele de cote de piață ale browserelor web, cu mai mult de 45% avantaje față de cel mai apropiat rival: Mozilla Firefox. Este legat de un avantaj pe piața browserelor web mobile cu WebKit (Safari), echivalentul iOS al Chrome. Chrome este cunoscut pentru motorul său JavaScript solid și stabil, care alimentează tone de tehnologii. În special, cadrul Node.js se bazează pe un motor care alimentează Google Chrome.

Chrome primește tot felul de reputație pentru sine; câțiva aleg să dea vina pe lipsa de securitate și a instrumentelor aprofundate. Dar când vine vorba de o imagine de ansamblu, este greu să îți imaginezi un browser mai bun decât Chrome. Viteza, scalabilitatea, performanța și alte lucruri precum Instrumentele pentru dezvoltatori este ceea ce ține atât designerii web, cât și dezvoltatorii web să rămână la Chrome pentru strategia pe termen lung.

Au fost multe discuții despre siguranța și confidențialitatea extensiilor Google Chrome. Dar ceea ce se rezumă la aceasta este o alegere conștientă de extensii de la dezvoltatori de încredere și startup-uri care doresc de fapt să ofere ceva bun comunității. Extinderea capabilităților Chrome le-a oferit dezvoltatorilor seturile de instrumente și caracteristicile necesare pentru a construi extensii care pot contribui la cultivarea unei productivități mai mari și, mai important, a unei accesibilități mai mari pentru a construi lucruri în browser.

Dezvoltatorii front-end sunt printre cei mai mari câștigători ai utilizării Chrome, deoarece oferă o experiență IDE foarte fluidă atunci când construiește site-uri web și aplicații pentru browser și web mobil. Vom acoperi cele mai bune cincisprezece extensii Google Chrome pentru designeri, dintre care unele ar putea fi utile și dezvoltatorilor. Lista este imparțială și se bazează pe cercetări pe care designerii le-au împărtășit pe unele dintre cele mai populare forumuri comunitare de pe web astăzi.

Comutator utilizator-agent

Un utilizator-agent este amprenta pe care o trimiteți în cadrul fiecărei noi solicitări pe care o faceți unei pagini. Site-ul web vă poate detecta apoi User-Agent și vă poate furniza versiunea corespunzătoare a site-ului, în conformitate cu capacitățile browserului dvs. Aceasta este tehnica standard pentru site-uri web pentru a determina dacă cineva navighează pe un site web de pe un dispozitiv desktop sau mobil. Extensia User-Agent Switcher vă permite să schimbați User-Agent cu orice alt browser sau dispozitiv mobil existent, permițându-vă să experimentați rapid modul în care apar desenele dvs. pe aceste dispozitive și browser. Este o extensie minusculă, care are multă putere pentru a ajuta dezvoltatorii să crească productivitatea, economisindu-le timp de la trecerea înainte și înapoi.

GoFullPage

Când lucrați la un design web sau doriți să capturați ecranul complet al unui site web pentru a vă prezenta clientul, GoFullPage este calea de urmat. Această extensie Chrome simplă de utilizat pentru designerii de web se explică de la sine. Pe scurt, instrumentul captează pagina curentă pe care o vizualizați în întregime. Doar apăsați butonul și gata, nu este nevoie să verificați alte opțiuni. În plus, puteți utiliza și comanda rapidă de la tastatură pentru ca GoFullPage să funcționeze.

Veți vedea că această extensie capturează pagina, parte cu parte, apoi deschideți o filă nouă de unde puteți descărca o imagine (PNG, JPG) sau PDF. Desigur, îl puteți trage și plasa pe desktop. Indiferent dacă este un blog simplu sau un site web complex sau magazin online, GoFullPage surprinde totul fără sudoare.

RescueTime

Când vine vorba de lucrul la designul web, timpul este important. La urma urmei, nu doriți să petreceți prea mult timp concentrându-vă pe distragerea atenției, atunci când puteți face o muncă cu mult mai multă calitate. Datorită RescueTime, o extensie Chrome, puteți urmări timpul petrecut în Chrome pe parcursul întregii zile. Ai fost productiv sau neproductiv? RescueTime vă va ajuta să vă dați seama de lucruri, astfel încât să vă puteți gestiona timpul în consecință.

Nu este vorba doar de urmărirea timpului fiecărui site pe care îl petreceți. RescueTime clasifică, de asemenea, paginile ca „foarte productive” și „foarte distractive”. Mai mult, recunoaște chiar și când te îndepărtezi de computer - în acest caz, încetează urmărirea. Dacă v-ați întrebat vreodată ce faceți în Chrome în fiecare zi, RescueTime vă va ajuta să vă simțiți mai bine cât timp petreceți lucrând și cât de mult timp „doar verificând lucrurile”.

Ștergeți memoria cache

În timp ce Chrome are propria sa funcție, puteți accelera lucrurile atunci când ștergeți memoria cache cu, bine, Ștergeți memoria cache. Puteți să-l adăugați la Chrome cu un singur clic și să începeți să-l utilizați imediat. Când ștergeți memoria cache, instrumentul nu va solicita confirmări suplimentare, nu va crea ferestre pop-up și altele. Cu toate acestea, dacă doriți să eliminați toate datele la nivel global, este necesară permisiunea suplimentară. La urma urmei, nu doriți să curățați totul accidental.

Mai mult, puteți specifica cu ușurință ce anume doriți să ștergeți, cum ar fi cache-ul aplicației, cookie-uri, descărcări, date de formular, istoric, stocare locală, lista continuă. De asemenea, puteți seta ce domeniu să includeți sau să excludeți atunci când ștergeți date. Clear Cache acceptă și perioade de timp. Rapid și simplu, și asta este cel mai important atunci când vă îmbunătățiți fluxul de lucru prin acoperiș.

Rigla

Doriți să aveți o riglă virtuală care să ajute la măsurarea elementelor de pe site-uri web? Dacă acesta este cazul, Ruler este extensia practică Chrome care va face magia. În calitate de proiectant web, acest instrument poate fi foarte util atunci când vă dați seama de dimensiunea fiecărui element, deoarece puteți măsura orice și tot ce este pe fiecare pagină, folosind altceva decât abilitățile mouse-ului.

Puteți adăuga rigla pe site și puteți măsura elementele în pixeli. În plus, puteți utiliza și cursorul mouse-ului ca o riglă, care vă permite să desenați forme specifice pe care doriți să le măsurați. Veți găsi toate informațiile necesare despre dimensiune și dimensiune pe pagina în sine în pixeli. Doar adăugați extensiile și faceți clic pe butonul care apare în colțul din dreapta sus. Gata, acum aveți o riglă virtuală care măsoară paginile, elementele și componentele.

Window Resizer

Cu peste 500.000 de utilizatori activi în toate comunitățile tehnologice, extensia Window Resizer îi ajută pe proiectanți să falsifice diferite tipuri de rezoluții pentru a înțelege mai bine modul în care aceste rezoluții interacționează cu proiectele dvs. Construirea unui site web care funcționează pentru majoritatea populației este esențială. Și această extensie vă ajută să identificați unde pot începe să apară erori, astfel încât să puteți efectua cu promptitudine orice modificări de cod necesare. Puteți schimba rapid lățimea și înălțimea ferestrei browserului, poziția în care se află și există o funcție de shortcode încorporată care vă va crește foarte mult capacitatea de a verifica diferite rezoluții ale ecranului pe măsură ce efectuați codificarea live.

WhatFont

Cu milioane de site-uri web active și o mulțime de site-uri web noi pe care le vizităm în fiecare zi, există întotdeauna ceva care ne atrage atenția, un anumit widget sau o funcție dinamică sau un anumit font care pare să pară remarcabil, dar nu suntem capabili să identifică numele pentru aceasta. Cu extensia WhatFont puteți examina rapid fonturile de pe orice pagină de site web și puteți afla rapid numele fontului, astfel încât să puteți începe căutarea acestuia. În afară de asta, WhatFont ajută, de asemenea, să înțeleagă tipul de servicii care sunt utilizate pentru a servi fonturi, în cazul în care provin din servicii premium sau gratuite, cum ar fi Google Fonts sau Typekit.

Tab Packager

Designerii și chiar dezvoltatorii se luptă cu toții să-și păstreze filele curate și organizate. Când facem lucrări de proiectare, ne uităm în permanență la alte surse, lucruri de cercetare, lucrări de inspirație și exemple despre cum să ne perfecționăm desenele, iar aceste file tind să se acumuleze destul de repede! Cu Tab Packager vă puteți bucura acum de un mod simplu de a vă împacheta toate filele într-o singură adresă URL, și apoi de a le accesa de la adresa URL respectivă. Acest lucru îmbunătățește productivitatea, deoarece ne putem întoarce continuu la lista noastră și putem lua rapid ceea ce avem nevoie, mai degrabă decât să parcurgem filele ghicind în ce constă fiecare filă.

CSS-Shack

Photoshop nu este singurul instrument care se ocupă de straturi. De fapt, fiecare dezvoltator front-end trebuie să se ocupe de straturi în configurațiile CSS. Această extensie Chrome pentru designerii web vă ajută să creați straturi de stil și apoi să exportați aceste straturi în fișierele dvs. CSS pentru acces mai ușor. Puteți construi rapid modele, fireframes sau elemente simple, cum ar fi butoane, în doar câteva clicuri. Fie că este vorba de experimentare aleatorie și testare a sandbox-ului, fie de un ghid complet de stil pe care încercați să îl construiți, CSS-Shack oferă instrumentele care vă vor ajuta în aceste departamente.

Ghid de culori plate

Construiți un nou design web folosind ghidul de stil FLAT, dar nu sunteți sigur de codurile de culoare potrivite de utilizat? Cu extensia Flat Colors Guide simplă de utilizat, îngrijorarea dispare rapid. Instalați extensia și pur și simplu faceți clic pe butonul extensii pentru a încărca culorile care intră de obicei în design-urile FLAT.

ColorZilla

ColorZilla are milioane de utilizatori activi în browserul Mozilla. Și, în sfârșit, este disponibilă și o extensie Google Chrome, care a acumulat deja peste 800.000 de utilizatori activi. Cu ColorZilla puteți evalua rapid culorile pe orice pagină dată. Și puteți utiliza aceste culori pentru a le optimiza și a le încărca în orice alt instrument pe care îl utilizați pentru a vă construi desenele. Accesați cu ușurință culorile pixelilor singulari din pagină, oferindu-vă adâncimea potrivită pentru culorile dvs. în orice situație. Comenzile rapide permit manipularea și optimizarea mai rapidă a culorilor.

Stylebot

Stylebot este un instrument de editare live pentru manipularea codului CSS al oricărui site web și element pe care îl navigați în prezent. Puteți selecta rapid elemente individuale și puteți face modificări de aspect folosind CSS. Schimbați orice vă place folosind instrumente automate încorporate sau scrieți propriul CSS. Acest lucru vă ajută să aflați mai multe despre CSS. De asemenea, vă oferă o privire asupra modului în care funcționează editarea live și cât de repede puteți crea modificările pe care le doriți în design-urile dvs. Cu peste 150.000 de utilizatori, aceasta este extensia pe care ar trebui să o aibă fiecare designer web în setul de instrumente.

EnjoyCSS

EnjoyCSS este un studio de suită de design web direct în browser! Este un generator CSS3 direct care vă permite să gestionați setările UI ale oricărui element la alegere. Creați tranziții, transformați elemente, lucrați cu degradeuri, umbre și multe altele. EnjoyCSS are, de asemenea, o bibliotecă de transformări pre-construite pe care le puteți aplica direct elementelor dvs.

Emmet LiveStyle

Emmet LiveStyle vă actualizează instantaneu foaia de stil a paginii web în timp ce editați fișierul CSS, LESS sau SCSS în editorul de text. Fără salvarea fișierelor sau reîncărcarea paginii: experiență pură în timp real! Și acesta este primul instrument care transferă actualizările de la DevTools înapoi în codul sursă în modul corect. O mulțime de recenzii pentru această extensie menționează că nu își pot imagina fluxul de lucru de proiectare web fără acest instrument.

Dezvoltator web

Mozilla Firefox are propriile instrumente pentru dezvoltatori, la fel ca Google Chrome. Ceea ce s-a întâmplat în ultimii ani este că mulți utilizatori Firefox au trecut la Chrome. Dar se simte totuși că o anumită funcționalitate lipsește sau lipsește în anumite departamente. Una dintre cele mai mari pierderi pentru persoanele care schimbă este pierderea Mozilla Developer Tools. Și din moment ce a existat o cerere atât de mare pentru aceasta, câțiva dezvoltatori s-au reunit și au construit o oglindă exactă a Firefox Dev Tools pentru Chrome. Având deja peste un milion de utilizatori activi, această extensie este un succes în plină expansiune atât pentru designerii consacrați, cât și pentru cei care aspiră să dorească să extindă setul de instrumente pentru browser pentru a lucra cu design-uri web în mediu live.