Selles juhendis saate õppida, kuidas luua lihtne testveebirakendus, et tutvuda esimeste sammudega Chrome'i arendaja tööriistadega. Läheme projekti seadistamisest rakenduse käivitamiseni, nii et olete võimeline kasutama arendajatööriistade võimsaid funktsioone. Olgu teil siis kogemusi või olete algaja, see samm-sammult juhend on teie jaoks ideaalne.
Kõige olulisemad teadmised
- Oma projekti seadistamiseks vajate Node.js ja NPM-i.
- Uue projekti loomine on lihtne ja kiire.
- Chrome'i arendajatööriistade kasutamine võimaldab teie rakenduse täpset tõrkeotsingut.
Samm-sammult juhend
Lihtsa testveebirakenduse loomiseks järgige neid samme:
Samm 1: Node.js ja NPM-i installimine
Enne projekti loomist veenduge, et teil oleks installitud Node.js ja NPM (Node Package Manager). Selleks minge veebisaidile nodejs.org ja laadige alla installer-versioon, mis sobib teie operatsioonisüsteemile. Pärast installimist kontrollige terminalis NPM-i, sisestades käsu npm -v.
Samm 2: Terminali avamine ja kataloogi loomine
Oma testrakenduse loomiseks avage terminal või käsuviip. Peate valima kataloogi, kuhu soovite rakenduse luua. Navigeerige soovitud kataloogi ja sisestage järgmine käsk alamkataloogi loomiseks projekti jaoks.
Samm 3: Projekti loomine NPM-iga
Uue projekti loomiseks kasutage käsku npm create. Saate valida projekti nime. Meie näites kasutame nime "Def Tools Test". Sisestage lihtsalt käsk npm create def-tools-test ja vajutage Enter. Võimalik, et küsitakse, kas soovite paketti installida; kinnitage see lihtsalt.
Samm 4: Raamistiku valimine
Pärast projekti loomist küsitakse teilt, millist raamistikku soovite kasutada. Saate valida võimaluste hulgast nagu Vue.js, React või lihtsalt Vanilla JavaScript. Selle juhendi jaoks valime Vanilla, et töötada puhta JavaScriptiga.
Samm 5: TypeScripti ja JavaScripti vahel valimine
Samuti on teil võimalus valida TypeScripti ja JavaScripti vahel. Selle õpetuse jaoks kasutame JavaScripti, et hoida põhiandmeid lihtsalt mõistetavana.
Samm 6: Sõltuvuste installimine
Nüüd on aeg vajalikud sõltuvused installida. Sisestage terminalis käsk npm install, et alla laadida vajalikud moodulid ja installida need oma projekti.
Samm 7: Projekti kausta kontrollimine
Installimise järel saate vaadata, millised uued projekti kaustasid on loodud. Kasutage käsku ls, et vaadata, milliseid faile on installitud.
Samm 8: Arendusserveri käivitamine
Veebirakenduse käitamiseks käivitage arendusserver. Sisestage käsk npm run dev. See käivitab kohaliku serveri, mis pakub teie rakendust.
Samm 9: Rakenduse avamine brauseris
Kui server töötab, leiate konsoolist URL-i (tavaliselt http://localhost:3000). Kui kasutate juba Chrome'i vaikebrauserina, saate lihtsalt lingil klõpsata. Või võite aadressi kopeerida ja Chrome'i aadressiribale kleepida.
Samm 10: Tutvuge testimisveebirakendusega
Kui rakendus on avatud, näete kasutajaliidest, mis koosneb tavaliselt lihtsast "Hello V" ja nupust "Lugemise nupud". Klõpsates nupul, suureneb loendur. See annab teile lihtsa, kuid funktsionaalse testimisrakenduse, et uurida arendusvahendeid.
Samm 11: Chrome'i arendajatööriistade kasutamine
Nüüd on aeg avada Chrome'i arendajatööriistad. Saate arendajatööriistad avada menüü kaudu või paremklõpsu abil ja valides "Uuri". Testides oma testimisveebirakendust saate uurida erinevaid elemente, siluda koodi ja analüüsida rakenduse jõudlust.
Kokkuvõte
Selles juhendis õppisite, kuidas luua lihtne testimisveebirakendus, et saaksite kasutada Chrome'i arendajatööriistade eeliseid. Alates Node.js-i ja NPM-i installimisest kuni projekti loomiseni ja arendustööriistade kasutamiseni on teil nüüd teadmised enda rakenduste arendamiseks ja silumiseks.
Sagedased küsimused
Mis on Node.js ja miks seda vaja on?Node.js on JavaScripti tööajakeskkond, mis võimaldab teil serveris käivitada JavaScripti koodi. Seda on vaja NPM-i ja veebirakenduse installimiseks ja käitamiseks.
Kuidas käivitada arendusserver?Sisestage terminali käsk npm run dev, et käivitada arendusserver.
Mis vahe on JavaScripti ja TypeScripti vahel?JavaScript on dünaamiline programmeerimiskeel, samas kui TypeScript on staatiliselt tüübitud JavaScripti alamhulk, mis pakub tüübikontrolli ja muid funktsioone.
Kuidas avada Chrome'i arendajatööriistad?Chrome'i arendajatööriistad saab avada, paremklõpsates veebilehel ja valides "Uuri" või kasutades kiirklahve Ctrl + Shift + I (Windows) või Cmd + Option + I (Mac).
