I denne vejledning vil du lære, hvordan du kan oprette en simpel test-web-app for at lære de første trin i brugen af Chrome Developer Tools. Vi vil gå fra opsætningen af projektet til kørslen af applikationen, så du kan udnytte de kraftfulde funktioner i udviklerværktøjerne. Uanset om du allerede har erfaring eller er nybegynder, er denne trin-for-trin-vejledning ideel for dig.
Vigtigste indsigt
- Du skal bruge Node.js og NPM til at oprette projektet.
- Oprettelsen af et nyt projekt er enkel og hurtig.
- Brugen af Chrome Developer Tools muliggør præcis fejlfinding af din applikation.
Trin-for-trin-vejledning
For at oprette din test-web-app, skal du følge disse enkle trin:
Trin 1: Installation af Node.js og NPM
Før du kan oprette et projekt, skal du sikre dig, at du har installeret Node.js og NPM (Node Package Manager). Gå til websitet nodejs.org og download installationsversionen, der passer til dit operativsystem. Efter installationen kan du kontrollere NPM i terminalen ved at indtaste kommandoen npm -v.
Trin 2: Åbn terminalen og opret mappe
Åbn en terminal eller et kommandoprompt for at oprette din test-app. Du skal vælge et mappe, hvor du vil oprette appen. Naviger til den ønskede mappe og indtast følgende kommando for at oprette en undermappe til projektet.
Trin 3: Oprettelse af projekt med NPM
For at oprette et nyt projekt, skal du bruge kommandoen npm create. Du kan vælge et navn til dit projekt. I vores eksempel bruger vi "Def Tools Test". Indtast simpelthen kommandoen npm create def-tools-test og tryk på Enter. Du kan blive bedt om at installere et pakke, bekræft det bare.
Trin 4: Valg af framework
Efter oprettelsen af projektet bliver du bedt om at vælge, hvilket framework du vil bruge. Du kan vælge muligheder som Vue.js, React eller bare Vanilla JavaScript. Til denne vejledning vælger vi Vanilla for at arbejde med ren JavaScript.
Trin 5: Valg mellem TypeScript og JavaScript
Du har også muligheden for at vælge mellem TypeScript og JavaScript. Til denne vejledning bruger vi JavaScript for at gøre grundlæggende koncepter nemt forståelige.
Trin 6: Installation af afhængigheder
Nu er det tid til at installere de nødvendige afhængigheder. Indtast npm install i terminalen for at downloade og installere de påkrævede moduler til dit projekt.
Trin 7: Kontrollér projektmappen
Efter installationen kan du se den nyoprettede projekmappe. Brug kommandoen ls til at se filerne, der er installeret.
Trin 8: Start udviklingsserver
For at køre web-appen skal du starte udviklingsserveren. Indtast kommandoen npm run dev. Dette vil starte en lokal server, der hoster din applikation.
Trin 9: Åbn applikationen i browseren
Når serveren kører, vil du finde en URL i konsollen (typisk http://localhost:3000). Hvis du allerede bruger Chrome som din standardbrowser, kan du blot klikke på linket. Alternativt kan du kopiere adressen og indsætte den i Chrome's adresselinje.
Trin 10: Udforsk test-webappen
Når applikationen er åbnet, ser du brugergrænsefladen, der primært består af en simpel "Hello V" og en tæller-knap. Når du klikker på knappen, øges tælleren. Dette giver dig en simpel, men funktionel test-app til at udforske DevTools.
Trin 11: Brug af Chrome Developer-værktøjer
Nu er det tid til at åbne Chrome Developer-værktøjerne. Du kan enten åbne DevTools via menuen eller ved at højreklikke og vælge "Undersøg". Mens du navigerer gennem din test-webapp, kan du inspicere forskellige elementer, debugge koden og analysere ydeevnen af din app.
Opsamling
I denne vejledning har du lært, hvordan du opretter en simpel test-webapp for at udnytte fordelene ved Chrome Developer-værktøjerne. Fra installation af Node.js og NPM til oprettelse af projektet og brug af udviklerværktøjerne har du nu viden til at udvikle og debugge dine egne applikationer.
