Карточка проекта
Цвет, отступы и скругление можно исследовать в панели Elements.
Практика в настоящем браузере
Разберитесь в DevTools на живых примерах
Выберите задачу, откройте инструменты Chrome и исследуйте этот стенд. Здесь только вымышленные учебные данные.
Практика — в Chrome на компьютере. На телефоне можно просматривать примеры. Откройте стенд отдельно, нажмите F12 или Ctrl + Shift + I. На macOS — ⌘ + ⌥ + I.
01 / ELEMENTS
Измените карточку, не меняя исходный файл
Найдите правило CSS, измените скругление и проверьте состояние :hover. Правки в DevTools обычно пропадают после перезагрузки.
Сначала сравните два готовых состояния.
Сейчас выбран мятный акцент.
Что сделать в Chrome
- Нажмите правой кнопкой по карточке → Просмотреть код / Inspect.
- В Styles найдите
.practice-card, изменитеborder-radiusиpadding. - Выберите кнопку внутри карточки. Нажмите :hov и включите :hover.
- В Computed проверьте итоговое значение свойства и источник правила.
Для проверки адаптивности включите панель устройств и попробуйте ширины 320, 390 и 768 px. Эмуляция дополняет проверку на реальном телефоне.
02 / CONSOLE
Превратите сообщения в удобный отчёт
Выведите позиции через console.table(), раскройте группу и отличите диагностическое сообщение от учебной ошибки.
Вымышленный прайс3 позиции · 3 712 ₽
Откройте Console, затем нажмите одну из кнопок.
Что сделать в Chrome
- Откройте Console и включите уровни Info и Error, если они скрыты.
- Нажмите «Таблица и группа». Найдите [DevTools Lab] Учебный прайс и раскройте группу.
- Введите в фильтр
DevTools Lab. Сравните строки таблицы и рассчитанную сумму. - Нажмите «Учебная ошибка». Разверните сообщение и перейдите по ссылке на строку
lab.js.
Ошибка создаётся специально по вашей кнопке. Стенд не аварийно завершается; это упражнение по чтению сообщений и стека.
03 / NETWORK
Проследите путь запроса до ответа
Получите локальный JSON через fetch(), затем сравните успешный ответ с отсутствующим файлом.
Путь запроса: data/prices.json
Пока нет запросов
Откройте Network до нажатия кнопки, чтобы увидеть запрос.
Что сделать в Chrome
- Откройте Network. Выберите фильтр Fetch/XHR; запись запросов должна быть включена.
- Нажмите «Загрузить JSON» и выберите
prices.jsonв списке. - Проверьте Headers → Status Code, Response, Initiator и Timing.
- Нажмите «Запросить отсутствующий файл» и сравните статус и тело ответа. Для повторных запросов можно включить Disable cache.
Отсутствующий ресурс обычно даёт HTTP 404. Стенд показывает реальный ответ сервера. fetch() сам по себе не отклоняет Promise из-за HTTP 404 — статус проверяет наш код.
04 / SOURCES
Найдите ошибку в расчёте по шагам
Здесь ошибка заложена намеренно: строки из полей соединяются оператором +. Правильная сумма — количество × цена.
Ожидаемый результат при 12 × 2503 000 ₽
Запустите расчёт с ошибкой и проверьте типы переменных.
Исправленная функция
function calculateFixed(quantity, price) {
return Number(quantity) * Number(price);
}Что сделать в Chrome
- В Sources найдите
lab-model.js. Быстрый поиск файла: Ctrl + P или ⌘ + P. - В функции
calculateBuggy()поставьте breakpoint на строкеconst total = quantity + price;. - Нажмите «Рассчитать с ошибкой». Пока выполнение приостановлено, изучите Scope и добавьте
typeof quantityв Watch. - Сделайте шаг Step over, проверьте
total, затем продолжите выполнение. Сравните с правильной функцией.
Приостановка появится только после установки вашей точки останова. Стенд не запускает debugger автоматически.
05 / PERFORMANCE
Посмотрите, как создаются элементы
Запишите добавление карточек в DOM. Сравните последовательные вставки и одну вставку через DocumentFragment.
Карточек пока нет. Откройте Performance и начните запись.
Время здесь показывает только выполнение функции вставки, без полного цикла отрисовки. Это иллюстрация, а не доказательство, что один способ всегда быстрее.
Что сделать в Chrome
- В Performance запустите запись, вернитесь на страницу и нажмите «Вставить по одной».
- Остановите запись. Найдите Main, выполнение JavaScript и последующие этапы рендеринга.
- Очистите карточки. Сделайте новую запись для «Вставить пакетом» с тем же количеством.
- Сравните обе записи: число вызовов и работу браузера. При необходимости используйте одинаковое замедление CPU.
Для короткой операции разница может быть небольшой. Не делайте вывод о производительности всего сайта по одному запуску этого примера.
06 / MEMORY
Найдите данные, которые держит ссылка
Создайте небольшой массив объектов, найдите его в снимке памяти и затем освободите удерживающую ссылку.
Удерживаемые учебные записи0
Не созданыБудет создано 12 000 небольших вымышленных записей. Повторное нажатие заменяет массив.
Что исследовать в снимке
window.DevToolsLab.retainedSampleПосле освобождения здесь будет null. Освобождение ссылки позволяет сборщику мусора убрать массив, когда на него больше нет других ссылок.
Что сделать в Chrome
- Откройте Memory → Heap snapshot. Сделайте начальный снимок.
- Нажмите «Создать данные» и сделайте второй снимок. Ищите массив через объект
DevToolsLabи изучите Retainers. - Нажмите «Освободить ссылку». При необходимости используйте кнопку сборки мусора в DevTools и сделайте следующий снимок.
- Сравните снимки и оставшиеся ссылки. Удалите временные глобальные переменные, если сами сохраняли объекты из консоли.
Память не обязана уменьшиться мгновенно. Сам DevTools, снимки и переменные консоли могут удерживать объекты. Стенд не накапливает массивы при повторных нажатиях.