Browser pentru dezvoltatori web. Ce browser ar trebui să alegeți? Adăugiri utile pentru dezvoltatorii web

Firefox, ca browser pentru dezvoltarea web, are multe instrumente excelente care vă fac munca pe site-ul dvs. mai ușoară. Ne vom uita la cele 10 funcții cele mai frecvent utilizate pe care dezvoltatorii web le folosesc în acest articol și ne vom uita la instrumentele Firefox Developer. Crede-mă, acest browser, chiar și fără suplimente instalate, are o mulțime de capabilități.

Dacă utilizați browserul Google Chrome, asigurați-vă că verificați următoarea selecție de pluginuri:

Caracteristici pentru dezvoltatori Firefox

Dacă brusc nu aveți acest browser, atunci puteți descărca cea mai recentă versiune a Firefox Developer aici - Descărcați Firefox de pe site-ul oficial.

Ei bine, haideți să vedem care sunt aceste 10 instrumente de browser Firefox pe care le puteți folosi imediat ce îl instalați.

1 Afișați rigla verticală și orizontală

Firefox vă permite să afișați rigle orizontale și verticale direct pe pagină. Această caracteristică este foarte utilă în timpul layout-ului, adică atunci când plasăm elemente în pagină.

Pentru a afișa această linie, trebuie să faceți următoarele:

  1. Pe tastatură, apăsați combinația de taste SHIFT+F2.
  2. În consola care apare în partea de jos a paginii, introduceți cuvântul „rulers”.
    Și apoi apăsați ENTER.
  3. Pentru a dezactiva riglele, introduceți din nou cuvântul „rigle”.

2 Realizarea de capturi de ecran folosind selectoare CSS

Firefox Developer vă permite de fapt să faceți capturi de ecran ale întregii pagini sau doar ale părții vizibile. Dar ceea ce este mai interesant sunt capturile de ecran care folosesc selectoare CSS.

Pentru a face o captură de ecran folosind selectoare CSS, procedați în felul următor:

  1. Din nou, apăsați combinația de taste SHIFT+F2 de pe tastatură, adică porniți consola.
  2. În consola care apare, introduceți expresia „ captură de ecran --selector YOUR_CSS_SELECTOR".
    Și apoi apăsați ENTER. Apoi veți vedea o fereastră în care va trebui să selectați un folder pentru a salva imaginea.

3 Definirea culorii pe pagină

De asemenea, în Firefox Developer există posibilitatea de a determina culoarea în pagină.

4 straturi pe pagină în 3D

Acest instrument vă permite să vedeți erori atunci când formați structura paginii, deoarece aici toate straturile sunt afișate clar și clar.

5 stiluri de browser

Stilurile de browser sunt formate din stilurile pe care browserul le setează implicit și stilurile unui anumit vizitator, adică stiluri cu prefixe. Datorită capacității de a vizualiza stilurile de browser, puteți diagnostica cu ușurință problemele din stilurile dvs. dacă acestea au fost înlocuite dintr-un motiv oarecare.

6 Dezactivați Javascript pentru sesiunea curentă

Este o practică bună să vă testați site-ul cu Javascript dezactivat. Adică, prin această acțiune, simulăm Javascript dezactivat pentru vizitatorul dvs. și vedem site-ul așa cum este vizualizat de o persoană care nu are Javascript activat.

Adică dezactivăm Javascript în timpul sesiunii curente și nu ezitați să-l testăm.

7 Dezactivarea dinamică a CSS

De asemenea, testați-vă site-ul pentru lizibilitate cu CSS dezactivat. Pentru a vedea cum arată pagina dvs. cu CSS dezactivat, o puteți dezactiva în Firefox Developer.

Pentru a dezactiva oricare dintre fișierele de stil, trebuie să deschideți Firefox Developer, mergeți la blocul „Stiluri” și în coloana din dreapta opusă fișierului de stil necesar, faceți clic pe pictograma cu un ochi, astfel încât să fie tăiată.

8 Definirea fonturilor pe o pagină

