Урок 7 из 8 · 20 мин · обновлено

Инструменты: Git, npm, Vite и инструменты разработчика в браузере

Чем пользуется frontend-разработчик каждый день: Git для истории кода, npm для библиотек, сборщик Vite для проекта и инструменты разработчика в браузере для поиска ошибок.

Git: история кода

Каждый день frontend-разработчик меняет десятки файлов. Git запоминает каждое сохранённое изменение — коммит — и позволяет вернуться к любой версии. Типичный день:

Терминал
git switch -c order-form
git add .
git commit -m "Форма заказа: поле телефона и проверка"
git push

Разработчик создал ветку для новой задачи, сохранил изменения и отправил их на сервер, где коллега посмотрит код перед объединением с основной веткой. Всё о Git — в курсе «Git и GitHub».

npm: готовые библиотеки

Писать всё с нуля не нужно: для работы с датами, графиками или формами есть готовые библиотеки. Их устанавливает npm — менеджер пакетов, который ставится вместе с Node.js:

Терминал
npm install dayjs

Список библиотек проекта хранится в файле package.json:

JSON
{
  "name": "zerno-coffee",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "dayjs": "^1.11.23"
  }
}

Сами библиотеки лежат в папке node_modules. Её не хранят в Git — она большая и восстанавливается одной командой npm install по списку из package.json.

Сборщик Vite

Современный проект — это десятки файлов, библиотеки, иногда TypeScript. Браузеру всё это нужно отдать в удобном виде. Этим занимается сборщик. Один из самых популярных — Vite. Новый проект создаётся одной командой:

Терминал
npm create vite@latest zerno-coffee
cd zerno-coffee
npm install
npm run dev
Результат
  VITE v8.3.5  ready in 234 ms

  ➜  Local:   http://localhost:5173/
  • npm run dev запускает проект на вашем компьютере. При сохранении файла страница в браузере обновляется сама.
  • npm run build собирает оптимизированную версию — папку, которую выкладывают на хостинг.

Инструменты разработчика в браузере

Главный рабочий инструмент — встроенный в браузер набор инструментов разработчика (клавиша F12):

Вкладка Для чего
Elements Посмотреть разметку и стили любого элемента, поменять их на лету
Console Ошибки JavaScript и сообщения console.log
Network Все запросы страницы: что ушло на сервер, что пришло, сколько заняло
Режим устройства Посмотреть сайт на ширине телефона
Lighthouse Автоматическая проверка скорости и доступности

Пример: кнопка «Заказать» в «Зерне» прижалась к полю телефона. Во вкладке Elements видно, что у неё margin-top: 0 — правило из общего файла стилей перекрыло нужный отступ. Найти такое глазами в коде можно за час, в инструментах разработчика — за минуту.

Попробуйте сами. Меню «Зерна» не загружается, на странице пусто. Опишите по шагам, где в инструментах разработчика вы будете искать причину.

Пример ответа
  1. Console — есть ли ошибки JavaScript? Например, опечатка в коде или null вместо элемента.
  2. Network — ушёл ли запрос к /api/menu? Какой код ответа: 200, 404 или 500? Что пришло в ответе?
  3. Если ответ 200 и данные правильные, но на странице пусто, — Elements: появились ли элементы в разметке? Может, они есть, но скрыты стилями.
  4. Если запрос вернул ошибку сервера — сообщить backend-разработчику, приложив адрес запроса, код ответа и время.

Мини-тест · 4 вопроса

Проверьте себя

Выберите вариант, который кажется вам правильным. В конце вы увидите свой результат и объяснение к каждому вопросу.

  1. Зачем frontend-разработчику Git?

  2. Что хранится в файле package.json?

  3. Что делает команда npm run build в проекте на Vite?

  4. В какой вкладке инструментов разработчика посмотреть, почему у кнопки не тот отступ?