Нажимайте кнопки слева, чтобы вызвать события, и исследуйте результат во вкладках DevTools. Наводите курсор на области для подсказок. Важно: симулятор служит только для демонстрации и не заменяет сам инструмент.
Профиль пользователя
Анна Смирнова
anna.smirnova@example.com
Online
Данные от сервера появятся здесь...
Ошибка загрузки данных!
Что это? Вкладка Network — шпион за общением браузера с сервером. Она показывает все сетевые запросы. Что делать тестировщику? Проверять статусы запросов (200 - успех, 404 - не найдено) и проверять, что при отправке форм уходят правильные данные.
Name
Status
Type
Что это? Консоль — это журнал событий и командная строка для JavaScript. Что делать тестировщику? Искать красные сообщения об ошибках после выполнения действий. Они почти всегда указывают на баг.
Что это? Вкладка Elements показывает "живой" HTML-код и CSS-стили. Что делать тестировщику? Искать элементы, проверять их теги и атрибуты. Временно менять CSS, чтобы проверить гипотезы о визуальных багах.
Что это? Эта вкладка показывает, какие данные сайт хранит в вашем браузере (Local Storage, Cookies и др.). Что делать тестировщику? Проверять, что сайт сохраняет правильные данные (например, токен авторизации после логина), и что эти данные корректно удаляются (например, при выходе из аккаунта).
Local Storage
userTheme
"dark"
authToken
"a1b2c3d4e5f6..."
Cookies
sessionId
"xyz987..."
Что это? Показывает все файлы, из которых состоит сайт (JS, CSS, картинки). Что делать? Смотреть, какие скрипты загружены, и ставить "точки останова" (breakpoints) для отладки сложной логики вместе с разработчиком.
- assets/
- css/
- main.css
- js/
- app.js
Что это? Инструмент для анализа производительности. Записывает, на что браузер тратит время при загрузке и работе страницы. Что делать? Записывать профиль производительности для "тормозящих" страниц и искать "длинные задачи" (long tasks), которые мешают отзывчивости.
Что это? Вкладка для отслеживания использования оперативной памяти. Что делать? Делать "снимки памяти" (heap snapshots) до и после выполнения какого-то действия. Если память после действия не освобождается, это может быть утечка (memory leak).
- Snapshot 1 (10.5 MB)
- Snapshot 2 (12.8 MB)
Что это? Вкладка Security показывает информацию о безопасности страницы: валидность сертификата (HTTPS), безопасность подключения и наличие смешанного контента. Что делать тестировщику? Убедиться, что страница использует HTTPS. Проверить, что сертификат действителен и выдан доверенным центром. Искать предупреждения о "Mixed Content".