Share
Google Chrome este unul dintre cei mai mari jucători de pe Web de astăzi. Este rapid, fiabil, plin de caracteristici și este extrem de util, mai ales dacă sunteți un dezvoltator web. De asemenea, Chrome permite instalarea extensiilor de la terți. Construim aceste extensii cu cod HTML, CSS și JavaScript. Echipa de la Google face o treabă minunată. În acest articol, vom vedea câteva instrumente utile, în Chrome, care ajută la procesele noastre de dezvoltare.
Răspunsul de astăzi este peste tot. Odată cu creșterea numărului de dispozitive mobile, trebuie să facem ca aplicațiile noastre să ruleze pe mai multe rezoluții diferite. Cele mai recente versiuni ale Chrome conțin instrumente minunate pentru a ușura munca noastră. Să începem prin definirea unei pagini simple și continuând, făcând-o receptivă. Aici este marcajul HTML:
Responsabil Web Design
Design-ul web responsiv (RWD) este o abordare de web design ...
Există un stil de bază pe pagină. Regulile CSS flotă legăturile de navigare și fac ca cele două secțiuni să fie poziționate una lângă cealaltă. Rezultatul arată astfel:
Acum, având HTML și CSS de bază, putem începe experimentarea. Să punem punctele de întrerupere a interogărilor mass-media. Este important să le alegeți pe baza conținutului și în cazul în care conținutul începe să arate rău. Stabilirea rezoluțiilor ca 1024x768, doar pentru că este populară, nu este o practică bună.
Conținutul nostru se rupe și dorim să vedem dimensiunea exactă a ferestrei de vizualizare. Așa că trebuie să redimensionăm fereastra browserului. Sub Chrome, putem deschide panoul pentru instrumente pentru dezvoltatori și să crească mărimea ei acolo.
Rețineți că în timp ce modificăm dimensiunea ferestrei de vizualizare, vedem dimensiunea acesteia în colțul din dreapta sus. Această sugestie mică elimină necesitatea unei verificări a mărimii manuale. În cazul nostru, ambele secțiuni aflate sub navigație au devenit prea sclipite, în jur de 500 de pixeli. Deci, acesta este locul pentru prima noastră interogare media:
secțiune float: left; lățime: 50%; @media all și (max-width: 550px) section float: none; lățime: 100%;
Dacă mergem puțin mai jos de 550 de pixeli, vom vedea că navigația produce o parcurgere orizontală de aproximativ 540 de pixeli. O nouă definiție a interogării media rezolvă această problemă.
.nav stil-list: none; margine: 10 pixeli automat; umplutura: 0; lățime: 510px; . li li float: left; marcă: 0 20px 0 0; @media all și (max-width: 540px) .nav width: auto; . li li float: nici unul; marja: 0; umplutura: 0; text-align: centru;
Rezultatul este o pagină web care funcționează pe o gamă largă de ecrane. Da, pagina noastră este una simplă și are doar două puncte de rupere, dar procesul de alegere a acestora va fi același, chiar dacă avem un site gigant.
Adesea, primim rapoarte de eroare că aplicația noastră nu funcționează corect pe un anumit dispozitiv. Chrome poate simula diferite dispozitive, pentru a ajuta la rezolvarea acestei probleme. Acesta stabilește rezoluția exactă a ecranului și definește antetele HTTP corecte. Deci, suntem capabili să vedem cu atenție ceea ce vede adevăratul utilizator. Detecția browserului JavaScript va funcționa și pentru că browserul modifică antetele solicitării.
Să spunem că trebuie să simulam un dispozitiv iPhone5. Există un mic buton care deschide sertar panou și apoi există un emulație fila.
Am ales dispozitivul și Chrome aplică toate setările în Ecran, Agent utilizator și senzori secțiuni. Browserul chiar emite evenimente touch.
Pagina noastră este acum receptivă, dar la un moment dat trebuie să facem modificări. Din nou, putem să folosim Chrome ca instrument și să vedem ce stiluri sunt aplicate în document. De exemplu, textul din prima secțiune este prea mare. Vrem să schimbăm acest lucru și să setăm o nouă culoare.
element este de asemenea util dacă trebuie să vedem o regulă specifică CSS, dar nu știm unde este definiția acestei reguli. Există o secțiune pe partea dreaptă, care arată stilurile calculate aplicate elementului selectat curent și apoi îl putem modifica.
Și, în fine, uneori trebuie să căutăm anumite stiluri CSS, dar este dificil să le găsim deoarece există o mulțime de definiții. În instrumente pentru dezvoltatori panou, avem un câmp filtru frumos. Să spunem că vrem să accesăm regulile noastre eticheta care are concept clasa aplicată, iată cum am putea face acest lucru:
Google Chrome este un instrument universal. Dispune de instrumente pentru susținerea designerilor, așa cum am făcut-o în ultima secțiune a acestui tutorial. Dar poate face același lucru și pentru dezvoltatori, așa cum vom vedea acum.
Există un program de depanare JavaScript frumos, integrat în Chrome. Există, de asemenea, o minunată consola și sursa de vizualizare. Pentru a ilustra modul în care funcționează totul, vom adăuga o mică logică exemplului nostru. Vrem să schimbăm eticheta Exemple din meniul principal pentru Exemple minunate cand noi clic pe link. Vom folosi jQuery ca ajutor, deci ne putem concentra pe exemplu mai bine:
Accentsconagua
$ ('. nav') on ('click', funcția (e) var clicked = e.currentTarget; console.log ("nu face nimic ...");); Probabil știți deja problema, dar să vedem cum funcționează codul de mai sus.
Indiferent ce suntem noi clic primim nu face nimic… în consola. Deci, seamănă cu noi dacă clauza este întotdeauna falsă. Să stabilim o pauză pentru a vedea ce se întâmplă.
Debuggerul se oprește la punctul de întrerupere și ne arată variabilele locale definite. Variabila a făcut clic, arată spre elementul de navigație și nu către element. Deci este innerHTML proprietatea nu este cu siguranță Exemple. De asta am ajuns nu face nimic… de fiecare data. Pentru a repara bug-ul, am putea folosi pur și simplu .nav a în loc de doar .nav.
Abia este abordarea tradițională care funcționează dacă știm exact unde să setăm punctul de întrerupere. Dar dacă lucrăm cu o bază de cod mare și mai ales dacă trebuie să depanem fișierul concatenat, este puțin problematic. Începem plasarea console.log aici și acolo și verificați consola. Acesta va funcționa, dar în curând vom avea o mulțime de date, va fi dificil să filtrați datele și să găsiți informațiile necesare. Chrome are o soluție și pentru această problemă. Am putea să stilizăm producția în consolă adăugând % c în fața textului, a trecut la .Buturuga metodă. După aceea, atașați un al doilea parametru care conține stilurile noastre. De exemplu:
Mai putem adăuga ceva. consolă obiect are două metode, nu atât de populare - grup și groupEnd. Ne dau posibilitatea de a ne grupa bustenii.
Există, de asemenea, o bibliotecă care combină atât stilul, cât și gruparea ieșirii, Deb.js. Singurul lucru pe care trebuie să-l facem este să îl includeți în pagina noastră înainte de celelalte scenarii și să le atașați .deb () la sfârșitul funcției pe care dorim să o inspectăm. Există deasemenea .debc () versiune care trimite grupuri restrânse la consola.
Cu această bibliotecă, putem obține argumentele transmise funcției, valoarea de întoarcere a stivei de urmărire și timpul de execuție. După cum am menționat mai sus, mesajele sunt bine grupate și îmbinate între ele, deci este mult mai ușor să urmăriți fluxul aplicației.
Una dintre caracteristicile ucigașe ale browserului Google este ecosistemul extensiei. Există o modalitate de a scrie programe instalabile care rulează în browser și există zeci de API-uri utile pe care le putem folosi. Cel mai important lucru este că nu trebuie să învățăm o nouă limbă. Tehnologiile pe care le vom folosi sunt HTML, CSS și JavaScript obișnuite. Verificați următoarea introducere în dezvoltarea extensiilor Chrome.
Există chiar și o secțiune separată în magazinul web Chrome numit dezvoltare web. Acesta conține instrumente utile create special pentru noi - dezvoltatori. Există unul numit Yez !. Acesta aduce funcționalitățile terminale în panoul Instrumente pentru dezvoltatori. Suntem capabili să executăm comenzi shell și să obținem rezultatele lor în timp real.
Extensia în sine nu este suficientă pentru a executa comenzile shell. Asta pentru că nu avem acces la sistemul de operare. De aceea există un modul Node.js care acționează ca un proxy. Yez! se conectează la aplicația Node.js care rulează prin prize web. Am putea instala modulul prin intermediul managerului de pachete Node.js folosind npm install -g yez.
Yez! are, de asemenea, o integrare plăcută a Git și ne arată sucursala din directorul curent. Suntem capabili să executăm comenzi terminale și să obținem rezultatele imediat.
Extensia a fost inițial dezvoltată ca un alergător. Deci are o interfață pentru definirea sarcinilor. De fapt, aceasta este doar o serie de comenzi de shell care rulează unul după celălalt. Obținem aceleași rezultate prin crearea de scripturi de shell.
De asemenea, putem vedea ieșirea terminalului în timp real. Extensia este potrivită pentru dezvoltarea aplicațiilor Node.js. În mod normal, trebuie să reporniți procesul Node.js, dar acum totul este vizibil în Chrome.
În calitate de dezvoltatori web, se întâmplă deseori să efectuăm solicitarea HTTP către aplicațiile noastre. Poate că am dezvoltat un API REST sau avem un script PHP care acceptă parametrii POST. Există un instrument de linie de comandă, numit cURL. Este probabil instrumentul cel mai utilizat pentru interogarea web-ului.
Cu cURL, nu trebuie să mergem la terminal. Există disponibil DHC (clientul API REST HTTP). Este o extensie care ne dă un control deplin asupra cererii HTTP. Am putut modifica metoda de solicitare, anteturile sau parametrii GET și POST. De asemenea, afișează rezultatul cererii, cu anteturile sale. Un instrument foarte util.
Știm cu toții importanța testelor. Este extrem de important să știm că programele noastre se comportă corect. Uneori, scrierea de teste poate fi o provocare. Mai ales dacă trebuie să testați interfața cu utilizatorul. Din fericire, există un modul Node.js care controlează browserul nostru (Chrome) și declanșează acțiuni, cum ar fi accesarea unei pagini, accesarea unui link sau completarea unui formular. Se numește DalekJS. Este ușor de instalat prin rularea:
npm instalați -g dalek-cli
Să facem un scurt experiment și să vedem cum funcționează totul. Într-un director nou creat, avem nevoie de a package.json fișier cu următorul conținut:
"nume": "proiect", "descriere": "descriere", "versiune": "0.0.1", "devdeependencies": "dalek-browser-chrome": "0.0.8"; "0.0.10"
După ce a alergat npm install în același director, vom obține dalekjs și Dalek browser-crom instalat într-un node_modules pliant. Vom plasa testul în interiorul unui fișier numit test.js. Să o salvăm în același folder. Iată un script scurt care testează funcționalitatea de căutare a GitHub:
var url = 'https://github.com/'; modul.exports = 'ar trebui să efectueze căutarea în GitHub': funcția (test) test .open (url) .type ('# js-command-bar-field', 'dalek') .submit ('top_search_form') .click ('[href = "/ dalekjs / dalek"]') .assert.text ('repolist h3 a', 'dalekjs / dalek' .repository-description p ',' DalekJS Base framework ',' Este depozitul potrivit ') .done (); Pentru a executa testul, trebuie să tragem dalek ./test.js -b crom în consola noastră. Rezultatul este că DalekJS lansează o instanță a browserului Google Chrome. Se deschide apoi site-ul GitHub, moment în care puteți tasta Dalek în câmpul de căutare și merge în depozitul corect. În final, Node.js închide pur și simplu fereastra deschisă. Ieșirea din consola arată astfel:
DalekJS suportă PhantomJS, Firefox, InternetExplorer și Safari. Este un instrument util și funcționează pe Windows, Linux și Mac. Documentația este disponibilă la pagina oficială dalekjs.com
Când suntem în fața calculatorului nostru, petrecem cea mai mare parte a timpului în browser. Este bine de știut că Google Chrome nu este doar un program pentru navigarea pe Web, ci și un instrument puternic pentru dezvoltarea web.
Acum, există tone de extensii utile și o comunitate în continuă creștere, prin urmare vă indemn să încercați Google Chrome, dacă nu o utilizați deja pentru următoarea aplicație web.
