Siguranţă 

Cu ajutorul google chrome diverși dezvoltatori. Extensii Google Chrome pentru dezvoltatori web. Ce versiuni de Chrome există?


Există o mulțime de extensii gratuite pentru Chrome pentru a vă ușura viața – am adunat cele mai bune.

Chrome DevTools sunt grozave, dar s-ar putea adăuga mai multe oportunități interesanteîn browserul dvs. pentru a face proiectarea și dezvoltarea web mult mai ușoară. Vă prezentăm 32 dintre extensiile noastre preferate Chrome.

Grăbiți-vă radical procesul de stilare a elementelor cu DomFlags, o extensie cu adevărat epică care vă permite să creați comenzi rapide de la tastatură pentru elementele DOM! Acestea sunt ca marcajele pentru navigarea în DOM și vor schimba modul în care lucrați cu DevTools.

Aici mod interesant Implicați oamenii în discuții: Highlighter vă permite să partajați fragmente de articole online, astfel încât să puteți evidenția cele mai importante părți din ceea ce este scris.

Booom îmbunătățește Dribbble afișând mai multe cadre în liste, adăugând butoane Like și Adaugă la Bucket, redând automat GIF-urile și făcând derularea infinită.

Aceasta este o extensie Chrome puternică care vă permite să creați un design și apoi să îl exportați ca fișier CSS pentru a fi utilizat pe site-ul dvs. Acceptă straturi și conține multe dintre instrumentele pe care obișnuiești să le folosești în editorul tău foto obișnuit.

Această extensie genială vă va prelua codul și va scoate instantanee pentru demonstrații și machete. De asemenea, puteți adăuga teme și efecte pentru a crea imagini pentru portofoliile dvs. promoționale și online.

În calitate de dezvoltator web, trebuie să vă testați paginile web. Repetarea aceiași pași din nou și din nou poate deveni un proces obositor. iMacros este o extensie Chrome la îndemână care vă permite să vă înregistrați acțiunile și să le salvați, așa că trebuie să faceți o anumită acțiune o singură dată. Puteți apoi să vă testați paginile din nou și din nou, repetând acțiuni cu un clic pe un buton, economisind timp prețios și permițându-vă să vă concentrați pe probleme mai stringente.

Fiecare designer și dezvoltator va găsi această extensie neprețuită. Font Playground vă permite să experimentați cu fonturi locale și cu întreaga bibliotecă de fonturi Google pe o pagină web fără a face modificări reale. Frumusețea acestei extensii este că include toate stilurile de fonturi, stilurile și efectele de text diferite, astfel încât să puteți previzualiza pagina web înainte de a implementa modificări.

Această extensie Chrome este un instrument foarte util care face exact ceea ce spune numele său - redimensionează fereastra browserului pentru a vă ajuta să creați design adaptiv site-ul. Alegeți dintr-o listă de dimensiuni populare de monitor sau adăugați singur dimensiuni și rezoluții personalizate pentru o precizie sporită.

Dacă trebuie să lucrați vreodată cu un aspect de imagine cu text în linie, această extensie vă poate scuti de puțină supărare. Project Naphtha te poate salva de o lume de iritații ușoare. Datorită trucurilor inteligente OCR, extensia vă permite să evidențiați, să copiați și să lipiți text din orice imagine și chiar îl puteți traduce pentru dvs.

Foarte extensie utilă Pentru Google Chrome, permițând dezvoltatorilor și designerilor să identifice fonturile utilizate pe o pagină web. Deci, dacă întâlniți un font web cu aspect ciudat pe care doriți să îl utilizați într-unul dintre proiectele dvs. viitoare, treceți cu mouse-ul peste el și aflați, instantaneu, ce font este acesta.

Acest instrument nu numai că verifică cât de repede se încarcă paginile dvs. web, ci vă spune și dacă le încetinește. Yslow verifică pagina dvs. web cu 23 din 34 de reguli definite de echipa de performanță a Yahoo. Este un instrument extrem de util pentru analiza paginilor web și pentru a sugera modalități de îmbunătățire a performanței acestora.

În calitate de dezvoltator web, s-ar putea să vă întrebați cum ați trăit fără această extensie. Se adaugă un buton la panou Instrumente Chrome cu multe instrumente utile pentru dezvoltatorii web. Acesta este portul oficial al extensiei Web Developer pentru Firefox.

