Extensii utile pentru dezvoltatorii Google Chrome. Extensii Google Chrome pentru dezvoltare web și multe altele. Extensie pentru dezvoltatori web

Browserul web este puntea care conectează oamenii la Internet. La fel ca internetul, browserele și-au schimbat forma în ultimii ani. De la utilizarea simplă pentru accesarea World Wide Web până la ecosisteme cu drepturi depline cu propriul set de extensii software și capabilități suplimentare, browserele de astăzi sunt mai puternice decât sistemele de operare de anul trecut.

Browserele sunt importante nu numai pentru utilizatori, ci și pentru dezvoltatorii web. Acestea servesc drept principalul teren de testare pentru programatori, unde pot lucra, compila și modifica paginile web înainte de a le pune live. Când vine vorba de browsere web, Google Chrome este în mod clar lider. Este un instrument complet cu un întreg ecosistem de plugin-uri și widget-uri care îi îmbunătățesc capacitățile și le permit utilizatorilor să-l personalizeze așa cum doresc.

Magazinul de aplicații Google Chrome găzduiește mii de pluginuri și widget-uri. Pentru a vă ușura viața, am consultat companii de dezvoltare web de top pentru a crea o listă de 10 plugin-uri Google Chrome valoroase pentru dezvoltatorii web.

Există milioane de fonturi pe Internet. Recunoașterea acestora poate deruta chiar și pe cei mai avansați designeri, ca să nu mai vorbim de dezvoltatorii web. Aplicația WhatFont va rezolva această problemă într-un mod eficient. Tot ce trebuie să faci este să treci mouse-ul peste text și numele fontului va apărea imediat.

De câte ori trebuie să recurgeți la utilizarea unor aplicații precum Photoshop pentru a manipula elemente de pe pagina dvs.? Destul de multe, nu? Cu această aplicație, această abordare confuză devine un lucru din trecut. Obțineți o plasare perfectă în pixeli a tuturor elementelor dvs. web folosind rigle verticale și orizontale cu glisare și plasare, oferiți-le culori personalizate și mutați-le pixel cu pixel sau cu mișcări mari folosind tastatura și mouse-ul.

La fel ca fonturile, găsirea culorilor exacte pe paginile web este o sarcină incredibil de dificilă. Metoda complicată implică realizarea de capturi de ecran și calcularea codului de culoare hexazecimal folosind Photoshop. EyeDropper aduce această funcționalitate în browser. Tot ce trebuie să faceți este să dați clic pe widget pentru a selecta instrumentul și apoi să selectați culoarea pe care doriți să o căutați.

Stylebot este visul oricărui dezvoltator web care devine realitate. Vă permite să manipulați rapid toate elementele vizuale ale unui site web folosind CSS personalizat. Aproape orice element - dimensiunea fontului, marginile, culoarea, vizibilitatea etc. - poate fi selectat și modificat în funcție de dorințele dezvoltatorului. Stylebot este un instrument excelent pentru a-ți regla designul site-ului web, oferind asistență excelentă începătorilor și dezvoltatorilor web profesioniști.

Una dintre cele mai dificile sarcini de dezvoltare este crearea de pagini web care rulează fără probleme pe diferite dimensiuni și rezoluții de ecran. Pentru a asigura acest lucru, trebuie efectuate teste amănunțite. Resolution Test permite utilizatorilor să testeze o pagină web pe diferite rezoluții și dimensiuni de ecran. Extensia va permite, de asemenea, dezvoltatorilor web să definească permisiuni personalizate.

Un must-have pentru toți dezvoltatorii web, Speed Tracer ajută la identificarea și depanarea problemelor de performanță a site-ului și a aplicațiilor. Speed Tracer recunoaște problemele cauzate de execuția JavaScript, Layout, postback XML http, recalcularea stilului CSS și multe altele.

