În acest articol, vom intra în câteva instrumente puternice pentru a vă ajuta să găsiți și să remediați erori folosind VSCode, Docker și terminalul dvs. De asemenea, vom învăța (și vom pune în practică) cele 6 modalități de depanare a unei aplicații Node.js.

Puteți ghici care sunt cele 6 modalități posibile de depanare a unei aplicații Node.js? Una dintre cele mai frecvente practici din viața fiecărui dezvoltator implică găsirea rapidă a erorilor și înțelegerea a ceea ce se întâmplă în aplicațiile lor.

Majoritatea exemplelor prezentate aici vor folosi Node.js, dar le puteți utiliza și în aplicațiile front-end JavaScript. Puteți utiliza alți editori sau IDE, cum ar fi Visual Studio sau Web Storm, dar în această postare voi folosi VSCode. Luați doar ceea ce învățați aici și aplicați-l în editorul ales.

Până la sfârșitul acestei postări, veți fi învățat cum să vă inspectați aplicațiile utilizând următoarele instrumente:

  • Node.js Read-Eval-Print-Loop (REPL)
  • Browser
  • Docher
  • VSCode și mediu local
  • VSCode & Docker
  • Mediul VSCode & Remote

Cerințe

În pașii următori, veți crea un API Web utilizând Node.js și veți depana aplicația utilizând VSCode și Docker. Înainte de a începe codificarea, asigurați-vă că aveți următoarele instrumente instalate pe computer:

Introducere

Dacă lucrezi ca dezvoltator de ceva timp, este posibil să știi că nu este așa cum este în filme. De fapt, dezvoltatorii ar trebui să-și petreacă 80% din slujba lor gândind și doar 20% să scrie cod.

Dar, în realitate, cea mai mare parte a acestui procent de 80% este cheltuit pentru rezolvarea problemelor, remedierea erorilor și încercarea de a înțelege cum să evite alte probleme. Vinerea seara ar putea arăta ca giful de mai jos:

codificarea dezvoltatorului atunci când totul nu merge bine

Când îmi dau seama că s-a întâmplat ceva ciudat la locul meu de muncă, încerc să pun câteva întrebări, așa cum veți vedea în următoarele secțiuni.

A fost o eroare de ortografie?

În acest caz, problema ar putea fi legată de o funcție sau de o variabilă pe care încerc să o apelez. Consola îmi va arăta unde este eroarea și un scurt motiv posibil pentru aruncarea erorii, așa cum se arată în tipăritul de mai jos:

Cum sa depanati o aplicatie Nodejs cu VSCode Docker si
Imagine care arată o greșeală de tip în cod apelând getPhoane în loc de getPhone.

Este acest comportament ceva care ar trebui să funcționeze cu implementarea actuală?

Ar putea fi un dacă declarație care nu a evaluat condițiile mele sau chiar a buclă care ar trebui să se oprească după anumite interacțiuni, dar nu se va opri.

Ce se intampla aici?

În acest caz, ar putea fi o eroare internă sau ceva ce nu am mai văzut până acum. Așa că îl googleez pentru a afla ce s-a întâmplat în aplicația mea.

De exemplu, imaginea de mai jos prezintă o eroare internă a fluxului Node.js care nu arată ce am greșit în programul meu.

1611930551 877 Cum sa depanati o aplicatie Nodejs cu VSCode Docker si
Eroare de flux Node.js cu mesajul „eroare: scrieți după sfârșit” ca exemplu pentru erori interne.

Depanarea limbajelor bazate pe scripturi

De obicei, dezvoltatorii din limbaje bazate pe scripturi precum Ruby, Python sau JavaScript nu trebuie să utilizeze IDE-uri precum Visual Studio, WebStorm și așa mai departe.

În schimb, aceștia optează adesea pentru a utiliza editori ușori precum Sublime Text, VSCode, VIM și altele. Imaginea de mai jos prezintă o practică obișnuită de inspectare și „depanare” a aplicațiilor. Acestea imprimă declarații pentru a verifica stările și valorile aplicației.

1611930551 551 Cum sa depanati o aplicatie Nodejs cu VSCode Docker si
Consola care afișează programul imprimând valori precum „aici1”, „aici2” și așa mai departe.

Noțiuni de bază

