Share
În 2013, am postat câteva instrucțiuni despre DevTools: Markup și stil, Networking și Consola și JavaScript și performanță, care acoperă caracteristicile de bază ale diferitelor panouri DevTools. De atunci, s-au schimbat multe, așa că haideți să aruncăm o privire.
DevTools a crescut destul de mult de când a fost acoperit ultima dată pe Tuts +, aici sunt câteva dintre caracteristicile pe care veți dori să le cunoașteți:
screencasting: vizualizați și interacționați cu paginile web de pe dispozitivul dvs. Android prin DevTools de pe desktop.
Spațiile de lucru: folosește surse panou ca un editor de cod. Editați codul în proiectul dvs. și persistați pe disc.
Depanarea hărții sursă: scrierea LESS / Sass sau chiar CoffeeScript? Sursa de ieșire Hărți în timpul compilației pentru ca DevTools să înțeleagă cartografia.
* Diagrama flacării: *vizualizați o vizualizare interactivă a procesării JavaScript în timp.
Emulare mobilă: emulați anumite caracteristici ale dispozitivului (de exemplu, dimensiunile ecranului, agenții utilizator) și aplicați-le pe pagina dvs. pentru a vedea cum răspund.
Depanarea canvasului: treceți prin comenzile primite de canvas HTML5 și vedeți cum se schimbă panza cu fiecare instrucțiune.
O mulțime a intrat în DevTools pentru a îmbunătăți fluxurile de lucru pentru dezvoltare și depanare. De la depanarea hărții sursă la depanarea la distanță, există speranța că cel puțin un lucru din această postare va fi capabil să ia și să înceapă să utilizeze. Dacă doriți să încercați câteva dintre aceste funcții, continuați și încercați Chrome Canary.
Cu Screencasting, puteți obține capacitatea de a interacționa cu o pagină web deschisă în Chrome pentru Android, de pe mașina dvs. desktop. Este posibil să faceți clicuri, săgeți, derulare și multe altele folosind un mouse.
Deschide Inspectați dispozitivele făcând clic pe hot dog pictograma din Chrome (colțul din dreapta sus) și mergeți la Instrumente> Inspectați dispozitivele (Alternativ, introduceți crom: // inspecta / # dispozitive în bara de adrese). Asigurați-vă că puteți vedea dispozitivul în listă. Dispozitivul dvs. va trebui să aibă debugging USB activat dacă nu deja. După ce aparatul dvs. sa afișat, introduceți o adresă URL pe care doriți să o depanați de la distanță în secțiunea "Deschideți fila cu adresa URL"și selectați deschis. În acest moment, ar trebui să vedeți încărcarea acestei pagini în Chrome pentru Android. Lovit 'Inspecta"înapoi pe crom: // inspecta pagina și observați un mic Ecran în colțul din dreapta sus al dispozitivului DevTools. Dacă faceți clic pe aceasta, puteți efectua Screencasting.
Ecranul de screencast pe care îl vedeți în cadrul programului DevTools este actualizat în timp real. Dacă parcurgeți pagina (prin DevTools sau pe dispozitiv), omologul său va derula, de asemenea. Observați în screenshot de mai jos, că Inspectează elementul caracteristica se comportă exact așa cum v-ați aștepta, prin faptul că funcțiile precum tastarea și gesturile vă permit să mutați părți importante din fluxul de testare a dispozitivelor dvs. către DevTools.
Consultați documentația oficială privind ecranarea pe ecran a dispozitivului.
Ideea generală este că aveți surse panoul afișează conținutul fișierelor sursă de proiect așa cum acestea există în sistemul de fișiere. Fiecare fișier poate fi editabil cu abilități de salvare pe disc. Editați nu numai fișierele ca editorul de text ci sincronizați modificările acestora dacă editați stiluri în element panou, extern într-un alt editor sau în DevTools.
Pentru pregătirea spațiilor de lucru:
Mai întâi adăugați un dosar în spațiul de lucru. Click dreapta în surse și selectați "Adăugați un dosar în spațiul de lucru'.
Acordați permisiuni de sistem de fișiere conform cerințelor Chrome.
După ce ați acordat permisiuni de sistem de fișiere, puteți continua și edita codul în cadrul programului DevTools și salvați-l exact așa cum ați proceda într-un editor de coduri. Beneficiul real provine din codul de editare care este împărtășit de pagina web pe care o vizualizați. Dacă vă difuzați o pagină la http: // localhost: 3000 / mergeți mai departe și adăugați proiectul corespunzător ca folder de spațiu de lucru în DevTools. În acest moment, veți dori să învățați DevTools despre cartografiere între resursa de rețea și resursa de sistem de fișiere corespunzătoare.
Click dreapta pe un fișier din cadrul unui dosar cu resurse în rețea din surse (asigurați-vă că are o reprezentare evidentă a unui fișier în sistemul dvs. de fișiere).
Selectați Harta la Resursa sistemului de fișiere ...
Odată ce DevTools a fost instruit de cartografiere, fișierele sursă de proiect vor fi afișate în locul fișierelor de resurse de rețea.
Câteva caracteristici mici, dar utile, care merită notate, sunt:
Cele mai multe fișiere vin cu evidențierea sintaxei.
Utilizare Cmd + P pentru a deschide rapid un fișier, dacă vedeți rezultate nedorite (cum ar fi fișiere în interiorul node_modules), Click dreapta pe dosarul conținând și selectați "Excludeți dosarul'.
Creați fișiere noi din Meniul contextual > "Fișier nou'.
Dacă actualizați un fișier în altă parte, DevTools va încerca să se reîncarce automat de la acesta ori de câte ori își recapătă focalizarea.
Consultați documentația DevTools pentru spațiile de lucru de la Google pentru mai multe informații.
Pentru LESS, Sass, CoffeeScript și alte câteva instrumente, procesul lor de compilare poate produce fișiere de hărți sursă. DevTools este capabil să interpreteze astfel de fișiere și să vă ofere abilități live-editare. Aceasta înseamnă că puteți edita fișierele sursă (.mai puțin, .scss, .coffee) în cadrul surse panou. Dacă aveți o sarcină de urmărire pe fișierele dvs. preprocesate care re-compilează un nou fișier CSS / JS la schimbare, DevTools va reîncărca automat din acel fișier la schimbare și va actualiza corespunzător pagina web.
Pentru a înțelege mai multe despre aceste fluxuri de lucru, am discutat în trecut:
Dezvoltarea cu Sass și Chrome DevTools (iunie 2013)
Lucrul cu LESS și Chrome DevTools (ianuarie 2014)
Diagrama Flame vă oferă o imagine de ansamblu a activității JavaScript într-o anumită perioadă de timp.
Pentru a crea și a vizualiza o vizualizare grafică de flacără, colectați un profil CPU JavaScript din Profiluri și selectați opțiunea "Diagramă"vizualiza pe Profil rezultat. Picăturile din grafic pot fi mărite prin tragerea și selectarea o parte din interes. Puteți selecta un interval care va duce la actualizarea corespunzătoare a diagramei flacării, apoi trageți flăcările orizontal sau vertical pentru a vă deplasa în jurul.
Înălțimea tuturor barelor dintr-o anumită coloană nu este semnificativă, ci reprezintă pur și simplu fiecare apel de funcție care a avut loc. Ceea ce este important, totuși, este lățimea unei bare, deoarece lungimea este legată de momentul în care a fost executată funcția.
Fiecare bara poate fi suspendată pentru a aduce detalii detaliate. Un punct de plecare pentru a descoperi blocajele de performanță ar fi:
Găsiți o bară largă în diagrama flacarii.
Planare peste ea pentru a aduce în detaliu secțiunea.
Asigurați-Timpul total"este într-o sumă satisfăcătoare.
O bară care are un timp de execuție ridicat poate încetini pagina web în jos, clic pe care urmează să fie luate la punctul corespunzător în cod.
Există o documentație dedicată pentru Google Flame Chart.
Emularea mobilă permite desktopului Chrome să imite anumite caracteristici ale dispozitivelor mobile. Caracteristicile pot fi controlate individual sau printr-un set de presetări fixe, bazate pe dispozitive populare cum ar fi Nexus 5, Galaxy S4, iPhone, iPad, Kindle și multe altele.
În curând, puteți aplica o presetare a dispozitivului pentru a vedea cum se comportă pagina web inspectată în condiții mobile.
Deschideți sertarul DevTools lovind Evadare.
Navigați la panoul de emulare.
Selectați 'Google Nexus 5'
Presa 'Imită'
De asemenea, veți dori să actualizați pagina pentru a vă asigura că setările dispozitivului au fost aplicate corect. Observați modul în care zona vizibilă a paginii web este acum mult mai mică, aceasta corespunde raportului de aspect al presetării dispozitivului. Ce altceva sa schimbat?
Agent utilizator: Tastare navigator.userAgent în consola va ieși emulat agent utilizator de dispozitive, de exemplu: "Mozilla / 5.0 (Linux; Android 4.2.1; en-us; Nexus 4 Build / JOP40D) AppleWebKit / 535.19 (KHTML ca Gecko) Chrome / 18.0.1025.166 Mobile Safari /
Rezolutia ecranului: Dimensiunile raportate screen.width și screen.height acum raportați dimensiunile pe care le veți primi de la dispozitivul însuși. Luați notă, pentru presetarea Nexus 5, lățimea și înălțimea sunt raportate ca 384 și 640 respectiv. A se vedea Un pixel nu este un pixel nu este un pixel.
* devicePixelRatio: *window.devicePixelRatio rapoarte 2 care va permite o interogare media care vizează raportul min-dispozitiv-pixel: 2.
Atingeți evenimente: "Clicurile" pe care le efectuați se vor traduce acum în atingerea obișnuită a atingerii, atingerea și alte evenimente. Indicație: Ascultați rapid evenimentele tactile utilizând monitorEvents (fereastră, "touchstart"); în Consolă panou.
Indiferent de presetarea unui dispozitiv, există și alte opțiuni de emulare disponibile care pot fi activate. Panoul de senzori din panoul Emulation conține un accelerometru în timp real care poate fi tras în jur.
Puteți personaliza latitudinea și longitudinea raportate, care se află și în panoul Senzori, aceasta este utilă atunci când pagina web inspectată face uz de navigator.geolocation metode.
Pentru mai multe informații despre opțiunile de emulare disponibile în DevTools, consultați documentația oficială Emulation Mobile.
Inspecția Canvas în DevTools este în prezent o caracteristică experimentală. Activați-l la DevTools> Setări> Experimente. Inspecția Canvas este în esență un tip de profil, deci o veți găsi sub Profiluri în cazul în care acesta poate fi activat.
Profilul de pânză colectează instrucțiunile trimise pe panza însăși și vă permite să treceți prin fiecare dintre ele în timp ce vizualizați stările de proprietate actuale ale canvasului și o reprezentare vizuală a pânzei la un moment dat.
Odată ce un profil a fost înregistrat, puteți explora elementele de nivel superior (desenați grupuri de apeluri) și puteți descoperi apeluri individuale de remitere (ctx.drawImagede exemplu). În partea dreaptă a fiecărui apel remiză, ia notă de fișier: LineNumber referință, făcând clic pe aceasta vă îndreaptă spre surse Panou cu linia relevantă de cod selectată. Puteți utiliza bara de instrumente:
... pentru a naviga cu ușurință prin apeluri individuale de remitere sau pentru grupuri de apeluri de tragere ulterioare. În meniul derulant, puteți specifica contextul canvasului pentru a inspecta proprietățile, dacă există mai multe.
Un ghid mai detaliat, consultați: Inspecția Canvas folosind Chrome DevTools peste HTML5Rocks.
DevTools pentru mobil - Chrome Dev Summit 2013 de Paul Irish.
Există și Breakpoint Ep. 6: Accelerarea timpului de încărcare, a timpului de execuție și a instrumentelor JS, care are un accent puternic pe performanță, este un an vechi, dar merită încă un ceas.
Pentru cei care au pagini de derulare lentă pe mobile, checkout: The Breakpoint Ep. 7: Profilarea unui site mobil cu Chrome DevTools cu Paul Irish și John McCutchan
Un episod frumos în profunzime de întrerupere a memoriei: Ep. 8: Profile de memorie cu Chrome DevTools, caracteristicile episodului Loreena Lee și John McCutchan.
Addy Osmani a creat un video de productivitate DevTools: Îmbunătățirea productivității dvs. 2013 cu Chrome DevTools.
Paul Irish prezintă o mulțime de caracteristici experimentale anterioare în DevTools.
Unele fragmente de programe DevTools au fost publicate pe HTML5 Rocks, există edițiile din noiembrie și decembrie, cele mai recente fiind ediția Chrome 33.
Remy Sharp își împărtășește opiniile în performanța de randare cu panoul Timeline.
Paul Lewis și Addy Osmani au scris recent un articol extrem de detaliat pentru Smashing Magazine intitulat: Gone In 60 Frames per Second: Un Pinterest Paint Performance Case Study care este frumos, deoarece oferă exemple practice de performanță problematică.
Aventurile în Jank Busting: Parallaxul, performanța și noua pagină de pornire Flickr, care a fost postată pe blogul Flickr Engineering, este un alt post uimitor de detaliat cu privire la modul în care performanța slabă a fost îmbunătățită dramatic prin luarea de măsuri asupra măsurătorilor panoului Timeline.
Brian Grinstead împărtășește Fracturile DevTools pe GitHub împreună cu o postare pe blog.
Secretele instrumentelor de dezvoltare ale browserului de Andi Smith au o gamă largă de sfaturi pentru DevTools, care ar trebui să contribuie, sperăm, la creșterea eficienței dezvoltatorilor în timpul fluxului lor de lucru.
DevThemez conține o grămadă de teme personalizate care pot fi utilizate cu DevTools.
Încerc să reciti / împărtășesc link-uri utile pe paginile mele Twitter și Google+ din profilul meu, aici la Tuts+.
Asta-i tot pentru moment, mulțumesc pentru lectură.
Cum ai învățat? Aflați mai multe despre Chrome DevTools!
Accentsconagua