Luo ensimmäinen testiwebsovelluksesi Chromen kehittäjätyökaluilla

Tässä oppaassa opit luomaan yksinkertaisen testiweb-sovelluksen oppiaksesi ensimmäiset vaiheet Chrome-kehittäjätyökalujen käytössä. Käymme läpi projektin perustamisesta sovelluksen suorittamiseen asti, jotta pystyt hyödyntämään kehittäjätyökalujen tehokkaita ominaisuuksia. Olitpa sitten kokenut kehittäjä tai vasta-alkaja, tämä askel-askeleelta-opas on sinua varten.

Tärkeimmät oivallukset

• Sinun on asennettava Node.js ja NPM-projektin perustamiseksi.
• Uuden projektin luominen on helppoa ja nopeaa.
• Chrome-kehittäjätyökalujen käyttö mahdollistaa sovelluksesi tarkat vianjäljitykset.

Askel-askeleelta-opas

Luo testiweb-sovelluksesi seuraamalla näitä yksinkertaisia vaiheita:

Vaihe 1: Node.js:n ja NPM:n asentaminen

Ennen kuin voit luoda projektin, varmista, että sinulla on asennettuna Node.js ja NPM (Node Package Manager). Siirry osoitteeseen nodejs.org ja lataa sieltä käyttöjärjestelmällesi sopiva asennusversio. Asennuksen jälkeen voit tarkistaa NPM:n terminaalissa syöttämällä komennon npm -v.

Vaihe 2: Terminaalin avaaminen ja hakemiston luominen

Avaa terminaali tai komentokehote luodaksesi testisovelluksesi. Sinun on valittava hakemisto, johon haluat sovelluksen luoda. Siirry haluamaasi hakemistoon ja syötä seuraava komento luodaksesi alihakemiston projektia varten.

Vaihe 3: Projektin luominen NPM:n avulla

Uuden projektin luomiseksi käytä komentoa npm create. Voit valita projektillesi nimen. Esimerkissämme käytämme nimeä "Def Tools Test". Syötä yksinkertaisesti komento npm create def-tools-test ja paina Enter. Saat ehkä kysymyksen haluatko asentaa paketin; vahvista tämä yksinkertaisesti.

Vaihe 4: Frameworkin valinta

Projektin luomisen jälkeen sinulta kysytään, mitä frameworkia haluat käyttää. Voit valita vaihtoehdot kuten Vue.js, React tai yksinkertaisesti Vanilla JavaScript. Tässä oppaassa valitsemme Vanillan, jotta voimme työskennellä puhdasta JavaScriptiä käyttäen.

Vaihe 5: TypeScriptin ja JavaScriptin välillä valitseminen

Sinulla on myös mahdollisuus valita TypeScriptin ja JavaScriptin välillä. Tässä oppaassa käytämme JavaScriptiä, jotta perusteet pidetään helposti ymmärrettävinä.

Vaihe 6: Riippuvuuksien asentaminen

Nyt on aika asentaa tarvittavat riippuvuudet. Syötä terminaalissa npm install ladataksesi tarvittavat moduulit ja asentaaksesi ne projektillesi.

Vaihe 7: Projektikansion tarkistaminen

Asennuksen jälkeen voit tarkastella juuri luotua projektikansiota. Käytä komentoa ls nähdäksesi asennetut tiedostot.

Vaihe 8: Kehityspalvelimen käynnistäminen

Jotta voisit suorittaa web-sovelluksen, sinun on käynnistettävä kehityspalvelin. Syötä komento npm run dev. Tällä käynnistät paikallisen palvelimen, joka tarjoaa sovelluksesi.

Vaihe 9: Sovelluksen avaaminen selaimessa

Kun serveri on käynnissä, löydät URL-osoitteen konsolista (yleensä http://localhost:3000). Jos käytät jo Chromea oletusselaimena, voit yksinkertaisesti napsauttaa linkkiä. Vaihtoehtoisesti voit kopioida osoitteen ja liittää sen Chromen osoiteriville.

Vaihe 10: Tutustu testiweb-sovellukseen

Kun sovellus on avattu, näet käyttöliittymän, joka koostuu yleensä yksinkertaisesta "Hello V" -tekstistä ja laskuripainikkeesta. Kun napsautat painiketta, laskuri kasvaa. Tämä tarjoaa sinulle yksinkertaisen, mutta toimivan testisovelluksen, jolla voit tutkia DevToolsia.

Vaihe 11: Chrome Developer -työkalujen käyttö

Nyt on aika avata Chrome Developer -työkalut. Voit avata DevToolsit joko valikosta tai napsauttamalla hiiren oikealla painikkeella ja valitsemalla "Tutki". Selatessasi testiweb-sovellustasi voit tarkastella eri elementtejä, vianmäärätä koodia ja analysoida sovelluksesi suorituskykyä.

Yhteenveto

Tässä oppaassa opit luomaan yksinkertaisen testiweb-sovelluksen hyödyntääksesi Chrome Developer -työkalujen etuja. Asennuksesta Node.js ja NPM:ään, projektin luomiseen ja kehitystyökalujen käyttämiseen sinulla on nyt tietoja, joiden avulla voit kehittää ja vianmäärätä omia sovelluksiasi.