Ca dezvoltator, veți dori adesea să depanați codul. S-ar putea să fi folosit deja console.log în unele dintre provocări, care este cel mai simplu mod de depanare.

În acest articol vă vom spune câteva dintre cele mai tari trucuri, pentru a depana folosind instrumentele native de depanare ale browserelor.

O scurtă perspectivă asupra editorului de cod FreeCodeCamp:

Înainte de a trece la depanare, permite scurgerea unor fapte secrete despre asta motor minunat de verificare a codului la FCC.

Folosim un sistem personalizat CodeMirror, ca editor de cod. A eval() funcţie este folosit pentru a evalua codul JavaScript reprezentat ca un șir din editor. Cand eval() este apelat, browserele vor executa în mod nativ codul dvs. Vom afla mai multe de ce acest secret este important în secțiunile ulterioare ale acestui articol.

Acum trecem la trucuri:

Google Chrome DevTools

Google Chrome este unul dintre cele mai populare browsere cu un motor JavaScript încorporat numit V8, și oferă un set excelent de instrumente pentru dezvoltatorii numiți Chrome DevTools. Vizitarea lor Ghid complet de depanare JavaScript este foarte recomandat.

1: Noțiuni de bază despre DevTools

Lansarea Chrome DevTools

Lovit F12

. Alternativ, puteți apăsa

Ctrl + Shift + I

pe Windows și Linux sau

Cmd + Shift + I

pe Mac sau dacă doar îți place mouse-ul, mergi la Menu > More Tools > Developer Tools.

Cunoașterea Sources si console filele.

Aceste două file vor fi probabil cei mai buni prieteni ai dvs. în timpul depanării. Sources fila poate fi utilizată pentru a vizualiza toate scripturile care se află pe pagina web pe care o vizitați. Această filă are secțiuni pentru fereastra de cod, arborele de fișiere, ferestrele de stive de apeluri și de vizionare etc.

console fila este locul în care merge toată ieșirea jurnalului. În plus, puteți utiliza solicitarea filei consolei pentru a executa codul JavaScript. Este un fel de sinonim cu promptul de comandă de pe Windows sau terminalul de pe Linux.

Sfat: comutați oricând consola în DevTools folosind Esc cheie.

2: Comenzi rapide și caracteristici comune

În timp ce puteți vizita lista completă de comenzi rapide, mai jos sunt câteva dintre cele mai utilizate:

Prezentați Windows, Linux Mac
Căutați un cuvânt cheie, regex este acceptat. Ctrl+F``Cmd+F
Căutați și deschideți un fișier Ctrl+P``Cmd+P
Salt la linie Ctrl+G+:line_no``Cmd+G+:line_no
Adăugați un punct de întrerupere Ctrl+B, sau faceți clic pe linia nr.Cmd+B, sau faceți clic pe linia nr.
Întrerupeți / reluați executarea scriptului F8 F8
Treceți peste următorul apel funcțional F10 F10
Pas în următorul apel funcțional F11 F11

3: Utilizarea unei hărți sursă pentru codul nostru

Una dintre cele mai tari caracteristici pe care o vei iubi este depanare Script dinamic, din mers, via Hărți sursă.

Fiecare script poate fi vizualizat în fila Sursă a DevTools. Fila sursă conține toate fișierele sursă JavaScript. Dar codul din editorul de cod este executat prin eval()într-un container numit pur și simplu o mașină virtuală (VM) în procesul browserului.

Așa cum ați fi putut ghici până acum este că codul nostru este de fapt un script care nu are un nume de fișier. Deci, nu vedem asta în fila Sursă.

: paiete:

Aici vine hack-ul!

: paiete:

Trebuie să influențăm Source Maps pentru a atribui un nume JavaScript de la editorul nostru. Este destul de simplu:

Să spunem că suntem pe Factorializați provocare, iar codul nostru arată astfel:

function factorialize(num) {
  if(num <= 1){
  ...
}
factorialize(5);

Tot ce trebuie să facem este să adăugăm //# sourceURL=factorialize.js în partea de sus a codului, adică prima linie:

//# sourceURL=factorialize.js

function factorialize(num) {
  if(num <= 1){
  ...
: paiete:

Și Eureka asta e!

: paiete:

Acum deschideți DevTools și căutați numele fișierului. Adăugați puncte de pauză, depanare și bucurați-vă!

Mai multe informații despre depanare:

  • Ghid pentru începători pentru zdrobirea bug-urilor
  • Sfaturi și trucuri pentru depanare pentru începători
  • Cum să profitați la maximum de consola de depanare a browserului