Øvelse – Kjøre- og feilsøke kode

  • 3 minutter

Nå som du er koblet til SSH-serveren, er du klar til å starte kodingen! Du må generere et grunnleggende Node-program fordi du har som oppgave å utvikle en Express-app for byrået.

I denne øvelsen skal du opprette et grunnleggende Node-prosjekt og kjøre og feilsøke prosjektkoden, samtidig som du er koblet til ved hjelp av SSH.

Opprette og kjøre et Node.js program

Hvis du vil opprette og kjøre Node.js programmet, må du kjøre en rekke kommandoer i terminalen.

  1. Åpne en ny terminal ved å velge Terminal>Ny terminal på oppgavelinjen. Kjør følgende kommandoer fra terminalen for å oppdatere pakkene i Linux VM og installere Node.js:

    sudo apt-get update

    curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

    sudo apt-get install nodejs -y

  2. Kjør følgende kommando for å installere Express-generatoren:

    sudo npm install -g express-generator

  3. Kjør følgende kommando for å opprette et nytt Express-program kalt myExpressApp:

    express myExpressApp --view pug

  4. Åpne programfilene ved å velge Åpne mappe i Utforsker-visningen. Velg myExpressApp i rullegardinlisten for å åpne mappen i Visual Studio Code-vinduet.

    Skjermbilde som viser åpning av MyExpressApp-mappen.

  5. I neste ledetekst velger du OK, som åpner mappen som inneholder programfilene dine. Hvis du blir bedt om det, kan du klarere arbeidsområdet.

    Skjermbilde som viser bekreftelse på åpning av MyExpressApp-mappen.

  6. Åpne terminalen igjen og kjør følgende kommando for å installere alle programmets avhengigheter:

    npm install

  7. Kjør følgende kommando for å kjøre programmet:

    npm start

    Programmet kjøres på VM-ens http://localhost:3000. Neste trinn viser deg hvordan du blar gjennom dette programmet på den lokale maskinen.

Bla gjennom programmet

Nå som programmet kjører, kan du bruke videresending av port til å bla gjennom nettappen på den lokale maskinen.

  1. Mens appen fortsatt kjører, kjører du kommandoen Porter: Fokuser på portvisning i kommandopaletten.

    skjermbilde som viser kommandoen Fokus på portvisning i kommandopaletten.

  2. Velg knappen Videresend en port .

    Skjermbilde som viser handlingen Videresend en port i portvisningen.

  3. Angi port 3000, og trykk deretter på Enter.

    Skjermbilde som viser hvordan du angir port 3000 i portvisningen.

  4. Serveren videresender nå trafikk på port 3000 til din lokale maskin; Du kan nå bla til http://localhost:3000 for å se nettappen som kjører.

  5. I terminalen stopper du appen ved å trykke Ctrl + C.

Redigere og feilsøke programmet

Du kan bruke Visual Studio Codes innebygde funksjoner til å redigere og feilsøke applikasjonen som kjører på den eksterne maskinen.

  1. Velg Filutforsker i menyen til venstre i Visual Studio Code, og åpne app.js filen.

  2. Angi et avbruddspunkt på linje 10 i filen ved å klikke innbindingsmargen til venstre for linjenummeret. Du ser en rød sirkel som vises.

    Skjermbilde som viser et breakpoint angitt på linje 10 i app.js-filen.

  3. I Kjør og feilsøk-visningen velger du Kjør og feilsøk. Hvis du blir bedt om det, velger du Node.js.

    Skjermbilde som viser handlingen Kjør og Feilsøking i Kjør- og Feilsøking-visningen.

  4. Når appen kjøres, kommer du til å gå til breakpoint. Du kan undersøke variabler, opprette klokker og navigere i anropsstakken i feilsøkingsvisningen i sidepanelet. Du kan kontrollere feilsøkingsøkten, for eksempel gå linje for linje, ved hjelp av feilsøkingshandlingslinjen øverst.

    Skjermbilde som uthever ulike deler av feilsøkingsopplevelsen.

  5. Du kan også redigere filen på samme måte som hvis koden var plassert på den lokale maskinen. Begynn å skrive app., som utløser IntelliSense.

    Skjermbilde som viser intellisens når du redigerer kode.

Congratulations! Du kjørte, redigerte og feilsøkte kode som bare fantes på den eksterne maskinen.