Uneori trebuie să determinați fontul pe o pagină, dar nu doriți să petreceți mult timp căutând prin codul sursă. Firefox Developer oferă o oportunitate excelentă de a vedea clar ce fonturi sunt folosite pe o pagină și chiar de a afla de unde sunt conectate.

9 Verificarea adaptabilității

O oportunitate cu adevărat relevantă în acest moment. Deoarece toate site-urile se străduiesc să fie adaptabile, iar verificarea folosind servicii terțe nu este întotdeauna convenabilă și necesită mult timp. Acum puteți utiliza verificatorul de răspuns încorporat din Firefox.

Pentru a activa această funcție trebuie să apăsați combinația de taste de pe tastatură: CTRL+SHIFT+M.

10 Executarea Javascript pe o pagină

Rularea rapidă a codului Javascript pe o pagină se poate face cu ușurință folosind Firefox Developer. Există o astfel de funcție ca „Editor Javascript simplu”. Aici puteți scrie orice cod Javascript și va fi executat ca un script obișnuit în interiorul paginii, adică va interacționa cu toate elementele de pe ea.

V Video

Indiferent de ceea ce ați auzit despre Google Chrome, când vine vorba de design și dezvoltare web, Firefox rămâne cel mai bun browser IDE-friendly pe care îl puteți găsi.

La naiba, Firefox are chiar și o versiune specială a browserului creată doar pentru dezvoltatorii web. Acesta este cât de mult îi pasă Mozilla de designeri și dezvoltatori web.

Firefox are, de asemenea, o colecție uriașă de extensii care fac browserul mai puternic pentru un efect maxim. Iată câteva dintre cele mai bune extensii Firefox pe care le puteți folosi pentru a vă ușura viața de dezvoltare web.

Instalați, testați și utilizați majoritatea acestor extensii. La urma urmei, toate sunt libere de utilizat!

  • Ce face: inspectează paginile web

Firebug este o extensie fără care designerii și dezvoltatorii web pur și simplu nu pot trăi. Această extensie este ca o versiune îmbunătățită a consolei integrate pentru dezvoltatori care vine cu Firefox. Firebug vă ajută mult să inspectați elementele de pe paginile web și să vă arate cum funcționează lucrurile pe diferite site-uri.

  • Potrivit pentru: dezvoltatori web
  • Ce face: client pentru Firefox

FireFTP este un client FTP/SFTP pentru Firefox care vă permite să încărcați și să transferați în siguranță fișiere între computer și server direct din browser. Cu acest supliment, nu va mai trebui să săriți niciodată între browser și aplicațiile client FTP.

  • Potrivit pentru: dezvoltatori web și designeri
  • Ce face: analizează și verifică paginile web

Este o extensie all-in-one care adaugă o serie de instrumente utile la Firefox. Unele dintre instrumentele incluse în acest supliment sunt afișarea și editarea foilor de stil CSS, dezactivarea stilurilor, instrumentele de depanare etc.

  • Ce face: Instrument de analiză a culorii

ColorZilla este un instrument grozav pe care designerii web front-end îl vor găsi destul de util. Acest supliment are un pipetă pentru alegerea rapidă a culorilor pe o pagină web, un generator de gradient CSS, un analizor de culori, palete de culori și multe altele.

  • Potrivit pentru: dezvoltatori web
  • Ce face: modificați site-urile web cu cod personalizat

Îndrăgit de peste un milion de utilizatori Firefox, Greasemonkey este o extensie care vă va oferi distracție fără sfârșit. Acest supliment vă permite să personalizați site-uri web populare prin editarea lor folosind propriul cod JavaScript. De asemenea, vă puteți bucura de scripturi deja create de alți dezvoltatori.

  • Cel mai bun pentru: designeri de interfețe
  • Ce face: ajustează offset-ul elementelor web

Un plugin simplu, dar util, care vă permite să inspectați elementele web și să vedeți vizual câți pixeli sunt opriți în elemente, creând o compoziție cu straturi transparente. Folosind această compoziție, puteți configura pagina web reală pentru a se potrivi cu suprapunerea pentru cel mai bun rezultat, fără nicio presupunere.

