Šiame vadove išmoksiši, kaip sukurti paprastą testinę interneto programėlę, kad išmoktum pirmuosius žingsnius dirbant su Chrome Developer įrankiais. Nuo projekto sukūrimo iki programos paleidimo eisiame, kad galėtum naudotis išmaniomis kūrėjų įrankių funkcijomis. Nesvarbu, ar jau turite patirties, ar esate naujokas, šis palaipsniui vykdomas vadovas idealiai jums.
Svarbiausios išvados
- Tau reikės Node.js ir NPM, kad sukurtum projektą.
- Naujo projekto sukūrimas yra paprastas ir greitas.
- Chrome Developer įrankių naudojimas leidžia tikslią tavo programos derinimą.
Palaipsniui vykdomas vadovas
Norėdamas sukurti savo testinę interneto programėlę, sek šiuos paprastus žingsnius:
Žingsnis 1: Node.js ir NPM diegimas
Prieš sukurią projektą, įsitikink, kad turi įdiegęs Node.js ir NPM (Node Package Manager). Tam aplankyk nodejs.org svetainę ir parsisiųsk instaliavimo failą, kuris tinkamas tavo operacinei sistemai. Baigus instaliavimą, terminale patikrink NPM versiją įvesdami komandą npm -v.
Žingsnis 2: Atidaryk terminalą ir sukurk katalogą
Atidaryk terminalą arba komandinę eilutę, norėdamas sukurti savo testinę programėlę. Turi pasirinkti katalogą, kuriame norėtum sukurti programėlę. Naviguok į norimą katalogą ir įvesk šią komandą, kuria sukursi poaplankį projektui kurti.

Žingsnis 3: Projektas sukuriamas naudojant NPM
Norint sukurti naują projektą, naudojama komanda npm create. Gali pasirinkti pavadinimą savo projektui. Mūsų pavyzdyje naudosime "Def Tools Test". Tiesiog įvesk komandą npm create def-tools-test ir spausk Enter. Galbūt bus paklausta, ar nori įdiegti paketą; tiesiog patvirtink.

Žingsnis 4: Frameworko parinkimas
Po projekto sukūrimo, bus paklausta, kurį frameworką norėtum naudoti. Gali pasirinkti variantus kaip Vue.js, React ar tiesiog Vanilla JavaScript. Šiame vadove pasirenkame Vanilla, kad dirbtume su grynuoju JavaScript.

Žingsnis 5: TypeScript ir JavaScript parinkimas
Turi galimybę pasirinkti tarp TypeScript ir JavaScript. Šiame vadove naudosime JavaScript, kad pagrindai būtų lengvai suprantami.

Žingsnis 6: Priklausomybių instaliavimas
Dabar metas įdiegti reikiamas priklausomybes. Terminale įvesk npm install, kad atsiųstum reikiamus modulius ir instaliuotum juos į savo projektą.

Žingsnis 7: Projektų aplanko patikrinimas
Užbaigus instaliavimą, gali peržiūrėti tik sukurtą projektų aplanką. Norėdamas matyti įrašus, naudok komandą ls.

Žingsnis 8: Pradėk kūrimo serverį
Norėdamas paleisti interneto programėlę, turi pradėti kūrimo serverį. Įvesk komandą npm run dev. Taip bus paleistas vietinis serveris, kuris parengs tavo programėlę.

Žingsnis 9: Atidaryti programą naršyklėje
Kai serveris veikia, konsolėje rasi URL adresą (dažniausiai http://localhost:3000). Jei Chrome jau yra tavo numatytasis naršyklė, tiesiog spustelėk nuorodą. Alternatyviai, gali nukopijuoti adresą ir įklijuoti jį į Chrome adreso juostą.

10 žingsnis: Ištyrinėkite testinę svetainę
Kai atidaroma programa, pamatysite vartotojo sąsają, kuri dažniausiai susideda iš paprasto "Hello V" ir skaitiklio mygtuko. Paspaudus mygtuką, skaitiklis padidės. Tai suteikia jums paprastą, bet veikiančią testinę programėlę, kurioje galėsite naršyti "DevTools".
11 žingsnis: Chrome programuotojų įrankių naudojimas
Dabar laikas atidaryti "Chrome" programuotojų įrankius. "DevTools" galite atidaryti per meniu arba spustelėdami dešinįjį pelės mygtuką ir pasirinkdami „Tyrimas“. Naršydami per savo testinę svetainę, galite tikrinti skirtingus elementus, derinti kodą ir analizuoti programėlės veikimą.

Santrauka
Šiame vadove išmokote, kaip sukurti paprastą testinę interneto programėlę, kad galėtumėte pasinaudoti „Chrome“ programuotojų įrankių pranašumais. Nuo „Node.js“ ir „NPM“ diegimo per projekto kūrimą iki įrankių naudojimo dabar turite žinių, kaip kurti ir derinti savo programėles.
Daugiausia užduodami klausimai
Kas yra Node.js ir kodėl man to reikia?Node.js yra JavaScript vykdymo aplinka, leidžianti jums vykdyti JavaScript kodą serveryje. Jums reikia jo, norint įdiegti ir vykdyti NPM ir savo interneto programėlę.
Kaip paleisti plėtros serverį?Įveskite terminalo komandą npm run dev, kad paleisti plėtros serverį.
Kokia skirtumas tarp JavaScript ir TypeScript?JavaScript yra dinaminė programavimo kalba, o TypeScript yra statinės tipų apsaugotos JavaScript dalis, kuri suteikia tipo tikrinimą ir kitas funkcijas.
Kaip atidaryti „Chrome“ programuotojų įrankius?Galite atidaryti „Chrome DevTools“, spustelėdami dešinįjį pelės mygtuką svetainėje ir pasirinkdami „Tyrimas“, arba naudodami klavišų kombinaciją „Ctrl + Shift + I“ (Windows) arba „Cmd + Option + I“ (Mac).