Page Ruler este un instrument excelent pentru măsurarea precisă a elementelor de pe orice pagină web și apoi procesarea lor în funcție de cerințele dumneavoastră. Desenați o riglă pentru a obține dimensiunile pixelilor și plasarea.

Acest instrument vă va permite să verificați dacă paginile dvs. web respectă cele mai bune practici în ceea ce privește SEO, uzabilitate, accesibilitate și performanță (viteza de încărcare). Deci, de exemplu, dacă în pagina dvs. lipsește o etichetă H1 sau nu are metaetichete, extensia vă anunță, astfel încât să puteți rezolva rapid problema. Dacă faceți clic pe linkul „mai multe detalii și ajutor” din partea de jos a extensiei, veți găsi o listă mai detaliată.

O adevărată bijuterie pentru toți dezvoltatorii web, DevTools Autosave vă permite să salvați automat orice modificări aduse unei pagini web în CSS și JS prin Chrome DevTools. Extensia este ușor de configurat și utilizat și, de asemenea, vă va economisi mult timp.

Transformați orice pagină web într-un cadru wireframe cu un singur clic. Această extensie Google Chrome ajută dezvoltatorii web și designerii să vizualizeze pagini web, fie locale, fie online, cu o suprapunere wireframe.

Extensia ColorZilla este un pipetă avansat, un selector de culori, un generator de gradient și alte instrumente de culoare utile pentru a vă ajuta cu designul - chiar în fereastra browserului.

Este un emulator de mediu mobil multi-platformă care vă poate ajuta să vă testați aplicațiile web folosind diverse dispozitiveși rezoluția ecranului. Ripple Emulator poate fi utilizat în combinație cu instrumentele de dezvoltare existente pentru a efectua depanare, inspecție DOM și testare automată.

Dacă sunteți un dezvoltator web, probabil ați auzit de Stack Overflow - locul de plecare pentru orice probleme sau întrebări legate de dezvoltare. Dacă nu, atunci ar trebui să verificați, comunitatea este înfloritoare și acoperă o gamă largă de subiecte de la C# și Java până la PHP și jQuery. Această extensie fantastică adaugă o casetă de căutare direct în browser, permițându-vă să căutați în resursele vaste ale Stack Overflow.

Poate fi destul de dificil să vă amintiți fiecare caracteristică, așa că dacă ați fost în situații în care a trebuit să petreceți ore întregi căutând un anumit Funcții PHP pe Google, atunci această extensie vă va atrage cu siguranță atenția. PHP Ninja Manual vă oferă toată documentația PHP-5.5 cu exemple în opt limbi, totul din confortul browserului dumneavoastră.

Designerii urăsc când creează un design uimitor care ajunge să nu se potrivească cu rezultatul codificării. PerfectPixel este de fapt o extensie ideală pentru dezvoltatorii web care doresc să dezvolte site-uri care să fie reprezentări precise în design. Această extensie ușor de utilizat vă permite să suprapuneți o imagine translucidă deasupra unei pagini web și să efectuați comparații de pixeli pentru a asigura o acuratețe de 100%.

Acest instrument nu vă va permite doar să vizualizați codul sursă cu care lucrați deja, dar funcționează și ca un editor CSS unde vă puteți edita paginile web și puteți vedea modificările instantaneu.

Un instrument excelent pentru a vedea cum arată un site web folosind diferite instrumente de utilizator, cum ar fi iPad, iPhone sau Android. Acest lucru poate fi foarte util dacă site-ul a fost piratat și în acest fel puteți vedea cum motoarele de căutare vezi paginile.

Unul dintre cele mai populare și mai utile emulatoare IE. Permite dezvoltatorilor web să testeze pagini web în versiuni diferite IE direct în browserul Chrome.

Este un editor foto online gratuit, ușor de utilizat, care vă permite să editați pagini web, imagini și capturi de ecran. Dar nu asta o face bună. PicMonkey vă permite să capturați orice imagine și să faceți o captură de ecran a întregii pagini cu un clic pe un buton. După ce selectați o imagine, o puteți edita după cum doriți, aplicând efecte pentru a schimba expunerea.

