Lag din første testwebapp med Chrome Developer-verktøyene

I denne veiledningen vil du lære hvordan du kan lage en enkel testnettapp for å lære deg de første stegene med Chrome Developer-verktøyene. Vi vil gå gjennom oppsettet av prosjektet og kjøring av appen, slik at du er i stand til å dra nytte av de kraftige funksjonene til utviklertoolsene. Uansett om du allerede har erfaring eller er nybegynner, er denne trinnvise veiledningen ideell for deg.

Viktigste funn

• Du trenger Node.js og NPM for å sette opp prosjektet.
• Å opprette et nytt prosjekt er enkelt og raskt.
• Bruken av Chrome Developer Tools muliggjør nøyaktig feilsøking av applikasjonen din.

Trinnvis veiledning

For å opprette din testnettapp, følg disse enkle stegene:

Trinn 1: Installasjon av Node.js og NPM

Før du kan lage et prosjekt, må du forsikre deg om at du har installert Node.js og NPM (Node Package Manager). Gå til nettsiden nodejs.org og last ned installeringsversjonen som passer til ditt operativsystem. Etter installasjonen kan du sjekke NPM i terminalen ved å skrive inn kommandoen npm -v.

Trinn 2: Åpne terminal og opprett mappe

Åpne en terminal eller ledetekst for å opprette testappen din. Du må velge en mappe der du vil opprette appen. Naviger til den ønskede mappen og skriv den følgende kommandoen for å opprette en undermappe for prosjektet.

Trinn 3: Opprett prosjekt med NPM

For å opprette et nytt prosjekt, bruker du kommandoen npm create. Du kan velge et navn for prosjektet ditt. I vårt eksempel bruker vi "Def Tools Test". Skriv bare inn kommandoen npm create def-tools-test og trykk Enter. Du kan bli spurt om du vil installere et pakke; bekreft bare dette.

Trinn 4: Velge rammeverk

Etter å ha opprettet prosjektet blir du spurt hvilket rammeverk du vil bruke. Du kan velge alternativer som Vue.js, React eller bare Vanilla JavaScript. For denne veiledningen velger vi Vanilla for å jobbe med ren JavaScript.

Trinn 5: Velge mellom TypeScript og JavaScript

Du har også muligheten til å velge mellom TypeScript og JavaScript. For denne opplæringen bruker vi JavaScript for å gjøre grunnleggende konsepter enklere å forstå.

Trinn 6: Installere avhengigheter

Nå er det på tide å installere nødvendige avhengigheter. Skriv inn npm install i terminalen for å laste ned og installere de nødvendige modulene til prosjektet.

Trinn 7: Sjekke prosjektmappen

Etter installasjonen kan du se på den nylig opprettede prosjektmappen. Bruk kommandoen ls for å vise filene som ble installert.

Trinn 8: Start utviklingsserveren

For å kjøre webappen må du starte utviklingsserveren. Skriv inn kommandoen npm run dev. Dette vil starte en lokal server som leverer appen din.

Trinn 9: Åpne applikasjonen i nettleseren

Når serveren kjører, vil du finne en URL i konsollen (vanligvis http://localhost:3000). Hvis du allerede har Chrome som standardnettleser, kan du bare klikke på lenken. Alternativt kan du kopiere adressen og lime den inn i adresselinjen til Chrome.

Trinn 10: Utforske test web-appen

Når applikasjonen er åpen, ser du brukergrensesnittet, som vanligvis består av et enkelt "Hello V" og en tellerknapp. Hvis du klikker på knappen, øker telleren. Dette gir deg en enkel, men funksjonell test-app for å utforske DevTools.

Trinn 11: Bruk av Chrome Developer Tools

Nå er det på tide å åpne Chrome Developer Tools. Du kan åpne DevTools enten via menyen eller ved å høyreklikke og velge "Undersøk". Mens du navigerer gjennom test web-appen din, kan du inspisere ulike elementer, debugge koden og analysere ytelsen til appen din.

Oppsummering

I denne veiledningen har du lært hvordan du oppretter en enkel test web-app for å dra nytte av fordelene med Chrome Developer Tools. Fra installasjon av Node.js og NPM til opprettelse av prosjektet og bruk av utviklerverktøy har du nå kunnskapen til å utvikle og debugge egne applikasjoner.