De exemplu, dacă una dintre imaginile de pe pagina dvs. web se suprapune cu un alt obiect, puteți utiliza Pixel Perfect pentru a determina câți pixeli trebuie să ajustați pentru a obține acea imagine la locul potrivit.

  • Potrivit pentru: designeri web
  • Ce face: încarcă totul dintr-o pagină web

Acest plugin se ridică la înălțimea numelui, permițându-vă să descărcați totul de pe o pagină web. Cu un singur clic, puteți descărca toate imaginile, linkurile și alte date conținute într-o pagină web folosind această extensie. Suplimentul are, de asemenea, un accelerator de descărcare încorporat care optimizează viteza de descărcare de patru ori.

  • Cel mai bun pentru: designeri de interfețe
  • Ce face: Verificați paginile web în Internet Explorer

Credeți sau nu, există oameni care încă folosesc versiuni mai vechi de Internet Explorer pentru a accesa Internetul. Crearea de site-uri care funcționează bine în aceste browsere mai vechi este una dintre problemele cu care se confruntă în continuare designerii web. Acest plugin facilitează personalizarea designului web pentru browserele Internet Explorer mai vechi prin crearea unei noi pagini cu filă în IE.

  • Potrivit pentru: designeri web și dezvoltatori
  • Ce face: vă arată despre tehnologia utilizată pe site

Te întrebi ce tehnologii au fost folosite pentru a crea site-urile tale preferate? Atunci acest supliment vă va fi util. BuiltWith este o extensie care vă permite să scanați site-uri web pentru a găsi ce tehnologii sunt utilizate pe pagină. Un instrument excelent pentru toți designerii web care aspiră să învețe de pe site-uri web gata făcute.

  • Potrivit pentru: dezvoltatori web
  • Ce face: pornește sau dezactivează Java

Acest supliment vă permite să activați sau să dezactivați cu ușurință Java în browser. De asemenea, poate dezactiva Javascript, module cookie, imagini animate, Flash și multe altele pe pagina web. Acesta este un plugin util nu numai pentru dezvoltatori, ci și pentru utilizatorii obișnuiți, pentru a îmbunătăți securitatea browserului și a reduce lățimea de bandă.

  • Cel mai bun pentru: designeri de interfețe
  • Ce face: Măsoară elementele în pixeli

Funcția acestui add-on este simplă, vă permite să desenați o riglă virtuală deasupra unei pagini web sau un element pe o pagină pentru a măsura lățimea, înălțimea sau alinierea pixelilor elementului de pe pagina web. Măsură Este util pentru majoritatea dezvoltatorilor front-end pentru a crea wireframes.

  • Potrivit pentru: designeri web
  • Ce face: schimbă limba în browser

Acesta este un instrument util care traduce instantaneu Firefox în altă limbă. Totul din browser, inclusiv interfața de utilizator, dicționarul de verificare ortografică și conținutul site-ului web, va fi tradus în limba dorită. O caracteristică excelentă pe care o puteți folosi atunci când dezvoltați site-uri web multilingve.

  • Cel mai bun pentru: designeri de interfețe
  • Ce face: generează text fals

Crearea de text fals pentru noile modele și prototipuri de site-uri web este o sarcină plictisitoare care este puțin probabil să distreze chiar și un singur designer. Această extensie face procesul mai puțin plictisitor, permițându-vă să generați text fals Lorem Ipsum direct din Firefox.

  • Potrivit pentru: dezvoltatori web
  • Ce face: editează și creează cookie-uri

Acest supliment nu numai că gestionează cookie-urile site-ului dvs., dar vă permite și să editați și să creați cu ușurință fișiere noi. Unele dintre caracteristicile pluginului includ navigarea în module cookie încorporate, posibilitatea de a schimba domeniile, posibilitatea de a edita mai multe module cookie simultan și multe altele.

  • Cel mai bun pentru: designeri de interfețe
  • Ce face: selectează culorile pe o pagină web