Practica pe care am analizat-o în secțiunea anterioară nu este atât de productivă pe cât ar putea fi. Putem confunda numele textului cu valorile, să imprimăm variabile incorecte și să pierdem timpul cu erori simple sau erori de ortografie. În secțiunile următoare vă voi arăta alte modalități de a vă îmbunătăți căutarea de erori și validări de declarații.

Scopul principal aici este de a arăta cât de simplu poate fi depanarea unei aplicații. Folosind cele mai frecvente instrumente, veți putea inspecta codul de la comenzile simple ale terminalului la mașinile la distanță din întreaga lume.

Crearea eșantionului de proiect

Înainte de a ne arunca cu capul în conceptele de depanare, ar trebui să creați o aplicație de inspectat. Deci, mai întâi, creați un API Web utilizând modulul HTTP Node.js nativ. API-ul ar trebui să obțină toate câmpurile din cerere, să adune toate valorile din aceasta și apoi să răspundă solicitantului cu rezultatele calculate.

Alegeți un folder gol pe mașină și să începem cu API-ul Web.

Mai întâi, creați un Math.js fișier care va fi responsabil pentru însumarea tuturor câmpurilor dintr-un obiect JavaScript:

//Math.js
module.exports = {
    sum(...args) {
        return args.reduce(
            (prev, next) => 
                Number(prev) + Number(next), 0
        )
    }
}
Modulul Math.js

În al doilea rând, creați un fișier server Node.js folosind codul de mai jos. Copiați valoarea și creați fișierul, apoi lipiți-l acolo. O să explic ce se întâmplă acolo mai târziu.

Observați că acest API este un API bazat pe evenimente și va gestiona cererile utilizând abordarea Node.js Streams.

//server.js
const Http = require('http')
const PORT = 3000
const { promisify } = require('util')
const { pipeline } = require('stream')
const pipelineAsync = promisify(pipeline)
const { sum } = require('./Math')

let counter = 0
Http.createServer(async (req, res) => {
    try {
        await pipelineAsync(
            req,
            async function * (source) {
                source.setEncoding('utf8')
                for await (const body of source) {
                    console.log(`[${++counter}] - request!`, body)
                    const item = JSON.parse(body)

                    const result = sum(...Object.values(item))
                    yield `Result: ${result}`
                }
            },
            res
        )
    } catch (error) {
        console.log('Error!!', error)
    }
})
.listen(PORT, () => console.log('server running at', PORT))
fișier server.js

OK, ar putea arăta ca un cod neobișnuit pentru un simplu API Web. Lasă-mă să explic ce se întâmplă.

Ca alternativă, acest API se bazează pe Fluxuri Node.js. Deci, veți citi date la cerere din venituri solicitări, procesează-l și răspunde-le folosind raspuns obiect.

Pe net (11) există o funcție de conductă care va gestiona fluxul de evenimente. Dacă ceva nu merge bine în orice funcție de flux, va genera o excepție și vom gestiona erorile pe captură declarație din încearcă să prinzi.

Pe net (6) importăm sumă funcție din Matematica modul și apoi procesează datele primite on-line (19). Observați că pe (19) este un Obiect.valori funcție care va răspândi toate valorile obiectelor și le va returna ca matrice. De exemplu, un obiect {v1: 10, v2: 20} va fi analizat la [10, 20] .

Alergare

Dacă aveți un sistem bazat pe Unix, puteți utiliza cURL , care este o comandă nativă pentru a efectua cereri Web. Dacă lucrați la sistemul de operare Windows, puteți utiliza Subsistemul Windows pentru Linux sau Git bash pentru a executa instrucțiunile Unix.

Creeaza o run.sh fișier cu următorul cod. Veți crea cod pentru a solicita API-ul dvs. Dacă sunteți familiarizați cu Poştaş puteți sări peste acest fișier și să executați de acolo.

curl -i 
    -X POST 
    -d '{"valor1": "120", "valor2": "10"}' 
    http://localhost:3000
fișierul run.sh

Rețineți că dumneavoastră trebuie să instalați versiunea Node.js 14 sau mai sus.

Va trebui să deschideți două sesiuni de terminal. Pe a mea, am îmbinat două terminale în instanța mea VSCode. Pe alergarea din stânga node server.js și pe drumul cel bun bash run.sh după cum urmează:

1611930552 796 Cum sa depanati o aplicatie Nodejs cu VSCode Docker si
Terminalul care rulează și solicită server.js utilizând fișierul run.sh.

Depanare folosind Node.js Read-Eval-Print-Loop (REPL)

Node.js vă poate ajuta să creați cea mai bună aplicație posibilă. REPL este un mecanism de depanare și inspecție a aplicațiilor Node.js de la terminal. Când adăugați fișierul inspect steag după node comanda, programul se va opri chiar pe prima linie de cod așa cum se arată mai jos:

1611930553 302 Cum sa depanati o aplicatie Nodejs cu VSCode Docker si
Folosind comanda de inspectare nod pentru a opri programul înainte de a începe

În primul rând, veți scrie debugger cuvânt cheie imediat după contor console.log pe net (17) și apoi executați node inspect server.js din nou.

Rețineți că puteți interacționa cu API-ul REPL utilizând comenzile listate în documentație oficială.

În imaginea următoare, veți vedea un exemplu practic al modului în care funcționează REPL utilizând unele dintre următoarele comenzi:

  1. list(100): afișează primele 100 de linii de cod
  2. setBreakpoint(17): setează un punct de întrerupere pe linia a 17-a
  3. clearBreakpoint(17): elimină un punct de întrerupere pe linia 17
  4. exec body: evaluează body variabilă și imprimă rezultatul acestuia
  5. cont: continuă execuția programului

Imaginea de mai jos arată în practică cum funcționează:

1611930554 774 Cum sa depanati o aplicatie Nodejs cu VSCode Docker si

Vă recomand cu tărie să încercați să utilizați watch afirmație. La fel ca în browser, puteți viziona declarații la cerere. În sesiunea dvs. REPL scrieți watch(counter) și apoi cont.

Pentru a testa ceasul, trebuie să alegeți un punct de întrerupere – utilizați setBreakpoint(line) pentru aceasta. În timp ce alergi run.sh, programul se va opri asupra punctului dvs. de întrerupere și va arăta privitorilor. Este posibil să vedeți următorul rezultat pe consola dvs.:

1611930556 187 Cum sa depanati o aplicatie Nodejs cu VSCode Docker si

Depanare utilizând browsere bazate pe Chromium

Depanarea în browser este mai frecventă decât depanarea din sesiunile de terminal. În loc să oprească codul pe prima linie, programul își va continua execuția chiar înainte de inițializare.

Alerga node --inspect server.js și apoi accesați browserul. Deschide DevTools meniu (apăsând F12 deschide DevTools pe majoritatea browserelor). Apoi va apărea pictograma Node.js. Apasa pe el. Apoi, în Surse puteți selecta fișierul pe care doriți să-l depanați așa cum se arată în imaginea de mai jos:

1611930557 465 Cum sa depanati o aplicatie Nodejs cu VSCode Docker si

Depanare în VSCode

Mergând înainte și înapoi la browser nu este chiar atât de distractiv atâta timp cât scrii cod într-un editor. Cea mai bună experiență este să rulați și să depanați codul în același loc.

Dar nu este magie. Configurați și specificați care este fișierul principal. Să-l configurăm urmând pașii de mai jos:

  1. Va trebui să deschideți fișierul launch.json fişier. O puteți deschide apăsând Ctrl + Shift + P sau Command + Shift + P pe macOS, apoi scriind lansa. Alege Depanare: Deschideți launch.json opțiune. În plus, puteți apăsa F5 și ar putea deschide și fișierul.
  2. În pasul următor al vrăjitorului, faceți clic pe Node.js opțiune.
  3. Este posibil să fi văzut un fișier JSON în editor cu preconfigurarea pentru depanare. Completați fișierul program câmp cu numele dvs. de fișier – acesta spune VSCode care este fișierul principal. Observați că există un ${workspaceFolder} simbol. L-am scris pentru a specifica că fișierul se află în folderul curent la care lucrez:
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program", 
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/server.js"
        }
    ]
}
lansare.json

Aproape acolo! Accesați codul sursă activat server.js și setați un punct de întrerupere pe linia a 16-a făcând clic pe partea stângă a indicatorului liniei de cod. Rulați-l apăsând F5 și declanșează server.js folosind run.sh, care va afișa următoarea ieșire:

1611930559 940 Cum sa depanati o aplicatie Nodejs cu VSCode Docker si

Depanarea aplicațiilor bazate pe Docker

Personal îmi place să folosesc Docker. Ne ajută să rămânem cât mai aproape de mediul de producție, izolând în același timp dependențele într-un fișier de chitanță.

Dacă doriți să utilizați Docker, trebuie să îl configurați într-un fișier de configurare Docker. Copiați codul de mai jos și creați un fișier nou lângă server.js și lipiți-l în.

FROM node:14-alpine

ADD . .

CMD node --inspect=0.0.0.0 server.js
Dockerfile

Mai întâi, va trebui să executați fișierul Docher comanda build în folderul dvs. pentru a construi aplicația care rulează docker build -t app . . În al doilea rând, va trebui să expuneți depanare port (9229) și Server port (3000), astfel încât browserul sau VSCode îl pot urmări și atașa o instrucțiune de depanare.

docker run 
    -p 3000:3000 
    -p 9229:9229 
    app

Dacă rulați run.sh, din nou, ar trebui să solicite serverul care rulează pe Docker.

Depanarea aplicațiilor Docker pe VSCode nu este o sarcină dificilă. Trebuie să modificați configurația pentru a atașa un depanator la o rădăcină la distanță. Înlocuiți-vă lansare.json fișier cu codul de mai jos:

{
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Docker: Attach to Node",
            "remoteRoot": "${workspaceFolder}",
            "localRoot": "${workspaceFolder}"
        }
    ]
}

Atâta timp cât aplicația dvs. rulează pe Docker și expune valoarea implicită port de depanare (9229) configurația de mai sus va conecta aplicația la directorul curent. Alergare F5 și declanșarea aplicației va avea același rezultat ca și rularea locală.

Depanare cod la distanță folosind VSCode

Depanarea la distanță este interesantă! Trebuie să aveți în vedere câteva concepte înainte de a începe codificarea:

  1. Care este adresa IP a țintei?
  2. Cum este configurat directorul de lucru la distanță?

Mă voi schimba lansare.json fișier și adăugați adresa de la distanță. Am un alt computer acasă care este conectat la aceeași rețea. Adresa sa IP este 192.168.15.12.

De asemenea, am aici directorul de lucru al mașinii Windows: c: // Utilizatori / Ana / Desktop / remote-vscode /.

MacOS se bazează pe sisteme Unix, astfel încât structura folderelor este diferită de cea a mașinii mele Windows. Maparea structurii directorului trebuie să se schimbe în / Utilizatori / Ana / Desktop / remote-vscode /.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Remote",
            "address": "192.168.15.12",
            "port": 9229,
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/Users/Ana/Desktop/remote-vscode/",
            "trace": true,
            "sourceMaps": true,
            "skipFiles": [
                "<node_internals>/**"
            ]
        }
    ]
}

În acest caz particular, veți avea nevoie de cel puțin două mașini diferite pentru ao testa. Am făcut un scurt videoclip care arată cum funcționează în practică mai jos:

https://www.youtube.com/watch?v=s6ggU9grLNr

Opriți utilizarea console.log pentru depanare!

Sfatul meu pentru tine astăzi este despre a fi leneș pentru lucrurile manuale. Aflați o nouă comandă rapidă sau instrument pe zi pentru a îmbunătăți productivitatea. Aflați mai multe despre instrumentele la care ați lucrat în fiecare zi și vă va ajuta să petreceți mai mult timp gândindu-vă decât codând.

În această postare, ați văzut cum VSCode poate fi un instrument util pentru depanarea aplicațiilor. Și VSCode a fost doar un exemplu. Folosiți tot ce vă este cel mai confortabil. Dacă urmați aceste sfaturi, cerul este?

Mulțumesc că ai citit

Apreciez foarte mult timpul petrecut împreună. Sper că acest conținut va fi mai mult decât simplu text. Sper că te-ar fi făcut un gânditor mai bun și, de asemenea, un programator mai bun. Urmează-mă pe mine Stare de nervozitate și verifică-mi blog personal unde împărtășesc tot conținutul meu valoros.

Ne mai vedem! ?