Designul și textul formează fața site-ului. Corporate Ipsum permite dezvoltatorilor web să insereze text fals de orice lungime într-un site web. Această oportunitate devine foarte relevantă atunci când se iau decizii privind aspectul site-ului și se prezintă clientului un model de lucru.

Acest instrument oferă numeroase funcții, cum ar fi inspecția elementelor HTML bazată pe mouse și viabilitatea proprietăților CSS, oferind în același timp o reprezentare vizuală bogată a elementelor HTML și DOM.

Un instrument foarte important pentru dezvoltatorii web și SEO, Alexa Traffic Rank vă pune în panoul de trafic al Alexa și vă oferă o vizualizare detaliată a tuturor site-urilor pe care le vizitați fără a vă întrerupe navigarea.

Analiza site-ului web este una dintre sarcinile principale în munca unui dezvoltator web. Acest lucru se poate face cu ușurință cu Screen Capture, un instrument care permite utilizatorilor și dezvoltatorilor să captureze tot conținutul vizibil prezent pe un site web într-o singură filă, o anumită parte a unei pagini sau chiar să acopere întreaga pagină.

Este foarte important ca dezvoltatorii web să poată înțelege și să se adapteze în așa fel încât să creeze soluții software care nu sunt doar noi, ci și funcționale. Lista noastră de extensii pentru Google Chrome vă va ajuta să dezvoltați aceste soluții mult mai rapid și mult mai eficient.

Acest articol este destinat administratorilor și dezvoltatorilor Chrome Enterprise cu experiență în crearea și publicarea pachetelor de aplicații Chrome.

Dacă Magazinul web Chrome nu are un produs cu funcționalitatea de care aveți nevoie, vă puteți crea propria aplicație sau extensie, iar utilizatorii o pot adăuga pe dispozitivele lor Chrome OS sau pe browserul Chrome. De exemplu, în calitate de administrator, puteți instala automat o aplicație privată de marcare pe dispozitivele utilizatorilor, care trimite către site-ul web de resurse umane.

Pregătirea

Dacă fișierul manifest specifică site-ul țintă la care aplicația sau extensia face legătura, verificați calitatea de proprietar al site-ului respectiv.
Dacă aplicația sau extensia dvs. este găzduită pe un server privat, puteți controla cine are permisiunea de a o publica în Magazinul web Chrome. Puteți dezactiva verificarea proprietății pentru site-urile terță parte la care aplicația trimite.

Pasul 1: creați o aplicație sau o extensie

Mai jos folosim ca exemplu o aplicație de marcaje. Pentru instrucțiuni despre crearea unor aplicații și extensii Chrome mai complexe, consultați ghidul introductiv.

Creați un folder pe computer unde vor fi stocate fișierele aplicației sau extensiilor. Dați-i un nume de aplicație.
Creați un fișier manifest.
1. Creați un fișier JavaScript ® Object Notation (JSON) într-un editor de text. Vedeți un exemplu de fișier JSON pentru o aplicație de marcaj.
2. Verificați dacă codul din fișierul JSON este formatat corect folosind un instrument precum JSONLint.
Puneți fișierul manifest.jsonîn folderul aplicației sau extensiilor.
Creați un logo.
1. Imaginea trebuie să aibă dimensiunea de 128 x 128 pixeli.
2. Salvați fișierul logo ca 128.pngîn folderul aplicației.

Pasul 2: testați aplicația sau extensia

Dezvoltatorii își pot testa aplicațiile și extensiile în browserul Chrome sau pe dispozitivele cu sistemul de operare Chrome.

Pentru a depana o aplicație sau o extensie, utilizați jurnalele Chrome.

Pasul 3: creați o colecție de aplicații (opțional)

Un administrator poate crea o galerie de aplicații pentru o organizație pentru a recomanda aplicații și extensii Chrome pe care utilizatorii să le instaleze.

Pasul 4: publicați aplicația sau extensia dvs. în Magazinul web Chrome