Un instrument ușor de utilizat care vă permite să alegeți culorile oricărui pixel de pe o pagină web și să copiați cu ușurință codul de culoare RGB sau Hex pentru a le utiliza în propriile proiecte. Frumusețea și interfața vizuală a acestui instrument fac mult mai ușor pentru începători să învețe despre culori pe paginile web.

  • Potrivit pentru: designeri web și dezvoltatori
  • Ce face: Oferă informații despre software-ul utilizat de site-ul web

Similar cu suplimentul BuiltWith, Wappalyzer este o altă extensie utilă care vă permite să știți ce software este utilizat pe un site web. De exemplu, puteți afla ce tip de CMS folosește site-ul, ce sistem de operare acceptă serverul site-ului web și multe altele.

  • Potrivit pentru: dezvoltatori web
  • Ce face: modifică agentul utilizator al browserului

Vrei să știi cum va arăta site-ul tău pe diferite platforme și sisteme de operare? Atunci acesta este un instrument care vă va fi cu siguranță la îndemână. User-Agent Switcher vă permite să comutați între diferite platforme, cum ar fi Android, Mac, Windows și anumite sisteme de operare pentru a schimba agentul utilizator al browserului.

  • Potrivit pentru: designeri web și dezvoltatori
  • Ce face: arată un exemplu de utilizare a filei de memorie a browserului

Acesta este un supliment la îndemână care vă va ajuta să determinați cât de mult din resursele computerului dvs. sunt folosite de fiecare filă deschisă în Firefox. Puteți folosi acest instrument pentru a afla câte resurse folosește site-ul dvs. și pentru a optimiza site-ul pentru performanță maximă.

  • Potrivit pentru: web și designeri grafici
  • Ce face: Deschide imagini în Photoshop

Acest supliment face ceea ce spune numele său, pur și simplu deschide cu un singur clic imaginile pe care le găsiți pe o pagină web folosind Photoshop. Nu este nevoie să încărcați o imagine sau să lansați Photoshop, extensia va face tot ce aveți nevoie.

  • Cel mai bun pentru: designeri de interfețe
  • Ce face: îmbunătățește tabelele HTML

Grafice, statistici, comparații, tabele - acest supliment poate face totul. Puteți folosi acest instrument pentru a crea tabele și diagrame HTML ușor de utilizat și frumoase.

  • Potrivit pentru: dezvoltatori web
  • Ce face: client SSH pentru Firefox

De obicei, trebuie să instalați o aplicație pentru a rula terminalul SSH. Aceste aplicații diferă de la un sistem de operare la altul. FireSSH, însă, funcționează pe toate platformele atâta timp cât aveți Firefox. Extensia vă permite să lansați un terminal SSH direct din browser.

  • Cel mai bun pentru: designeri de interfețe
  • Ce face: reîmprospătează automat paginile web

Unul dintre lucrurile enervante cu care se confruntă designerii web atunci când dezvoltă site-uri web este nevoia de a actualiza manual pagina web după fiecare modificare mică a codului. Auto Refresh este o extensie care rezolvă această problemă, permițându-vă să reîmprospătați automat una sau mai multe file în Firefox la intervale pe care le definiți.

  • Cel mai bun pentru: designeri de interfețe
  • Ce face: redimensionează ferestrele Firefox pentru anumite rezoluții de ecran

Acest supliment vă permite să redimensionați fereastra Firefox la rezoluții specifice pentru a vedea cum arată site-ul dvs. pe diferite ecrane. Va trebui să instalați Firefox Add-On Bar pentru ca această extensie să funcționeze corect.

  • Potrivit pentru: designeri web și dezvoltatori
  • Ce face: găsește informații despre fonturile paginii și elementele acesteia

