Share
În partea 1, am văzut cum să scriem și să executam JavaScript folosind DevTools. În partea 2, vom analiza depanarea JavaScript și adoptarea unui flux de lucru astfel încât rezolvarea erorilor JavaScript și diagnosticarea problemelor devin mai eficiente.
Puteți utiliza cuvântul cheie de depanare direct în codul dvs. pentru a invoca capacitățile de depanare (dacă există) ale runtime-ului JavaScript. Efectul adăugării cuvântului cheie debugger în codul dvs. este identic cu setarea manuală a punctului de întrerupere prin interfața DevTools. În Chrome, debugger cuvântul cheie nu are efect în timp ce DevTools este închis.
Controalele de depanare oferă un control cu granulație fină asupra debitului. Folosiți-le atunci când ați întrerupt la un punct de întrerupere pentru a vă naviga eficient prin codul JavaScript. Fiecare control de depanare enumerat în această secțiune corespunde unui buton din DevTools pe care îl puteți selecta în timp ce întrerupeți la un punct de întrerupere.
Lăsăm punctul de întrerupere curent și reluați executarea codului ca în mod normal. Acest lucru nu afectează alte întreruperi care nu au fost încă întrerupte.
Utilizare Continua când punctul curent de întrerupere nu este util și doriți ca execuția codului să fie reluată în mod normal.
Pas prin linie de linie (câte o linie pe clic) până la atingerea unui apel de funcție. În acest moment, apelul pentru funcții este pasul "peste" și nu intrați în apelul respectiv.
Utilizare Pas peste când ceea ce încercați să rezolvați este cuprins în funcție de funcția curentă și nu aveți nevoie să vă uitați la apelurile pentru funcții externe.
Similar cu Pas peste, cu excepția faptului că, în acest caz, navigați la apelurile externe de funcții accesând prima lor linie.
Utilizare Pășește înăuntru atunci când vă interesează linia de execuție a liniei, precum și orice apeluri de funcții externe.
Când intri într-o funcție, Iesi afara va continua să execute restul care codifică funcțiile, cu toate acestea nu este depanat.
Utilizare Iesi afara când nu aveți niciun interes pentru restul funcției actuale și doriți să continuați depanarea în afara acesteia.
Stivă de apel este activă când este întreruptă la un punct de întrerupere. Calea de execuție care duce la punctul de întrerupere curent este prezentată în stiva de apel, apelul de sus fiind cel mai recent.
Fiecare apel din stack conține:
Faceți clic pe orice apel din interiorul stivei pentru a naviga până la punctul din codul sursă cu linia relevantă evidențiată. Pentru a copia o urmă de stivă în clipboard, Click dreapta la un apel și selectați Trasați urmărirea stivei. În meniul contextual al stivei de apel, puteți de asemenea să selectați Restartați cadrul.
Luați în considerare cazul de utilizare că debuggerul a întrerupt la jumătatea distanței printr-o funcție de apel invers declanșată de un handler de evenimente de tip clic și încercați să depanați motivul pentru care recuperarea ţintă nu pare să funcționeze așa cum era de așteptat.
Vedeți că a fost făcută o încercare de a accesa proprietatea țintă ca parte din acest cuvânt cheie, dar vă reamintesc că este o parte proprietate a obiectului eveniment trecut ca un argument la funcția de apel invers.
Puteți rescrie funcția utilizând Live Edit pentru a verifica dacă modificările dvs. funcționează și JavaScript nou este injectat în motorul V8.
Când scrieți un handler de evenimente pentru un eveniment, cum ar fi defilarea, puteți începe prin utilizarea console.log pentru a vedea ce arată argumentul trecut (obiectul evenimentului). Un sfat rapid pentru a realiza acest lucru este de a utiliza monitorEvents comenzi rapide. Lipiți următorul cod în Panoul consolei apoi parcurgeți pagina:
monitorEvents (fereastră, "redimensionare");
Observați că obiectul evenimentului este înregistrat în consola gata pentru inspecție.
Când doriți ca depanatorul să întrerupă pe prima linie a unei funcții în timpul executării, puteți face una dintre următoarele acțiuni:
O altă tehnică este de a executa debug (fn) care face parte din API-ul de linie de comandă. Funcția are funcția pe care doriți să o depanați drept argument și veți rupe pe prima linie a executării acelei funcții.
Această tehnică vă permite să întrerupeți depanatorul atunci când o proprietate a unui obiect care vă interesează este accesat în orice mod (o citire sau scriere). Pentru a rupe atunci când o proprietate a unui obiect este citită sau scrisă, executați următoarele (prin Panoul consolei sau Snippeturi):
Object.defineProperty (document.body, 'scrollTop', get: function () debugger;, set: function (val) debugger;);
Se aplică un getter și un setter la scrollTop proprietate a document.body obiect. În introducerea și setterul personalizat, instrucțiunea de depanare există. Puteți utiliza, de asemenea Object.observe pentru a sparge adăugările de proprietăți pentru un anumit obiect:
var ceasMe = ; Object.observe (watchMe, funcția () debugger;);
Cuvinte cheie de depanare deoparte, pentru a seta un breakpoint prin DevTools, puteți face clic pe linia de cod pe care doriți să o rupeți în cadrul jgheabului de linie. Această metodă de setare a punctului de întrerupere are funcționalitate suplimentară: ați setat un punct de întrerupere condiționat care va instrui DevTools să întrerupă la un punct de întrerupere numai dacă o anumită expresie este evaluată la adevărat. De exemplu, puteți seta un pauză condiționată pentru a întrerupe numai dacă există un argument de eroare.
Pentru a seta un punct de întrerupere condițional:
De asemenea, puteți utiliza tehnica de întrerupere condiționată pentru a introduce rapid o console.log ca expresie de evaluat. De cand console.log evaluează pentru nedefinit, DevTools nu se oprește, dar din moment ce expresia este încă executată, puteți verifica valoarea variabilelor în acest fel.
Când instrumentul de depanare este întrerupt la un punct de întrerupere, puteți să aduceți mesajul Panoul consolei în modul Drawer folosind Evadare cheie. Codul pe care îl introduceți este evaluat în același context ca și punctul în care sunteți întrerupt, ceea ce înseamnă că variabilele care sunt în scop vor fi accesibile pentru dvs..
O expresie de ceas este un instrument pentru a simplifica tehnica inspecției periodice (prin console.log de exemplu) de variabile scop. Expresiile de ceas este un panou din panoul Surse. Puteți adăuga sau elimina expresii de vizionare folosind La care se adauga și Minus butoane. Un obiect tipic de urmărit este acest obiect; Observați cum se referă la un obiect fereastră globală atunci când nu sunteți întrerupt la un punct de întrerupere.
Uita-te la Expresii va actualiza, de obicei, în timp ce pas cu cod. Cu toate acestea, dacă nu faceți clic pe Reîmprospăta buton.
Luați în considerare următorul script:
Accentsconagua
funcția a () return b (); funcția b () return c (); funcția c () console.trace ('The Trace'); return 42; A();
Există trei funcții declarate. Funcţie A funcția de apeluri b, apoi funcția b funcția de apeluri c. Scriptul inițiază lanțul cu un apel pentru a funcționa A. console.trace declarați jurnalele în consolă o urmă de stivă din punctul în care a fost apelată metoda. Utilizând console.trace afișează ieșirea de utilizare console.trace.
Rețineți că numele mesajelor și liniile în care sunt denumite sunt afișate în mesajul de urmărire. Puteți să faceți clic pe numărul liniei care urmează să fie luată până la punctul său din Codul sursă, prin panoul Surse. Această tehnică funcționează și pentru fragmente.
Debuggerul oferă diferite moduri de abordare a excepțiilor:
Atunci când trebuie să depanați un site pe care nu îl cunoașteți, puteți utiliza o altă tehnică de depanare. În această abordare, vă alăturați evenimentelor pe care credeți că le va declanșa și cereți DevTools să întrerupă astfel de evenimente dacă și când apar. Există două categorii de puncte de intrare în afara:
Aveți sarcina de a depana o pagină web, în special DOM. Nodurile sunt adăugate și eliminate în timpul ciclului de viață al paginii și trebuie să inspectați JavaScript care face acest lucru. Setați un breakpoint DOM cu următorii pași:
De fiecare dată când setați un breakpoint DOM, îl puteți porni și opri cu ușurință la DOM punct de intersecție în panoul din Panoul elementelor. În acest panou, fiecare punct de întrerupere pe care l-ați setat este listat și puteți interacționa cu acest panou în următoarele moduri:
Descriere: O modificare a subtreei apare atunci când arborele unui nod rădăcină (care are setul de puncte de întrerupere) este modificat. Aceasta poate include adăugarea sau eliminarea nodurilor.
Utilizare caz: Un gol div containerul este prezent în DOM, iar o solicitare Ajax se întâmplă la încărcarea paginii care adaugă noduri noi containerului original. Adăugați un punct de întrerupere a modificării Subtree pe container pentru a vedea punctul exact în codul care adaugă noi noduri la DOM.
Exemple de mesaje: Întrerupt la a Subtree Modificat punct de pornire setat pe corp, deoarece descendentul său p a fost eliminat. Sau: Întreruptă pe Subtree Modificat punct de pornire setat pe div # părinte, deoarece un nou copil a fost adăugat la acel nod.
Descriere: Modificarea unui atribut declanșează când un nume sau o valoare de atribut pe un nod este adăugat, eliminat sau modificat. Aceasta include toate atributele, cum ar fi clasă, date-*, sau stil.
Utilizare caz: O schimbare vizuală se întâmplă pe pagină într-un punct aparent aleatoriu în timp și tu restrângeți acest lucru într-o clasă care este setată dinamic pe elementul corpului. Doriți să investiga cauza acestei adăugări de clase dinamice.
Exemplu de mesaj: Întreruptă pe un Atributul modificat punct de pornire setat pe p.
Descriere: Un punct de întrerupere a nodului declanșează în punctul în care un nod este îndepărtat de la părinte care conține punctul de întrerupere stabilit.
Utilizare caz: Construiți o aplicație de listă de sarcini și doriți să confirmați că atunci când un utilizator șterge un element de rezolvat, acesta este, de asemenea, eliminat din DOM. Puteți stabili un punct de întrerupere a nodului pentru a vă asigura că acest comportament are loc.
Exemplu de mesaj: Întrerupt la a Nod eliminat div # container.
În DevTools, sunt disponibile un număr de puncte de așteptare predefinite pentru Listener de evenimente. Acestea oferă puncte de intrare în JavaScript care aparține unei pagini.
Luați în considerare un simplu about: blank pagină. Setați a clic eveniment punct de ascultare a evenimentului pe această pagină, cu următorii pași:
Șoarece Categorie Listener de evenimente.Clic ascultător de evenimente.Ați stabilit acum un punct de întrerupere. Dacă faceți clic pe pagină, observați că nu se întâmplă nimic. Acum executați următoarea bucată de cod JavaScript în Panoul consolei.
document.addEventListener ("clic", console.log.bind (consola))Când setați un punct de întrerupere pentru același eveniment pe care l-ați înregistrat pentru un ascultare de evenimente, debuggerul se oprește înainte de punctul în care se execută apelul de ascultare al evenimentului.
Puteți înregistra puncte de întrerupere pentru mai multe tipuri de evenimente, cum ar fi cronometrele, evenimentele touch și multe altele, care sunt listate în tabelul de mai jos.
| Categorie Eveniment | Exemple de evenimente |
|---|---|
Animaţie | requestAnimationFrame, cancelAnimationFrame, animationFrameFired |
Control | redimensiona, derulați, măriți, focalizați, estompați, selectați, schimbați, expediați, resetați |
Clipboard | copiați, tăiați, lipiți, înainte de copiere, înainte, înainte de paste |
Mutația DOM | DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified, DOMCharacterDataModificat, DOMNodeInserat, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded |
Dispozitiv | dispozitivul de orientare, devicemotion |
Trage si lasa | dragonter, dragover, dragleave, drop |
Tastatură | tastatura, tastarea, apăsarea de taste, introducerea |
Sarcină | încărcare, înainte de descărcare, descărcare, anulare, eroare, schimbare, popstate |
Șoarece | clic, dblclick, mouse-ul, mouseup, mouseover, mouse-ul, mouseout, mouse-ul, roata |
Cronometrul | setTimer, clearTimer, timerFired |
Atingere | touchstart, touchmove, touchend, touchcancel |
WebGL | webglErrorFired, webglWarningFired |
Tehnica "depanare din exterior în" poate fi utilă atunci când trebuie să depanați un site web al cărui funcționalitate a fost spart sau chiar dacă sunteți curios în legătură cu modul în care lucrează ceva pe o pagină pe care o vizualizați.
Există un număr de extensii Chrome, dintre care multe îmbunătățesc funcționalitatea DevTools. O listă cu caracteristici este găsită în Galeria de extensii DevTools.
Pentru autorii programului DevTools Extension, caracteristica de preprocesare JavaScript este un subiect util pentru a afla despre. Preprocesorul poate intercepta codul sursă JavaScript înainte de a intra în motorul V8, ceea ce înseamnă că codul sursă JavaScript poate fi modificat prin intermediul DevTools înainte de a intra în VM, toate dintr-o extensie.
Pe lângă capabilitățile de interceptare, API-ul de preprocesare are acces programatic pentru reîncărcarea surselor de script. O extensie poate, în orice moment al ciclului de viață, să reîncarce o sursă JavaScript fără a reîncărca pagina web originală.
Această secțiune acoperă câteva instrumente care oferă un anumit nivel de integrare între Node.js și DevTools Chrome.
Există două părți la DevTools:
Orice aplicație poate implementa comunicarea prin intermediul protocolului de depanare la distanță și permite utilizatorilor săi să depaneze prin intermediul DevTools. Node Inspector este un astfel de instrument. După instalare, puteți rula orice script de nod folosind Node Inspector. Instrumentul pornește un server web care găzduiește front-ul DevTools. Această versiune specială a dispozitivului DevTools nu utilizează back-end-ul Chrome, ci mai degrabă propriul Node Inspector.
După cum puteți vedea în Node Inspector, DevTools este întrerupt la un punct de întrerupere. Stivă de apel se referă la apelurile executate în Node.js. Singura implicare a browserului este aici pentru interfața DevTools.
Utilizați Node Heapdump pentru a face un instantaneu al heapului V8 la un moment dat în codul dvs. Starea curentă a heapului V8 este serializată și se transmite într-un fișier.
Comparați două instantanee de heap pentru a descoperi care obiecte nu sunt colectate de gunoi. Acest lucru este util pentru capturarea scurgeri de memorie.
Asta este pentru această serie din două părți despre o experiență modernă de depanare. Sperăm că în acest moment vă permiteți să creați și să depanați JavaScript în cadrul Chrome DevTools. Sunteți familiarizați cu fluxurile de lucru care pot ajuta la depanare și cunoașteți câteva sfaturi și trucuri atunci când vă ocupați de un site de producție pe care nu ați mai lucrat până acum. Asigurați-vă că ați încercat unele dintre tehnicile pe care le-ați învățat aici data viitoare când trebuie să depanați.
Mulțumesc că ați citit!