Deficiența vederii culorilor sau daltonismul afectează milioane de oameni din întreaga lume. Această extensie ingenioasă folosește o tehnică care vă permite să creați imagini potrivite pentru vizionarea de către persoanele cu această tulburare.

Extensia va ajuta dezvoltatorul web să verifice bibliotecile cadru, CMS și JavaScript de pe site în momentul în care îl vizualizați. În bara de adrese va apărea o pictogramă care indică biblioteca detectată. Această extensie Chrome este foarte apreciată și poate detecta peste 100 de biblioteci CMS și JS populare.

Ți-ai terminat site-ul, dar ai uitat să verifici toate linkurile? Oricât de atent l-ai urmărit, este posibil să fi ratat unul sau două, iar să le parcurgi pe toate va fi o corvoadă. Cu această extensie, poți pur și simplu să lași site-ul în funcțiune, iar acesta va citi toate linkurile de pe fiecare pagină, evidențiind-le pe cele disponibile cu verde și pe cele rupte cu roșu.

Este doar o mică extensie care afișează fotografii populare de la Fickr de fiecare dată când deschideți fereastra. Faceți clic pe o fotografie pentru a o vizualiza pe Flickr sau faceți clic pe numele de utilizator pentru a vedea mai multe fotografii de la fotograf.

Ca și în cazul extensiei anterioare, în fiecare filă nouă veți vedea capodopere ale unor artiști atât de mari precum Van Gogh și Monet. Dacă vă place imaginea, faceți clic pe ea și vă va duce pe site-ul Institutului Cultural Google, care este plin de informații despre lucrare și creatorul ei.

Deci, ultima dvs. factură de la furnizorul dvs. de internet mobil a fost ridicată? Nu vă panicați. Ai nevoie doar de această extensie: reduce cantitatea de date folosită atunci când navighezi pe web. La pornind Chrome va folosi serverele Google pentru a comprima paginile înainte de a le încărca. Există o singură avertizare: SSL și modul incognito nu vor fi activate.

Dacă sunteți un utilizator activ browser Google Chrome, acum este momentul să-l actualizezi la întregul său potențial cu instrumentele unui dezvoltator real. Iată o listă de plugin-uri populare care vă vor simplifica munca și vă vor diversifica navigarea zilnică pe internet.

Stylebot

Dacă doriți să vă refaceți paginile preferate de internet în felul dvs., atunci nu veți găsi un plugin mai bun.

Descărcător de imagini

O aplicație pentru descărcarea imaginilor tale preferate de pe orice site.

DomFlags

Creați un meniu de link-uri pentru o navigare rapidă prin codul dvs.

CSS Shack

Un utilitar foarte convenabil în care puteți lucra cu text, imagini, pagini de aspect și apoi pur și simplu să exportați fișierul în CSS și să îl utilizați pentru a vă crea propria pagină.

Marmoset

Aplicație extrem de inutilă pentru creare capturi de ecran frumoase codul dvs. Frumusețea se referă la capacitatea de a schimba culoarea de fundal și de a roti în 3D.

iMacros pentru Chrome

Dacă trebuie să configurați testarea unei pagini web prin efectuarea ciclică a anumitor acțiuni, atunci această aplicație este exact ceea ce aveți nevoie.

Font Playground

Nu este cea mai sofisticată aplicație, dar extrem de convenabilă. Vă permite să evaluați rapid modificările fontului, atât într-un bloc separat, cât și pe întreaga pagină.

Firebug Lite

Poate știți despre un supliment puternic similar pentru Firefox, care servește ca depanator și inspector DOM pentru JavaScript, HTML, CSS. O versiune ceva mai puțin funcțională este disponibilă și pe Chrome.

Redimensionare ferestre

Vă permite să vedeți rapid cum va arăta o pagină pe un ecran de orice dimensiune.

Emulator Ripple

Un utilitar similar care demonstrează cum este afișată o pagină pe un anumit gadget.

Proiectul Naptha

Aplicația va fi utilă nu numai pentru dezvoltator, ci și pentru utilizatorul obișnuit. Vă permite să copiați text dintr-o imagine, să o editați și chiar să o traduceți.

Ce font

Pentru a afla ce font este în fața dvs., instalați pur și simplu aplicația What Font în browser.