Font Finder este un instrument la îndemână care vă permite să explorați elementele site-ului web pentru a afla informații importante despre fonturile utilizate pe pagină, cum ar fi numele familiei fonturilor, culoarea fontului, spațierea între linii, decorul și multe altele.

  • Cel mai bun pentru: designeri de interfețe
  • Ce face: verifică paginile web în diferite browsere

Funcția acestui supliment este simplă. Vă permite să deschideți instantaneu orice pagină web pe care o vizualizați în Firefox folosind un alt browser cu un singur clic. Nu este nevoie să copiați adresele URL, deschideți fiecare browser unul câte unul și lipiți URL-urile pentru a deschide site-ul web.

  • Potrivit pentru: designeri web și dezvoltatori
  • Ce face: șterge memoria cache a browserului

Acest supliment șterge instantaneu memoria cache a browserului Firefox (RAM și DISK) pentru a reduce utilizarea resurselor computerului. Extensia vă permite să ștergeți memoria cache făcând simplu clic pe un buton sau apăsând tasta F9 de pe tastatură. Dacă doriți să vizualizați rapid modificările aduse unei pagini web, acest supliment va fi foarte util.

Mozilla a avut mai multe evenimente semnificative recent. În primul rând, este aniversarea Firefox. Acum zece ani, un grup de hackeri care se numeau Mozillian a lansat prima versiune a Firelis, un browser care a spart monopolul Internet Explorer cu 95% din cota de piata. În al doilea rând, într-o competiție pe termen lung pentru performanță cu Chrome, motorul SpiderMonkey a depășit performanța V8 în propriile teste Google. Și în al treilea rând, aceasta este, desigur, lansarea Firefox Developer Edition.

Firefox Developer Edition va înlocui canalul de dezvoltare Firefox Aurora existent și va include noi funcții de la Firefox Nightly. Ciclul de dezvoltare a browserului de șase săptămâni va rămâne și el: Nightly - Developer Edition - Beta - Release. Astfel, dezvoltatorul va avea la dispoziție 12 săptămâni înainte ca inovația să fie lansată. Noul browser folosește un profil de utilizator separat, care îi permite să fie lansat simultan cu Firefox obișnuit.

Design proaspăt

Interfața actualizată face accesul la instrumentele pentru dezvoltatori mai rapid și utilizează o nouă temă întunecată în mod implicit. Dar puteți, de asemenea, să treceți la clasic sau să instalați orice temă și extensie terță parte. Modificările au afectat și aspectul ferestrei de setări.


Uitați butonul

Problemele de securitate nu au trecut neobservate: un buton „Uitați” a apărut pe tabloul de bord al browserului, informațiile despre cookie-uri, istoric, filele deschise și ferestrele din ultimele cinci minute, două ore sau o zi sunt șterse;

Firefox Salut

Probabil că mulți oameni au auzit deja despre WebRTC și poate chiar au experimentat cu el. Așadar, cu sprijinul Telefonica, apelurile și apelurile video folosind această tehnologie au fost adăugate noului Firefox geek. Și acest „browser Skype” se numește Firefox Hello.

Despre cel mai important lucru

Ei bine, am ajuns fără probleme la cel mai important lucru - instrumente pentru dezvoltatorii web, accentul și cauza principală a apariției acestui browser. În general, comunitatea a răspuns mai mult decât pozitiv, mulți au spus că la un moment dat au trecut de la Firefox la Chrome doar datorită DevTools, iar acum este timpul să ne întoarcem. Dar au existat și declarații că nu a apărut nimic nou, ci că pur și simplu au luat tot ce era acolo și l-au proiectat diferit. Vreau să afirm că aceasta este o minciună absolută. Echipa Firefox le-a îmbunătățit semnificativ pe cele existente și a oferit instrumente complet noi pentru dezvoltatori.

  • Depanare JavaScript mai avansată.
  • Inspectorul web a fost îmbunătățit, are acum o fereastră cu fonturile folosite și a început în sfârșit să se afișeze înainte și după pseudoelemente în DOM.
  • Instrumentele pentru lucrul cu design responsive au fost transformate.
  • Un editor de stil cu completare automată premium vă permite să editați fișiere CSS chiar în browser.
  • Consolă mai informativă și monitorizare a rețelei.
  • Scratchpad pentru executarea JavaScript din mers.
  • Comutați între modurile online și offline.
  • Selector de culori foarte convenabil.

