Vytvorte svoju prvú testovaciu webovú aplikáciu pomocou Chrome Developer Tools

V tejto príručke sa naučíte, ako vytvoriť jednoduchú testovaciu web aplikáciu, aby ste sa zoznámili s prvými krokmi pri práci s nástrojmi Chrome Developer. Od zriadenia projektu až po spustenie aplikácie, aby ste boli schopní využívať silné funkcie vývojových nástrojov. Bez ohľadu na to, či máte už skúsenosti alebo ste nováčik, táto krok za krokom príručka je pre vás ideálna.

Najdôležitejšie poznatky

• Na zriadenie projektu potrebujete Node.js a NPM.
• Vytvorenie nového projektu je jednoduché a rýchle.
• Využitie nástrojov Chrome Developer Tools umožňuje presné ladenie vašej aplikácie.

Postupné inštrukcie

Na vytvorenie vašej testovacej web aplikácie postupujte týmito jednoduchými krokmi:

Krok 1: Inštalácia Node.js a NPM

Pred vytvorením projektu sa uistite, že máte nainštalované Node.js a NPM (Node Package Manager). Prejdite na webovú stránku nodejs.org a stiahnite si verziu inštalátora, ktorá je vhodná pre váš operačný systém. Po inštalácii skontrolujte, či máte NPM v termináli zadaním príkazu npm -v.

Krok 2: Otvorenie terminálu a vytvorenie adresára

Pre vytvorenie vašej testovej aplikácie otvorte terminál alebo príkazový riadok. Musíte vybrať adresár, kde chcete aplikáciu vytvoriť. Navigujte do požadovaného adresára a zadajte nasledujúci príkaz na vytvorenie podadresára pre projekt.

Krok 3: Vytvorenie projektu s NPM

Na vytvorenie nového projektu použite príkaz npm create. Môžete si vybrať názov pre svoj projekt. V našom príklade vyberáme "Test Def Tools". Stačí zadajte príkaz npm create def-tools-test a stlačiť "Enter". Môže sa vás spýtať, či chcete nainštalovať balíček; jednoducho to potvrďte.

Krok 4: Výber rámca

Po vytvorení projektu budete vyzvaní na výber rámca, ktorý chcete použiť. Môžete si vybrať možnosti ako Vue.js, React alebo jednoducho Vanilla JavaScript. Pre túto príručku vyberieme Vanilla, aby sme pracovali s čistým JavaScriptom.

Krok 5: Výber medzi TypeScript a JavaScript

Môžete si vybrať aj medzi TypeScriptom a JavaScriptom. V tomto tutoriáli používame JavaScript, aby sme si zachovali základy ľahko zrozumiteľné.

Krok 6: Inštalácia závislostí

Teraz je čas nainštalovať potrebné závislosti. Zadajte v termináli príkaz npm install, aby ste si stiahli a nainštalovali potrebné moduly do vášho projektu.

Krok 7: Kontrola adresára projektu

Po inštalácii si môžete prezrieť novovytvorený adresár projektu. Použite príkaz ls na zobrazenie súborov, ktoré boli nainštalované.

Krok 8: Spustenie vývojového servera

Pre spustenie web aplikácie musíte spustiť vývojový server. Zadajte príkaz npm run dev. Tým sa spustí lokálny server, ktorý poskytuje vašu aplikáciu.

Krok 9: Otvorenie aplikácie v prehliadači

Po spustení servera nájdete v konzole URL adresu (zvyčajne http://localhost:3000). Ak máte Chrome už nastavený ako váš štandardný prehliadač, jednoducho na odkaz kliknite. Alternatívne môžete adresu skopírovať a vložiť do adresného riadku Chrome-u.

Krok 10: Preskúmajte testovaciu webovú aplikáciu

Po otvorení aplikácie uvidíte užívateľské rozhranie, ktoré sa zvyčajne skladá z jednoduchého "Hello V" a tlačidla na počítadlo. Po kliknutí na tlačidlo sa zvyšuje počítadlo. Poskytuje vám to jednoduchú, ale funkčnú testovaciu aplikáciu, ktorá vám pomôže preskúmať DevTools.

Krok 11: Používanie nástrojov pre vývojárov Chrome

Je čas otvoriť nástroje pre vývojárov Chrome. Môžete DevTools otvoriť buď cez menu, alebo kliknutím pravým tlačidlom a voľbou "Preskúmať". Počas navigácie vo vašej testovacej webovej aplikácii môžete preskúmať rôzne prvky, ladenie kódu a analýzu výkonu vášho aplikácie.

Zhrnutie

V tejto príručke ste sa naučili, ako vytvoriť jednoduchú testovaciu webovú aplikáciu, aby ste mohli využívať výhody nástrojov pre vývojárov Chrome. Od inštalácie Node.js a NPM cez vytvorenie projektu až po používanie vývojových nástrojov teraz máte znalosti na vytváranie vlastných aplikácií a ladenie kódu.