Sukurk savo pirmąją testinę interneto programą naudodamas Chrome kūrėjo įrankius

Š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.