WebIDE - mediu de dezvoltare integrat

WebIDE a fost introdus ca o caracteristică beta (nu este disponibilă implicit) în Firefox 33 și este acum inclus oficial în Developer Edition. Cu WebIDE, care înlocuiește managerul de aplicații, puteți dezvolta, implementa și depana aplicațiile Firefox OS direct în browser sau pe un dispozitiv Firefox OS. Funcția de completare automată, funcția ecran de ajutor, verificarea amănunțită sunt câteva dintre noile funcții. De asemenea, puteți întrerupe aplicația și inspecta elemente cu depanatorul încorporat.


Valence - dezvoltare și depanare între browsere

Această extensie se numea inițial Firefox Tools Adapter. Valence este conceput pentru a testa proiecte de pe diferite dispozitive (de exemplu, Chrome pe Android, Safari pe iOS) și pentru a modifica conținutul web, simulând interfața Firefox.

Editor audio web

Vă permite să interacționați cu API-ul Web Audio în timp real.

concluzii

În principiu, am enumerat toate inovațiile principale. Nu știu despre tine, dar am doar emoții pozitive din lucrul cu Firefox Developer Edition. Poate că am o atitudine părtinitoare față de producători înșiși pentru deschiderea, altruismul și dorința lor de a face web-ul mai bun...

A făcut Mozilla ceva radical nou și inovator? Nu, și nimeni nu se ceartă cu asta. Chiar și pe pagina lor de destinație scrie „Este cu tot ce ești obișnuit, doar că mai bine”. Dar sunt absolut de acord cu această afirmație.

iMacros este o extensie care ajută la testarea paginilor web. În loc să fie nevoit să efectueze aceleași acțiuni pe pagină, dezvoltatorul trebuie doar să înregistreze secvența necesară de acțiuni în iMacros și să lanseze extensia atunci când este necesar.

Extensia este capabilă să funcționeze cu site-uri implementate folosind tehnologiile Java, Flash, Flex, Ajax și Silverlight.

2. Font Playground

O extensie pentru cei cărora le place să „joace cu fonturile” - vă permite să experimentați cu întreaga gamă de fonturi din biblioteca Google Fonts fără a face modificări codului paginii. Puteți schimba nu numai fontul în sine, ci și dimensiunea, stilul de scriere și așa mai departe.

3. Proiectul Naptha

O extensie pentru Google Chrome, care vă permite să selectați și să copiați text chiar și din imagini, va fi utilă, potrivit Cretive Bloq, oricărei persoane care a avut de-a face cu textul încorporat cel puțin o dată în munca sa.

4. Ce font

O extensie care vă permite să determinați instantaneu ce font este utilizat pe o anumită pagină, fără a efectua aproape nicio acțiune suplimentară - prin trecerea cursorului mouse-ului peste inscripție.

5. YSlow

YSlow este un instrument care nu numai că verifică viteza de încărcare a unei anumite pagini web, dar îi spune și dezvoltatorului ce o încetinește. Pentru a face acest lucru, extensia verifică site-ul dacă respectă 23 din 34 de reguli de performanță formulate de echipa Yahoo.

6. Dezvoltator Web

Un întreg set de instrumente utile pentru gestionarea elementelor site-ului web - de exemplu, pentru analiza resurselor web și a layout-urilor, testarea codului și modificarea instantanee a parametrilor și a aspectului paginii.

7. Lista de verificare pentru dezvoltatori web

O extensie pentru a verifica automat dacă un site îndeplinește principiile de bază ale SEO, dacă este suficient de productiv și ușor de utilizat. Rezultatele verificării sunt prezentate sub forma unui fel de listă de verificare - puteți vedea informații și recomandări mai detaliate pentru fiecare dintre elementele neîndeplinite, precum și corectarea instantanee a erorilor.