ColorZilla

Și această aplicație vă va permite să aflați numărul culorii.

Yslow

Acest utilitar nu va arăta doar viteza de încărcare a paginii, dar vă va spune și ce anume încetinește această viteză.

Dezvoltator Web

Ce dezvoltator web poate trăi fără o aplicație pentru dezvoltatori web? Adaugă butoane standard pentru instrumente pentru dezvoltatori în fereastra principală.

Riglă de pagină

O bandă de măsurare pentru pagini web vă va spune dimensiunile unui anumit element.

Salvare automată DevTools

După cum sugerează și numele, această aplicație salvează automat eforturile de creare a codului.

Wireframe instantanee

Folosind acest utilitar, puteți vizualiza diagrama structurii paginii (wireframe) pe orice resursă.

Căutați Stackoverflow

Căutare rapidă după serviciu popularîntrebări și răspunsuri pentru programatori și dezvoltatori.

PerfectPixel

O aplicație pentru lucrul cu straturi pe web, în ​​special le puteți face translucide.

Chrome Daltonize

Dacă decizi brusc să faci un site web conceput, printre altele, pentru persoanele cu probleme de vedere a culorilor, atunci asigură-te că folosești acest utilitar.

Verificați linkurile mele

Ce extensii de browser și aplicații folosiți la serviciu?

Google Chrome acceptă mai multe canale de actualizare diferite, de la versiuni zilnice Canary până la versiuni stabile cu un ciclu de lansare de 6 săptămâni.

Vă rugăm să rețineți că puteți rula versiuni Canary împreună cu versiuni ale altui canal, deoarece în acest caz datele de profil nu sunt schimbate cu alte canale. Acest lucru permite utilizatorilor să testeze cele mai recente evoluții, păstrând în același timp o versiune dovedită a Google Chrome.

Recenzii pentru canalul Google Chrome

  • Stabil: acest canal primește versiuni de browser care sunt testate complet de echipa de testare Google și nu conțin erori majore sau probleme semnificative. Canalul este actualizat la fiecare 2 săptămâni pentru lansările intermediare și la fiecare 6 săptămâni pentru lansările majore. Descărcați versiune stabilă posibil pe pagina - Google Chrome .
  • Beta: Dacă doriți să testați noi funcții și îmbunătățiri cu un risc minim, canalul Beta este o alegere excelentă. Build-urile sunt actualizate în fiecare săptămână, iar versiunile majore apar la fiecare 6 săptămâni, cu mai mult de o lună înainte de lansarea versiunii stabile.
  • Dev: Dacă doriți să vă familiarizați cu inovațiile cât mai repede posibil, canalul Dev este potrivit pentru dvs. Canalul Dev primește actualizări o dată sau de două ori pe săptămână și arată clar la ce îmbunătățiri lucrează echipa Chrome. Nu există nicio întârziere în raport cu versiunile majore și utilizatorul primește cel mai recent cod. Deși aceste ansambluri sunt testate, ele pot conține număr mare erori.
  • Canar: modificările legate de risc sunt testate în versiunile Canary. Lansările sunt lansate zilnic și nu sunt pre-testate. Deoarece nu există nicio garanție că aceste versiuni vor rula, ele își folosesc propriul profil și setări, ceea ce înseamnă că pot rula în paralel cu versiunile de pe alt canal Chrome. În mod implicit, versiunile Canary raportează la Google blocările și statisticile de utilizare, dar puteți dezactiva această opțiune pe pagina de descărcare.
  • Alte construcții: Dacă sunteți un tester complet îndrăzneț, puteți descărca cea mai recentă versiune de lucru din conducta de dezvoltare Chromium, uitându-vă la numărul de sub „LKGR”, accesând segmentul de descărcare Google și descarcând versiunea corespunzătoare.

Notă: versiunile cu acces anticipat (build Canary, Dev și Beta) vor fi traduse doar parțial în alte limbi decât engleza. Este posibil ca textul asociat cu noile funcții să nu fie tradus în alte limbi până la lansarea unei versiuni stabile.

Ce trebuie să știi înainte de a schimba canalul?

Backup de date

