Share
Verificați noile caracteristici noi ale dezvoltatorilor pentru Chrome 4, cum ar fi suportul cross-platform, integrarea minunată a inspectorilor web și extensiile noi la îndemână. Este din ce în ce mai greu să refuzi Chrome titlul de browser nou pentru dezvoltatorii web. Dacă nu este încă acolo, va fi în curând!
Cu ajutorul timpului de încărcare rapidă, a unui motor JavaScript rapid, a unei fundații solide WebKit și a unei suporturi de nume mari, Google Chrome a câștigat o cotă de piață respectabilă, depășind chiar Safari, devenind al treilea cel mai popular browser din decembrie. Cu toate acestea, pentru dezvoltatori, Firefox a fost iubitul multor datorită capacității sale de a funcționa pe orice sistem de operare și datorită ofertei sale bogate de programe de dezvoltare web, cum ar fi Firebug și Bara de instrumente Web Developer. Dar este important să testați JavaScript în toate browserele și să aveți un set robust de instrumente în fiecare (inclusiv Internet Explorer), este exact ceea ce dezvoltatorii trebuie să profite la maximum de codul lor.
Norocos pentru noi, oamenii de la Google au muncit din greu pentru a face platforma Chrome încrucișată, să integreze Web Inspectorul fantastic WebKit și să adauge extensii, făcând Chrome 4 un instrument uimitor de util pentru dezvoltarea web-ului. În acest tutorial, voi demonstra câteva dintre caracteristicile care fac din Chrome 4 un plus extraordinar pentru centura utilitar dezvoltator web.
Începând cu data de 25 ianuarie, Chrome 4 a fost lansat oficial ca stabil pentru Windows. Utilizatorii Mac și Linux, cu toate acestea, trebuie să fim puțin mai curajoși pentru a experimenta tot ceea ce Chrome 4 are de oferit. Utilizatorii de Mac trebuie să descarce versiunea "dev", iar utilizatorii Linux au versiunea "beta" și merită foarte mult! Consultați următoarele linkuri pentru a obține o copie a sistemului Chrome pentru sistemul dvs. de operare, care acceptă tot ce vom discuta în acest articol:
Acum hai să intrăm în zăpadă! În Firefox, Firebug este o poveste de dragoste pentru dezvoltatori, oferind o consolă de depanare, manipulare HTML & CSS, profilare JavaScript și o mulțime de alte bunătăți. Persoanele WebKit au luat notă și în ultimii ani au perfecționat un set de instrumente numite Web Inspector, care oferă un set similar de caracteristici pentru Firebug. În Chrome 4, Inspectorul Web este etichetat "Instrumente pentru dezvoltatori".
În plus față de Chrome 4, Inspectorul Web a fost în acțiune pentru o perioadă de timp din versiunile anterioare de Chrome și Safari, deși este puțin ascuns. Pentru a accesa Inspectorul Web în diverse browsere:
Dacă nu ați lucrat cu consola Firebug sau Web Inspector, atunci vă lipsesc într-un mod minunat de a ajuta la depanarea JavaScript. Consola JavaScript servește mai multe funcții importante, cum ar fi captarea de erori și prezentarea acestora într-un format util, testarea biților scurți de JavaScript și un loc convenabil pentru a înregistra informații utile precum valori variabile și timpi de execuție. Practic vorbind, utilizez în mod regulat acest instrument pentru a evalua performanța programelor mele și pentru a vă asigura că anumite variabile sunt calculate corect.
În plus față de consolă JavaScript, este întotdeauna plăcut să aveți un instrument care vă permite să vizualizați rapid informațiile HTML și stilul anumitor elemente din pagină. Panoul Web Inspector Elements oferă o structură arborescentă a Modelului Obiectului de Document (DOM), permițându-vă să faceți o descoperire în document pentru a selecta un element de interes. De asemenea, puteți accesa informațiile unui anumit obiect făcând clic dreapta pe un element din browser și selectând "Inspect Element".
În cele din urmă, trebuie să observ că panoul Elemente permite o inspecție mult mai mult decât simplă. Puteți modifica și adăuga stiluri, puteți modifica html și, în cele mai recente versiuni, puteți vizualiza ascultătorii de evenimente atașați la un element DOM selectat. Aceste caracteristici pot fi toate la îndemână atunci când aveți de-a face cu niște ciudățenii pe care nu le puteți înțelege.
Ultima caracteristică pe care aș dori să o evidențiez în cadrul instrumentului Web Inspector / Developer Tools este fila "Resurse". Dacă ați lucrat cu fila "Net" a Firebug, veți observa mai multe asemănări. În esență, fila Resurse oferă o defalcare a tuturor informațiilor care sunt schimbate între browserul dvs. și server, de la imagini la JavaScript spre documentul în sine. Acesta arată, de asemenea, o multitudine de informații la îndemână, cum ar fi:
Un instrument elegant care permite o inspecție ușoară a vitezei paginii, fila Resurse vă poate ajuta să identificați și să înlăturați blocajele de performanță. Faceți o încercare și vedeți unde este prea grasă pagina dvs., apoi subțiriți imaginile și codurile pentru a oferi o experiență mai bună utilizatorilor dvs.!
O privire de ansamblu completă a Instructorului de Web / Instrumente pentru dezvoltatori ar putea fi cu ușurință un tutorial pe cont propriu, dar avem mai mult teren pentru a ne acoperi! Vă recomand să consultați următoarele resurse pentru a afla mai multe:
Acum, în timp ce am fost mereu sufocată de viteza Safari 4 și Chrome, în comparație cu Firefox, amândoi nu aveau o funcție critică: add-on-uri. În Chrome 4, toate modificările prin adăugarea de "extensii". Puteți adăuga funcții în Chrome descărcând și instalând extensiile sau utilizând instrumentele standard ale comerțului: HTML, CSS și JavaScript, pentru a vă scrie propriul. Extensiile pot fi descărcate de pe Depozitul de extensii Chrome și ar trebui să fie destul de simplu de instalat. Deja s-au creat o serie de extensii foarte convingătoare care ajută la dezvoltarea web-ului, de la validarea rapidă până la testarea rezoluției. Să aruncăm o privire la câteva.
Un dezvoltator web nu poate niciodată să fie cu adevărat obsedat de performanță și cu cât mai multe instrumente care identifică performanțele lente, cu atât mai bine. Aici intră în joc Speed Tracer, o extensie Chrome dezvoltată de Google. Speed Tracer trece panoul "Resurse" la nivelul următor, oferind o vizualizare a timpului necesar pentru a executa sarcini de nivel scăzut, cum ar fi redarea CSS sau parsarea HTML și JavaScript. V-aș recomanda să aruncați o privire la o demonstrație video a Speed Tracer realizată de oamenii de la Google pentru a obține o idee mai bună despre cum vă poate ajuta să îmbunătățiți performanța aplicațiilor dvs..
Trecerea de la Firefox la Chrome, o extensie pe care toată lumea o va căuta este o înlocuire a fantasticului Bara de instrumente Web pentru dezvoltatori. Pentru cei care nu știu, Web Developer Toolbar se ocupă de sarcinile pe care Firebug nu le-a avut de făcut, cum ar fi validarea rapidă a HTML și CSS, abilitatea de a dezactiva rapid JavaScript sau imaginile și un instrument pentru verificarea legăturilor. Toate aceste funcții sunt tratate cu stil de către Pendule, care oferă o mare parte din funcționalitatea de bază a Barei de instrumente Web pentru dezvoltatori (nu chiar toate), oferind în același timp câteva beneficii de-ale sale, cum ar fi un picker de culoare.
Dezvoltatorii Web trebuie adesea să se asigure că desenele lor lucrează la o varietate de rezoluții. Rezoluția Test permite dezvoltatorilor să redimensioneze eficient fereastra browserului lor la o serie de rezoluții comune pentru testare rapidă și ușoară. Cea mai recentă versiune vă permite chiar să deschideți mai multe ferestre la rezoluții diferite, cu doar câteva clicuri. Rezoluția Test este fantastic pentru a vă asigura că publicul țintă văd pagina pe care doriți să le vadă.
Există ocazii când este necesar nu numai să apucați o captură de ecran a porțiunii vizibile actuale a unui site, ci o captură de ecran a întregii pagini. De exemplu, este posibil să doriți să imprimați o pagină completă pentru o examinare critică sau pentru a vă demonstra în portofoliul dvs. Am folosit anterior un instrument desktop pentru acest lucru, dar acum pagina Web ScreenShot face o treabă bună de a captura imagini de ecran full-page în câteva clicuri.
Întâlnești vreodată o pagină fantastică și te întrebi: "Ce folosesc pentru a construi acest lucru?" Eu fac și adesea mă găsesc săpat prin codul sursă încercând să dau seama cine este omul din spatele cortinei. Deși este un exercițiu util de antrenament și unul necesar dacă sunteți într-adevăr doriți să aflați ce se întâmplă, Chrome Sniffer vă poate oferi, de obicei, un instantaneu din care cadrele JavaScript și PHP sunt utilizate pentru o anumită pagină. De exemplu, navigați la NetTuts și Chrome Sniffer ne informează că este rulat pe Wordpress folosind Google Analytics și jQuery.
Viitorul dezvoltării web continuă să pară mai strălucitor și mai strălucitor! În timp ce acum câțiva ani aveam un set limitat de instrumente pentru depanarea JavaScript, tinkering cu CSS și vizualizarea HTML, astăzi avem o varietate de opțiuni puternice. Acum că Google Chrome a devenit platformă încrucișată, a integrat pe deplin WebKit Web Inspector și a adăugat extensii, este un instrument versatil pentru a ajuta dezvoltatorii să-și îmbunătățească propriile pagini. Vă încurajez pe toți să descărcați o copie pentru dvs. și să faceți o șansă pentru a vedea dacă vă poate ajuta să vă îmbunătățiți paginile, apoi reveniți aici și împărtășiți pluginurile și instrumentele dvs. preferate cu ceilalți!
Știați că puteți câștiga până la 600 USD pentru a scrie un tutorial PLUS și / sau pentru noi? Căutăm tutoriale detaliate și bine scrise despre HTML, CSS, PHP și JavaScript. Dacă sunteți în măsură, contactați Jeffrey la [email protected].
Rețineți că o compensație reală va depinde de calitatea tutorialului final și a scenariului.
Accentsconagua