8. Salvare automată DevTools

Vă permite să salvați automat orice modificări aduse codului paginii folosind Chrome DevTools. După cum notează autorul materialului, instrumentul ajută dezvoltatorii să economisească mult timp.

9. Wireframe instantanee

O extensie cu care puteți „transforma” orice pagină într-o diagramă structurală a aspectului materialului - wireframe. Permite dezvoltatorilor și designerilor web să se familiarizeze cu aspectul oricărei pagini de pe Internet fără a părăsi browserul.

10. Emulator Ripple

Ripple Emulator este o extensie de emulator pentru Google Chrome care vă permite să testați site-uri web pe diverse platforme mobile cu diferite rezoluții de ecran. Poate fi folosit în combinație cu alte extensii pentru testarea și depanarea resurselor.

11. Streak

Streak este o extensie care vă permite să vă transformați căsuța de e-mail Gmail într-un sistem CRM. Puteți urmări starea tranzacțiilor și negocierilor desfășurate prin e-mail cu contrapărțile, puteți utiliza Streak pentru a procesa solicitările de la utilizatorii de produse și puteți urmări corectările erorilor trimise și așa mai departe.

12. Căutați Stackoverflow

O extensie pentru căutarea rapidă a popularei resurse pentru dezvoltatori Stack Overflow.

13. Manual PHP Ninja

Vă permite să accesați instantaneu documentația PHP 5.5 din browser.

14. PerfectPixel

PerfectPixel este o extensie pentru Google Chrome. Vă permite să „suprapuneți” o grilă translucidă pe o pagină web și să verificați distanțele specificate față de aceasta. Puteți suprapune alte imagini - cum ar fi aspectul original - pentru a vă asigura că pagina rezultată se potrivește exact cu aceasta:

15. Cod Cola

Un instrument pentru vizualizarea codului sursă al paginilor și editarea codului CSS.

Puteți modifica umbrele, circumferințele casetei și așa mai departe trăgând glisorul. După efectuarea modificărilor, puteți copia codul rezultat și îl puteți înlocui în codul site-ului.

16. Chrome Sniffer

O extensie de browser care detectează ce biblioteci JavaScript, cadru sau CMS sunt utilizate pe o resursă.

17. Comutator utilizator-agent

User-Agent Switcher este o extensie care vă permite să „mascați” browserul Google Chrome ca Internet Explorer, Opera sau orice alt browser.

18.IE Tab

Emulator de Internet Explorer încorporat pentru Chrome.

19. PicMonkey

Editor de imagini online simplu și gratuit. Vă permite să „capturați” imagini sau să faceți capturi de ecran din browser - și să le editați imediat folosind o extensie Chrome.

20. Chrome Daltonize

O extensie care ajută la adaptarea serviciilor web pentru acei utilizatori care suferă de daltonism - arătând dezvoltatorului cum este văzut site-ul de către cei care suferă de această boală. Permite designerilor și dezvoltatorilor web să creeze servicii mai accesibile.

21. Riglă de pagină

Un instrument simplu care vă ajută să determinați înălțimea, lățimea și poziția oricărui element de pe pagină.

22. Verificați Linkurile mele

O extensie care verifică o pagină web pentru link-uri rupte sau incorecte.

23. Fila Flickr

O extensie care ajută nu atât la dezvoltare, cât la găsirea inspirației și a fotografiilor bune. Afișează o imagine din Flickr pe fiecare filă nouă din Google Chrome. Când faceți clic pe el, utilizatorul merge la pagina autorului, unde se poate familiariza cu celelalte lucrări ale sale.

24. Google Art Project

O extensie de browser similară cu pluginul anterior din această listă - doar în locul fotografiilor de pe Flickr în noua filă, utilizatorul vede opere de artă recunoscute - de exemplu, picturi de Van Gogh sau Manet.

25. Economizor de date

Extensie oficială de la Google pentru comprimarea traficului, care permite economisirea traficului în browserul Google Chrome.