Înainte de a trece la alte ansambluri, trebuie să creați backup datele de profil (marcaje, cele mai vizitate pagini, istoric, cookie-uri etc.) Dacă doriți să treceți din nou la un canal mai stabil, este posibil ca datele actualizate să nu fie compatibile cu versiunile mai vechi.

Faceți o copie a directorului Date utilizator\Default (de exemplu, copiați-l în folderul „Backup implicit” din același director). Calea depinde de sistemul de operare:

  • Canale stabile, beta și de dezvoltare: \Documents and Settings\nume utilizator\Local Settings\Application Data\Google\Chrome\User Data\Default
  • Compilări Canary: \Documents and Settings\nume utilizator\Local Settings\Application Data\Google\Chrome SxS\User Data\Default

Windows Vista sau 7:

  • Canale stabile, beta și de dezvoltare: \Users\nume utilizator\AppData\Local\Google\Chrome\User Data\Default
  • Compilări Canary: \Users\nume utilizator\AppData\Local\Google\Chrome SxS\User Data\Default
  • Canale stabile, beta și de dezvoltare: ~/Library/Application Support/Google/Chrome/Default
  • Build-uri Canary: ~/Library/Application Support/Google/Chrome Canary/Default
  • ~/.config/google-chrome/Default

Notă: dacă utilizați Windows Explorer Pentru a căuta un folder, poate fi necesar să activați „Afișați foldere ascunseși fișiere” în Panoul de control> Opțiuni folder (Opțiuni explorator)> Vizualizare

Există mai multe versiuni create pentru diferite categorii de utilizatori. Unul dintre ei se numește Google Chrome Developer Edition. Ce fel de versiune este aceasta și de ce este necesară? Acesta este ceea ce va fi discutat în acest material.

Este demn de remarcat faptul că versiunile alternative ale Chrome au apărut de mult timp. Ele însoțesc acest browser popular aproape de la versiunea de lansare. Dar nu toți utilizatorii sunt potriviți pentru opțiuni alternative.

Faptul este că „alte” versiuni ale Chrome sunt destinate profesioniștilor dintr-un domeniu sau altul: designeri de layout, testeri, dezvoltatori și așa mai departe. Astfel de browsere nu sunt potrivite pentru utilizatorii obișnuiți. Și totuși, trebuie să vorbim despre ele.

Ce versiuni de Chrome există?

De fapt, nu sunt atât de mulți. Cu toate acestea, există doar unul stabil. Acesta este exact cel care este pus la dispoziția publicului. Orice utilizator îl poate descărca. Dar există și versiuni alternative. Să le aruncăm o privire mai atentă.

Acestea sunt versiunile Google Chrome preferate ale tuturor care există. Cu toate acestea, în acest context suntem interesați de ediția pentru dezvoltatori. Prin urmare, totul trebuie luat în considerare caracteristici cheie această versiune pentru mai multe detalii. Abia atunci se poate face o concluzie.

Caracteristici Developer Edition

O caracteristică cheie a acestei versiuni de Google Chrome este disponibilitatea instrumentelor de dezvoltare. Acestea vor fi utile celor care dezvoltă extensii și plugin-uri pentru acest browser web. Utilizatorul mediu se va pierde în astfel de instrumente.

A doua caracteristică este consola avansată. Este folosit pentru a edita codul și a activa funcțiile ascunse ale browserului. Cu toate acestea, trebuie să știți cum să lucrați cu el. Cea mai mică greșeală într-o echipă poate duce la consecințe foarte grave.

Un alt „truc” este prezența tuturor celor mai recente inovații care au migrat la această versiune din Canary. Datorită acestui fapt, dezvoltatorii își pot optimiza extensiile pentru noile capabilități ale browserului web.

Actualizări frecvente– o altă caracteristică distinctivă a ediției pentru dezvoltatori. Vin neregulat, dar nu mai târziu de o dată la două săptămâni. În unele cazuri, actualizările pot ajunge în decurs de două zile. Acest lucru este convenabil pentru cei care testează noi funcții ale browserului web.

Concluzie

Deci, mai sus am vorbit despre ce versiuni de Google Chrome există și am discutat în detaliu construcția pentru dezvoltatori. Acum este clar că această versiune se distinge printr-un set de instrumente și o consolă avansată.

