Share
În această a treia parte a seriei noastre de instrumente pentru dezvoltatori Chrome, vom examina modul de modificare și depanare a JavaScript. Optimizarea este o parte importantă a procesului de dezvoltare, în special pentru aplicațiile critice de performanță. Vom discuta, de asemenea, tehnici de identificare a blocajelor potențiale în codul nostru.
Ca și în cele două articole anterioare, mă voi concentra pe caracteristicile din build-ul Canarelor Chrome (versiunea 26.0, din această scriere). Voi acoperi panourile Surse și Timeline.
Panoul Sursa este locul de deplasare pentru depanarea JavaScript. Acest panou, împreună cu panoul Console, face ca un instrument extrem de puternic! Este o interfață punct-și-clic care vă permite să întrerupeți executarea JavaScript și să inspectați toate variabilele și obiectele din domeniul de aplicare curent.
Este posibil să vi se creeze utilitatea editării CSS și JavaScript în Tools Developer.
Accentsconagua
acest cuvântul cheie la diferitele etape ale unui program JavaScript, puteți ceas acest cuvânt cheie pentru a vedea diferitele sale valori în timp. Faceți clic pe butonul de adăugare pentru a adăuga o expresie, iar dacă o expresie nu se actualizează, apăsați butonul mic de reîmprospătare de lângă butonul de adăugare.În fila surse sunt afișate resursele grupate de subdomeniul din care sunt difuzate. Fiecare resursă are un meniu contextual (dezvăluit prin clic dreapta pe resursă) cu un set de opțiuni comune. O opțiune, totuși, este foarte interesantă: Modificări locale, la care ne vom uita mai târziu.
Notă: Puteți vizualiza lista de fișiere sursă ca o listă plană (adică nu este cuprinsă în dosare grupate pe sub-domenii) debifând "Afișare dosare" în Setări> Generalități.
Apăsând pe o resursă se afișează în panoul principal de conținut. Nu uitați să activați modul destul de tipărit pentru resurse minime, deoarece unele minifiere redenumesc variabilele pentru a face codul mai greu de înțeles. Sperăm că mai mulți dezvoltatori vor genera hărți sursă în viitor, făcând mai ușoară lucrul cu codul miniatural.
Puteți edita majoritatea fișierelor din panoul principal de conținut, iar aceste modificări se reflectă imediat în browser. După efectuarea modificărilor la o resursă, meniul contextual vă oferă capacitatea de a salva (deși nu este permanent) sau de a salva ca (salvează o nouă versiune local). Când lucrați cu propriile site-uri locale, vă recomandăm să vă editați CSS și JavaScript în Tools Developer în locul IDE. Salvarea modificărilor, în acest caz, modifică fișierul sursă actual. Unelte cum ar fi Tincr sau chrome-devtools-autosave pot ajuta la automatizarea acestui flux de lucru.
Meniul contextual al resursei oferă și opțiunea de a dezvălui resursele din panoul de rețea.
O revizuire este un nou punct în cadrul duratei de viață a unei resurse, asupra căruia a fost modificată. Modificarea și salvarea codului din panoul surselor creează o nouă revizuire, iar schimbările de stil realizate în cadrul panoului Elemente declanșează o nouă revizuire!
După ce ați făcut câteva modificări, puteți să faceți clic dreapta pe resursă și să selectați Modificări locale. Aceasta deschide un nou panou Local Modifications, care conține o difare a fișierelor originale și editate. În cadrul panoului Modificări locale, putem reveni la un fișier sursă modificat în întregime (util pentru că ați făcut un număr mare de modificări nedorite) dând clic pe "revert" de lângă numele fișierului.
Instrumentele de dezvoltator sunt destul de amabil pentru a ne avertiza asupra optimizărilor potențiale.
Panoul principal de conținut are multe dintre caracteristicile pe care le-ați găsi în editorii de coduri de bază: numerele de linie, evidențierea sintaxelor, capacitatea de a crea file și funcția "anula". În timp ce nu se potrivește cu un IDE cu drepturi depline, nu este rău pentru editare rapidă.
Punctele de blocare ne permit să oprim executarea codului JavaScript și să examinăm mediul actual. De exemplu: presupuneți că avem un simplu pentru buclă care împinge elemente pe o matrice. Scopul nostru este de a intelege cu exactitate lucrarile interioare din fiecare iteratie a buclei. Am putea folosi foarte usor console.log pentru a înregistra variabilele pe care dorim să le inspectăm. În timp ce această tehnică vă va oferi rezultatele dorite, cu siguranță nu este cea mai eficientă tehnică de depanare. Utilizând punctele de întrerupere, putem întrerupe executarea codului în interiorul lui pentru buclă și inspectați toate variabilele din sfera de cuprindere a contextului.
var arr = []; pentru (var i = 0; i < 3; i++) var num = i; arr.push(num);
Pentru a adăuga un punct de întrerupere, faceți clic pe numărul liniei; puteți de asemenea să faceți clic dreapta pe numărul de linie și să alegeți opțiunea "Add Breakpoint". După ce ați setat punctul de întrerupere, reîmprospătați pagina și observați că punctele de întrerupere persistă între încărcările paginii. Dacă codul nu a executat încă (de exemplu, punctul de întrerupere a fost setat în interiorul unui handler de evenimente pentru clicuri), puteți iniția executarea de cod fără o reîmprospătare a paginii.
Puteți codifica greu un breakpoint în codul dvs. utilizând depanator; declarație în codul dvs. Instrumentele de dezvoltare (și majoritatea depanatoarelor JavaScript) recunoaște acest lucru ca punct de întrerupere.
Atunci când atingeți un punct de întrerupere, pagina devine gri și linia de cod este albastră. În acest moment, putem apăsa tasta de evacuare pentru a afișa panoul consolei. Ce este interesant este faptul că codul scris și executat în consola (în timp ce se întrerupe pe un punct de întrerupere) se execută de fapt în contextul în care pauza este momentan! În mod tipic, acest cuvântul cheie se referă la globale fereastră obiect; întrucât vizualizarea acest într-un clic gestionarea evenimentului arată valoarea ca țintă pentru eveniment (un element).
În captura de ecran de mai sus, porțiunea gri este documentul în sine, iar Instrumentele pentru dezvoltatori au evidențiat linia curentă de JavaScript. În consolă, vedeți rezultatele inspectării câtorva variabile. Și în partea dreaptă a panoului de conținut este panoul "Variabilele de domeniu", unde puteți inspecta toate variabilele și obiectele din domeniul de aplicare actual.
Punctele de rupere condiționate vă permit să rupeți atunci când o anumită condiție este adevărată.
În panoul din partea dreaptă a panoului Surse, veți observa tab-ul XHR Breakpoints. Faceți clic pe "Adăugați XHR Breakpoint" pe site-ul dvs. favorit Ajax. Lăsând pauzele goale pe câmpul "Conține URL" orice XHR cerere.
Acest lucru îi oferă dezvoltatorilor oportunități noi și puternice. Putem naviga către un site pe care nu l-am construit, nu ne-am implicat și pur și simplu am început să depanem codul bazat pe anumite evenimente și criterii. Așadar, întreruperea solicitărilor Ajax este plăcută, dar ce alte evenimente ne putem rupe?
Panoul surselor are o interfață punct-și-clic pentru a seta puncte de întrerupere care se potrivesc anumitor ascultători de evenimente. Rețineți că ruperea unui anumit eveniment funcționează numai atunci când pagina în cauză ascultă evenimentul respectiv. Dacă vom rupe pe Control> Redimensionare evenimentul, având un cod ca cel de mai jos, asigură ruperea codului atunci când se produce evenimentul:
window.onresize = funcția (e) console.log (e); ;
Deci, atunci când este de rupere pe anumite evenimente utile?
Punctele de blocare persistă între încărcările paginii.
Fila DOM Breakpoints afișează puncte de întrerupere pentru DOM. O modalitate simplă de a vedea acest lucru în acțiune este de a găsi un element care, de exemplu, atunci când are clic are numele clasei proprietatea sa schimbat. Găsiți elementul în panoul Elemente, faceți clic dreapta pe el și mergeți la Break On> Modificări atribute. Codul se va rupe atunci când valorile atributelor elementului se schimbă.
document.querySelector ('# button'); onclick = function () this.setAttribute ('some', 'thing'); ; onclick managerul de evenimente de mai sus este considerat o modificare a atributului, care prezintă ceva similar cu acesta:
Alte opțiuni includ:
element.remove ().Notă: Chrome pare să fi implementat metoda remove (). Unele browsere nu acceptă această metodă; deci va trebui să utilizați removeChild ().
Panoul Timeline reprezintă locul în care investigați problemele de performanță ale aplicației dvs. web. Scopul principal al panoului Timeline este (în momentul redactării) pentru vizualizarea informațiilor, spre deosebire de celelalte panouri care vă permit să efectuați acțiuni distructive pe pagină.
Timpii pe care doriți să utilizați panoul Cronologie includ:
Puteți codifica greu un breakpoint în codul dvs. utilizând
depanator;declarație în codul dvs..
În Partea 2, vă puteți aminti cum am început să înregistrăm informațiile despre rețea înainte de încărcarea paginii pentru a capta cât mai multe cereri de rețea. Nu facem asta în panoul Timeline; suntem mai bine să înregistrăm evenimente scurte și specifice. Nu trebuie neapărat să facem nimic. Am putea lăsa înregistrarea pentru a vedea ce se întâmplă atunci când utilizatorul este inactiv sau dacă se pot executa temporizări în fundal.
Fila "Evenimente", "Cadre" și "Memorie" sunt populate în timpul înregistrării; astfel încât, asigurați-vă că pentru a căuta prin ele pentru a găsi datele de care aveți nevoie. Secțiunea Memorie vă poate ajuta să capturați eventualele scurgeri de memorie.
Înregistrările sunt afișate în timpul și după înregistrări. O cantitate echitabilă de date este înregistrată în înregistrări, după cum se arată în imaginea următoare.
Această captură de ecran prezintă câteva solicitări de rețea (albastru) și câteva "stiluri recalculate" (purpuriu). Recalcularea stilului se poate întâmpla din mai multe motive. Înregistrările galbene sunt scripturi, iar verde reprezintă redarea paginilor.
Dacă faceți clic pe sau treceți peste o înregistrare, veți afișa mai multe informații. De exemplu, trecerea peste o înregistrare "vopsea" vă poate arăta partea din pagină care a fost pictată.
Instrumentele pentru dezvoltatori vor lega uneori o înregistrare într-un alt panou. De exemplu, link-ul unei imagini vă direcționează către panoul Resurse cu imaginea în focalizare și o înregistrare XHR ar putea fi legată la intrarea corespunzătoare din panoul Rețea.
Instrumentele de dezvoltator sunt destul de amabil pentru a ne avertiza asupra optimizărilor potențiale. Observați pictograma mică de notificare în partea dreaptă a unora dintre înregistrările din imaginea următoare. Dacă este estompată, va trebui să efectuați o analiză detaliată pentru a găsi înregistrarea reală care conține informațiile utile.
Popovers uneori conțin o legătură cu linia de cod care a cauzat afișarea înregistrării. Dar un avertisment: imprimarea destulă nu va ajuta întotdeauna - mai ales atunci când se uită la codul terț. O opțiune este să setați un punct de întrerupere pe linia la care sunteți luată. Odată ce debuggerul a întrerupt, puteți vizualiza conținutul variabilei pentru a înțelege mai bine intenția codului.
Dacă sunteți ca mine, întotdeauna ați ajuns să captați mai multe date decât aveți nevoie, dar puteți forma o selecție pe barele verticale (cadre) care afișează numai înregistrările corespunzătoare părții selectate.
Dacă vă interesează numai înregistrările de lungă durată, setați un filtru pentru a afișa numai acele înregistrări lungi. Puteți face acest lucru în partea de jos a panoului temporal.
Dacă derularea nu se simte așa de netedă, luați în considerare excluderea "Încărcare" (de ex. Înregistrări de rețea). Acestea fiind spuse, dacă știți că solicitările de rețea sunt utilizate pentru a încărca datele într-o pagină care permite utilizatorilor să deruleze infinit, veți dori să păstrați eticheta "Încărcare".
Nu aplicați filtrarea doar pentru că datele apar prea mult la început. Aveți timp să înțelegeți și să investiga ce vă arată instrumentele dev. Veți dori să utilizați cronologia pentru a confirma situația în care apar încetinirile și pentru a obține ca barele verticale să fie cât mai libere posibil (spațiu alb / timp de așteptare).
Panoul principal de conținut are multe dintre caracteristicile pe care le-ați găsi în editorii de cod de bază.
Cunoașteți alte resurse utile? Menționați-o în comentarii!
