Izveido savu pirmo testa tīmekļa lietotni ar Chrome Developer Tools

Šajā ceļvedī tu apgūsi, kā izveidot vienkāršu testa tīmekļa lietojumprogrammu, lai iemācītos pamata soļus, kā strādāt ar Chrome Developer rīkiem. Mēs pārvietosimies no projekta iestatīšanas līdz lietojumprogrammas izpildei, lai tu varētu izmantot attīstības rīku jaudīgās funkcijas. Vai tu jau esi pieredzējis lietotājs vai iesācējs, šis soli pa solim veiktais ceļvedis ir ideāli piemērots tieši tev.

Svarīgākie secinājumi

• Tevis ir nepieciešams Node.js un NPM, lai iestatītu projektu.
• Jauna projekta izveide ir vienkārša un ātra.
• Chrome Developer Tools izmantošana ļauj precīzi atkļūdot savu lietojumprogrammu.

Soli pa solim veiktais ceļvedis

Lai izveidotu savu testa tīmekļa lietojumprogrammu, seko šiem vienkāršajiem soļiem:

1. solis: Node.js un NPM uzstādīšana

Pirms tu vari izveidot projektu, pārliecinies, ka uzstādījis Node.js un NPM (Node Package Manager). Dodieties uz vietni nodejs.org un lejupielādējiet piemērotu instalācijas versiju savam operētājsistēmai. Pēc uzstādīšanas Node.js terminālī pārbaudi, ievadot komandu npm -v.

2. solis: Atver termināli un izveido direktoriju

Lai izveidotu savu testa lietojumprogrammu, atver termināli vai komandrindu. Tev jāizvēlas direktorija, kur izveidot lietojumprogrammu. Navigējiet uz vēlamo direktoriju un ievadiet sekojošo komandu, lai izveidotu apakšdirektoriju projektam.

3. solis: Projekta izveide ar NPM

Lai izveidotu jaunu projektu, izmanto komandu npm create. Tu vari izvēlēties projektam nosaukumu. Mūsu piemērā izmantojam "Def Tools Test". Vienādi ieraksti komandu npm create def-tools-test un nospied Enter taustiņu. Tevi varētu lūgt instalēt pakotni; vienkārši apstiprini to.

4. solis: Framework izvēle

Pēc projekta izveides tevi lūgs izvēlēties, kādu ietvaru vēlies izmantot. Tu vari izvēlēties opcijas kā Vue.js, React vai vienkārši Vanilla JavaScript. Šajā ceļvedī mēs izvēlamies Vanilla, lai strādātu ar skaidru JavaScript.

5. solis: Izvēle starp TypeScript un JavaScript

Tev ir iespēja izvēlēties starp TypeScript un JavaScript. Šajā tutoriālā izmantosim JavaScript, lai saglabātu pamatus viegli saprotamus.

6. solis: Atkarību instalēšana

Tagad ir laiks instalēt nepieciešamās atkarības. Ievadi terminālī npm install, lai lejupielādētu nepieciešamos moduļus un instalētu tos tavā projektā.

7. solis: Pārbaudīt projektu mapes

Pēc instalēšanas vari apskatīt jaunveidoto projektu mapi. Izmanto komandu ls, lai aplūkotu instalētās datnes.

8. solis: Palaiž izstrādes serveri

Lai izpildītu tīmekļa lietojumprogrammu, ir jāstartē izstrādes serveris. Ievadi komandu npm run dev. Tas palaiž vietējo serveri, kas nodrošina tavu lietojumprogrammu.

9. solis: Atver lietojumprogrammu pārlūkprogrammā

Kad serveris ir darbībā, konsole atradīsi URL (parasti http://localhost:3000). Ja jau izmanto Chrome kā savu noklusējuma pārlūkprogrammu, vienkārši noklikšķini uz saites. Vai arī vari nokopēt adresi un ielīmēt Chrome adreses joslā.

Solījums 10: Izpētiet testa tīmekļa lietotni

Kad lietojumprogramma ir atvērta, redzēsit lietotāja saskarni, kas parasti satur vienkāršu “Hello V” un skaitītāja pogu. Noklikšķinot uz pogas, skaitītājs palielinās. Tas sniedz jums vienkāršu, bet funkcionalu testa lietotni, lai izpētītu DevTools.

Solījums 11: Izpildiet Chrome Developer Tools

Tagad ir laiks atvērt Chrome Developer Tools. Jūs varat atvērt DevTools vai nu caur izvēlni, vai, noklikšķinot ar labo peles taustiņu un izvēloties “Pārbaudīt”. Navigējot caur savu testa tīmekļa lietotni, jūs varat inspicēt dažādus elementus, atkļūdot kodu un analizēt jūsu lietotnes veiktspēju.

Kopsavilkums

Šajā rokasgrāmatā jūs esat iemācījies, kā izveidot vienkāršu testa tīmekļa lietotni, lai izmantotu Chrome Developer Tools priekšrocības. No Node.js un NPM instalēšanas līdz projektu izveidošanai un izstrādes rīku izmantošanai jūs tagad esat ieguvis zināšanas, lai izstrādātu un atkļūdotu savas lietotnes.