В това ръководство ще научите как да създадете просто тестово уеб приложение, за да научите първите стъпки в работата с инструментите за разработчици на Chrome. Ще преминем през настройката на проекта, както и изпълнението на приложението, за да можете да използвате мощните функции на инструментите за разработчици. Независимо дали вече имате опит или сте новак, това стъпково ръководство е идеално за вас.
Най-важните изводи
- Трябва да имате Node.js и NPM, за да настроите проекта.
- Създаването на нов проект е лесно и бързо.
- Използването на инструментите за разработчици на Chrome позволява точно дебъгване на вашето приложение.
Стъпка по стъпка ръководство
За да създадете вашия тестово уеб приложение, следвайте тези прости стъпки:
Стъпка 1: Инсталиране на Node.js и NPM
Преди да създадете проект, трябва да се уверите, че имате инсталирани Node.js и NPM (Node Package Manager). Отидете на уебсайта nodejs.org и изтеглете версията на инсталатора, подходяща за вашия операционна система. След инсталацията може да проверите NPM в терминала, като въведете командата npm -v.
Стъпка 2: Отваряне на терминал и създаване на директория
Отворете терминал или команден ред, за да създадете вашия тестово приложение. Трябва да изберете директория, в която искате да създадете приложението. Навигирайте до желаната директория и въведете следната команда, за да създадете поддиректория за проекта.
Стъпка 3: Създаване на проект с NPM
За да създадете нов проект, използвайте командата npm create. Можете да изберете име за вашия проект. В нашия пример използваме "Def Tools Test". Просто въведете командата npm create def-tools-test и натиснете Въведи. Може да ви бъде поискано дали искате да инсталирате пакет; просто потвърдете това.
Стъпка 4: Избор на рамка
След създаването на проекта ви се налага да изберете рамката, която искате да използвате. Можете да изберете опции като Vue.js, React или просто Vanilla JavaScript. За това ръководство избираме Vanilla, за да работим с чист JavaScript.
Стъпка 5: Избор между TypeScript и JavaScript
Имате възможност да изберете между TypeScript и JavaScript. За този урок използваме JavaScript, за да запазим основите лесни за разбиране.
Стъпка 6: Инсталиране на зависимостите
Сега е време да инсталирате необходимите зависимости. Въведете npm install в терминала, за да изтеглите и инсталирате необходимите модули за вашия проект.
Стъпка 7: Проверка на папката с проекта
След инсталирането можете да разгледате вашия новосъздаден проектен фолдер. Използвайте командата ls, за да видите файловете, които са инсталирани.
Стъпка 8: Стартиране на развойния сървър
За да изпълните уеб приложението, трябва да стартирате развойния сървър. Въведете командата npm run dev. Това ще стартира локален сървър, който предоставя вашето приложение.
Стъпка 9: Отваряне на приложението в браузъра
След като сървърът е стартиран, ще намерите URL адрес в конзолата (обикновено http://localhost:3000). Ако вече използвате Chrome като вашия стандартен браузър, просто кликнете връзката. Алтернативно можете да копирате адреса и да го поставите в адресната лента на Chrome.
Стъпка 10: Разглеждане на тестовото уеб приложение
След като приложението е отворено, ще видите потребителския интерфейс, който обикновено се състои от един прост "Hello V" и бутон за броене. Когато кликнете върху бутона, се увеличава броячът. Това ви дава просто, но функционално тестово приложение, за да разгледате DevTools.
Стъпка 11: Използване на инструментите за разработчици в Chrome
Сега е време да отворите инструментите за разработчици в Chrome. Можете да ги отворите чрез менюто или чрез десен бутон и избора "Преглед". Докато навигирате през тестовото си уеб приложение, можете да инспектирате различни елементи, да отстранявате грешки в кода и да анализирате производителността на приложението си.
Резюме
В този урок научихте как да създадете просто тестово уеб приложение, за да използвате предимствата на инструментите за разработчици в Chrome. От инсталирането на Node.js и NPM, през създаването на проекта до използването на разработчицките инструменти, вече имате знанията, за да разработвате и отстранявате грешки в собствените си приложения.
