Фронтенд

Question 1

Что можешь рассказать про HTML

Answer 1

HTML (HyperText Markup Language) — стандартизированный язык разметки для создания веб-страниц. Использует теги и атрибуты для структурирования контента. Примеры элементов: <a> (ссылки), <img> (изображения), <form> (формы).

Question 2

Что такое Chrome DevTools

Answer 2

Набор инструментов в Google Chrome для разработки и отладки сайтов. Возможности: просмотр HTML/CSS, отладка JavaScript, анализ сетевых запросов, проверка производительности.

Question 3

Какие вкладки есть в Chrome DevTools

Answer 3

Основные вкладки:
- Elements (HTML/CSS)
- Console (ошибки JS)
- Network (сетевые запросы)
- Performance (производительность)
- Application (куки и хранилища)
- Security (сертификаты).

Question 4

Что такое Elements

Answer 4

Вкладка для работы с HTML/CSS. Позволяет:
1. Редактировать код в реальном времени (изменения видны только локально).
2. Инспектировать элементы (правый клик → «Просмотреть код»).
3. Тестировать адаптивность (Toggle Device Toolbar).

Question 5

Что такое Console

Answer 5

Инструмент для:
- Просмотра ошибок JavaScript.
- Выполнения JS-кода напрямую.
- Отладки скриптов (например, console.log("Hello")).
⚠️ Ошибки загрузки ресурсов (стилей, изображений) тоже отображаются здесь.

Question 6

Что такое Sources

Answer 6

Вкладка для работы с исходным кодом:
- Просмотр всех файлов сайта (HTML, CSS, JS).
- Отладка JavaScript (точки останова, пошаговое выполнение).
- Редактирование кода через Workspaces (синхронизация с локальными файлами).

Question 7

Что такое Network

Answer 7

Инструмент для анализа сетевых запросов:
- Показывает все HTTP-запросы (статус, время, размер).
- Фильтрация по типу (XHR, JS, CSS).
- Проверка заголовков и тела запросов/ответов.
🚀 Используется для оптимизации загрузки страницы.

Question 8

Что такое Performance

Answer 8

Вкладка для профилирования производительности:
- Анализ загрузки CPU, памяти.
- Визуализация событий (рендеринг, скрипты).
- Запись и анализ действий пользователя (например, кликов).

Question 9

Что такое Application

Answer 9

Инструмент для работы с хранилищами:
- Cookies
- Local Storage
- Session Storage
- IndexedDB
⚡ Быстрая очистка данных (Clear storage).

Question 10

Что такое Security

Answer 10

Проверка безопасности сайта:
- Информация о сертификате HTTPS.
- Обнаружение смешанного контента (HTTP в HTTPS).
- Анализ CORS-политик.

Question 11

Что расскажешь про CSS

Answer 11

CSS (Cascading Style Sheets) — язык стилей для оформления HTML. Примеры свойств:
- color: red;
- margin: 20px;
- display: flex;
📌 Отвечает за внешний вид страницы.

Question 12

Что расскажешь про JavaScript

Answer 12

JavaScript — язык программирования для добавления интерактивности. Примеры:
- Обработка кликов: button.addEventListener("click", ...).
- Динамическое обновление контента (AJAX).
- Валидация форм.

Question 13

Что такое кроссбраузерность и для чего это нужно тестировщику

Answer 13

Кроссбраузерность — корректная работа сайта во всех браузерах (Chrome, Firefox, Safari).
Тестировщик проверяет:
- Отображение элементов.
- Работу JavaScript.
- Совместимость с мобильными устройствами.