Este demn de remarcat faptul că utilizatorii obișnuiți nu trebuie să instaleze deloc ediția pentru dezvoltatori. Nu va avea sens din asta. Mai mult, acest ansamblu nu este deosebit de stabil. Dacă nu sunteți dezvoltator, atunci este mai bine să utilizați Stable.

Nu este un secret pentru nimeni că site-urile web de astăzi folosesc Cascading Style Sheets (CSS) pentru a conține parametrii tuturor elementelor paginii. CSS specifică fonturi, dimensiuni ale obiectelor, cadre, imagini, blocuri și tabele. Am decis să vă punem împreună o selecție de suplimente Google Chrome care vă vor permite să editați stilul oricărei pagini de pe Internet. Ca bonus, vă vom arăta cum să schimbați fundalul paginii.

Fiecare persoană are propriile preferințe și interese, mai ales când vine vorba de web design. Amintiți-vă doar de războaiele eterne după fiecare actualizare YouTube. Da, și probabil că ai mai multe comentarii despre afișarea informațiilor pe site-ul tău preferat: undeva fontul este urât sau mic, undeva există un bloc de notificare complet inutil. Aici ar fi bine să adăugați o imagine de fundal!

Browserele de astăzi vă permit să editați site-uri web în doar câteva clicuri. Utilizatorul poate personaliza orice, până la locația și ordinea elementelor de pe pagină. În acest scop, au fost scrise extensii și completări speciale, pe care le vom analiza înainte de a trece la modificare. pagina de start Google.

Stylebot

Poate cea mai populară extensie cu open cod sursă. Vă permite să editați fonturi, culori, dimensiuni și multe altele din mers. Are un mod simplu de editare: când deschide fereastra Cu Stylebot, puteți selecta elementul dorit, pur și simplu trecând peste el cu mouse-ul. Modificările sunt salvate instantaneu, iar stilurile personalizate pot fi partajate prietenilor.

Suprascriere Web

O aplicație pentru conectarea scripturilor Javascript la site-uri web externe. Conține deja jQuery, async.js, moment.js și Lodash, astfel încât funcțiile acestor biblioteci pot fi utilizate liber. Potrivit pentru utilizatorii avansați care știu să folosească Javascript, dar începătorii pot folosi extensia pentru a implementa scripturi deja scrise de altcineva.

Styler

Principiul este același cu cel al Stylebot: edităm rapid stilul paginii, modificările sunt salvate instantaneu. Interfața și secvența acțiunilor sunt ușor diferite, cu posibilități puțin mai puține. Deci alegerea este a ta: ceea ce îți place cel mai mult.

Elegant

Cel mai puternic instrument pentru personalizarea site-ului web, similar ca capabilități cu Stylebot. Vă permite să ascundeți elementele inutile, să editați stiluri și să partajați rezultatul cu prietenii. Site-ul de supliment conține peste 10.000 de stiluri personalizate de modificat aspect Facebook, YouTube, App Storeși multe alte resurse populare.

Editor CSS live

Apăsând combinația de taste, se deschide o mică fereastră în care utilizatorul poate introduce orice stil, care va fi aplicat imediat paginii (după închidere, modificările sunt salvate). Simplu și convenabil: nimic de prisos.

Vă vom spune, așa cum am promis, cum să editați fundalul oricărei pagini folosind Stylebot ca exemplu.

Important! Această metodă arată frumos pe paginile „ușoare” care nu sunt supraîncărcate cu blocuri și meniuri și este prezentată doar pentru a vă familiariza cu capacitățile suplimentelor. Vă recomandăm să îl încercați pe Google.com.

  • accesați pagina necesară
  • Faceți clic pe pictograma Stylebot din colțul din dreapta sus al Chrome
  • faceți clic pe Deschide Stylebot
  • în partea de jos selectați opțiunea Edit Css
  • Introdu următorul cod:

corp(
fundal: url(https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg) ;
dimensiunea fundalului: 100% 100%;
!important;
}

  • închide Stylebot

Gata! În loc de imaginea dată ca exemplu, puteți folosi oricare alta (trebuie doar să înlocuiți linkul din codul de mai sus). Pentru o personalizare mai complexă a site-ului, va trebui să citiți manuale CSS, dar credeți-mă: nu este nimic complicat în asta.