Un dezvoltator poate face o aplicație sau extensie disponibilă public sau poate restricționa accesul la ea. Când publicați în Magazinul web Chrome, aveți trei opțiuni din care să alegeți.

Public: Oricine poate găsi și instala aplicația.
Acces prin link: Puteți instala o aplicație sau o extensie numai printr-un link. Nu este inclus în rezultatele căutării din Magazinul web Chrome. Puteți trimite linkul utilizatorilor atât din interiorul, cât și din afara domeniului organizației dvs.
Privat: numai utilizatorii din domeniul dvs. pot găsi și instala aplicația sau extensia. În plus, puteți restricționa accesul la produs numai testerilor de încredere ale căror nume sunt listate în bara de instrumente pentru dezvoltatori.

Pentru a adăuga o aplicație sau o extensie la Magazinul web Chrome, creați o arhivă ZIP a folderului corespunzător, apoi publicați produsul.

Pasul 5. Configurați regulile de lucru cu aplicația sau extensia

Panoul de administrare Google vă permite să gestionați modul în care utilizați aplicațiile și extensiile pe dispozitivele Chrome și browserul Chrome pe computerele Windows, Mac și Linux din organizația dvs. Regulile Chrome pot fi personalizate

Odată cu popularitatea tot mai mare a browserului Google Chrome, apar extensii care economisesc timp dezvoltatorilor web, oferindu-le posibilitatea de a urmări erorile și problemele de performanță ale site-ului.

Iată câteva extensii utile pentru Google Chrome.

Extensie pentru dezvoltatori web

Aș dori să notez cel mai convenabil și puternic instrument pentru un dezvoltator web și designer web - Extensie pentru dezvoltatori web pentru Google Chrome.

Extensia este adăugată în bara de instrumente Google Chrome sub forma unui buton cu o pictogramă roată și conține diverse instrumente pentru dezvoltarea și depanarea unui site web. Aceasta este o adaptare oficială a celei populare, scrisă de același dezvoltator.

Extensia are un număr mare de opțiuni.

De exemplu, mulți oameni au nevoie doar afla culoarea elementului pe ecranul monitorului în format hexazecimal. Plugin-ul are o funcție specială pentru aceasta. În secțiunea Diverse, selectați Display Color Picker.

Selectând Display Color Picker, cursorul devine o cruce. Acum, făcând clic pe orice zonă a ecranului din colțul din dreapta jos al browserului, afișează culoarea în hexazecimal pentru utilizare în CSS.

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ă aveți mai multe comentarii despre afișarea informațiilor pe site-ul dvs. 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 începe schimbarea paginii de pornire Google.

Stylebot

Poate cea mai populară extensie open source. Vă permite să editați fonturi, culori, dimensiuni și multe altele din mers. Are un mod simplu de editare: atunci când fereastra Stylebot este deschisă, puteți selecta elementul dorit prin simpla trecere a mouse-ului peste el. 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.

Stilat

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 suplimentului conține peste 10.000 de stiluri personalizate pentru a schimba aspectul Facebook, YouTube, App Store și multe alte resurse populare.

Editor CSS live

Prin apăsarea combinației 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 Editare 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 personalizare mai complexă a site-ului, va trebui să citiți manuale CSS, dar credeți-mă: nu este nimic complicat în asta.

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

Grajd: 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. Puteți descărca versiunea stabilă de pe pagină - 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. În ciuda faptului că aceste ansambluri sunt testate, ele pot conține un număr mare de 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?

Copia de rezerva a datelor

Înainte de a face upgrade la alte versiuni, ar trebui să faceți o copie de rezervă a datelor de profil (marcaje, cele mai vizitate pagini, istoric, cookie-uri etc.) Dacă doriți să faceți din nou upgrade la un canal mai stabil, este posibil ca datele actualizate să nu fie compatibile cu versiunile 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 opțiunea „Afișați folderele și fișierele ascunse” în Panoul de control > Opțiuni folder (Opțiuni explorator) > Vizualizare