Основы работы с DevTools
Узнайте, как открывать и настраивать DevTools для эффективной работы
DevTools предоставляет мощные инструменты для разработки и отладки веб-приложений.
DevTools предоставляет мощные инструменты для разработки и отладки веб-приложений.
DevTools (Developer Tools) – это набор инструментов, встроенных в браузеры, таких как Google Chrome, Firefox, Edge, для отладки, анализа и оптимизации веб-страниц и приложений. Вот основные шаги и примеры, как использовать и настраивать DevTools.
Используйте сочетание клавиш F12 или Ctrl + Shift + I (на Windows) и Cmd + Opt + I (на macOS).
Вы можете перетаскивать панели, изменять их размер и даже выбирать между светлой и темной темой для комфортной работы.
Изучим структуру DOM и научимся изменять HTML и CSS в реальном времени
Научитесь использовать консоль для отладки и логирования информации
Изучим вкладку Network и научимся анализировать сетевые запросы
Научитесь использовать вкладку Performance для анализа и оптимизации производительности вашего приложения
Позволяет просматривать и изменять HTML и CSS.
Место для выполнения JavaScript кода и логирования.
Отслеживание сетевых запросов.
Просмотр и отладка исходного кода JavaScript.
Анализ производительности.
Управление хранилищем (cookies, local storage и др.).
Проверка безопасности страницы.
Автоматический аудит производительности, доступности и SEO.
Для демонстрации будем использовать сайт google.com. Рассмотрим, как использовать вкладку Elements в DevTools для просмотра и изменения HTML и CSS на этом сайте.
1. Просмотр структуры DOM:
На вкладке Elements можно видеть дерево DOM, представляющее структуру HTML документа.
F12 или Ctrl + Shift + I). Перейдите на вкладку Elements. Вы увидите структуру HTML страницы, включая теги <html>, <head>, <body> и их содержимое.2. Выбор элемента на странице:
Вы можете выбрать любой элемент на странице для детального изучения и редактирования.
Elements, а затем щелкните на логотип Google. В DevTools этот элемент будет выделен в дереве DOM.3. Изменение HTML:
Вы можете изменять HTML элементы прямо в DevTools.
<img>). Дважды щелкните на атрибут alt и измените текст на “My Google Logo”. Нажмите Enter, и изменение сразу отобразится в исходном коде.4. Редактирование атрибутов:
Вы можете добавлять, изменять или удалять атрибуты HTML элементов.
<img> логотипа. Щелкните правой кнопкой мыши на элементе в DevTools и выберите Edit as HTML. Добавьте атрибут title="Google Logo". Нажмите Enter, и вы увидите, что атрибут добавлен к элементу.5. Изменение CSS:
Вы можете изменять стили CSS для элементов.
<img> логотипа. В правой панели DevTools вы увидите раздел Styles. Добавьте новое свойство, например, filter: grayscale(100%);. Логотип на странице станет черно-белым.6. Скрытие элементов:
Вы можете скрывать элементы на странице для проверки, как страница выглядит без них.
<img> логотипа. В разделе Styles добавьте свойство display: none;. Логотип исчезнет со страницы.7. Добавление новых элементов:
Вы можете добавлять новые HTML элементы в структуру DOM.
<body> и выберите Edit as HTML. Добавьте новый элемент <p>Hello, this is a new paragraph!</p>. Нажмите Enter, и новый параграф появится на странице.8. Стилизация с помощью CSS классов:
Вы можете добавлять CSS классы к элементам для применения предопределенных стилей.
<input> поисковой строки. В разделе Styles, добавьте новый класс, например, class="highlight". Если у вас в стилях определен класс .highlight { border: 2px solid red; }, поисковая строка получит красную рамку.Вкладка Console в DevTools предоставляет мощные возможности для отладки и взаимодействия с веб-страницами с помощью JavaScript.
1. Открытие консоли:
F12 или Ctrl + Shift + I для Windows, Cmd + Opt + I для macOS).Console.2. Основные команды и их использование:
2.1. console.log():
Используется для вывода сообщений и значений переменных в консоль.
Пример:
console.log('Hello, Google!');
Выводит строку “Hello, Google!” в консоль.
2.2. console.error():
Используется для вывода сообщений об ошибках.
Пример:
console.error('This is an error message.');
Выводит сообщение об ошибке в консоль.
2.3. console.warn():
Используется для вывода предупреждающих сообщений.
Пример:
console.warn('This is a warning message.');
Выводит предупреждающее сообщение в консоль.
2.4. console.table():
Используется для отображения массивов и объектов в виде таблиц.
Пример:
let users = [
{name: 'John', age: 30},
{name: 'Jane', age: 25},
{name: 'Doe', age: 40}
];
console.table(users);
Отображает массив объектов в виде таблицы.
2.5. console.dir():
Используется для отображения интерактивного списка свойств JavaScript объекта.
Пример:
let element = document.querySelector('body');
console.dir(element);
Отображает DOM-элемент <body> в виде интерактивного списка его свойств.
3. Работа с переменными и элементами страницы:
3.1. Получение элементов:
Вы можете использовать JavaScript для получения элементов на странице и работы с ними.
Пример:
let searchButton = document.querySelector('input[name="btnK"]');
console.log(searchButton);
Выводит в консоль элемент кнопки поиска на странице Google.
3.2. Изменение текста элемента:
Вы можете изменять текст элементов прямо из консоли.
Пример:
let logo = document.querySelector('#hplogo');
logo.alt = 'New Alt Text';
console.log(logo.alt);
Изменяет текст атрибута alt для логотипа Google и выводит новый текст в консоль.
4. Выполнение функций:
Вы можете выполнять любые функции и отлаживать их прямо из консоли.
Пример:
function greet(name) {
return 'Hello, ' + name + '!';
}console.log(greet(‘Google’));
Выполняет функцию greet с аргументом ‘Google’ и выводит результат в консоль.
5. Использование выражений:
Консоль позволяет вам выполнять любые JavaScript выражения.
Пример:
let x = 10;
let y = 20;
let sum = x + y;
console.log(sum);
Вычисляет сумму переменных x и y и выводит результат в консоль.
6. Работа с событиями:
Вы можете добавлять и отлаживать события прямо из консоли.
Пример:
document.querySelector('input[name="btnK"]').addEventListener('click', function() {
console.log('Search button clicked!');
});
Добавляет обработчик события для кнопки поиска, который выводит сообщение в консоль при нажатии.
Вкладка Network в DevTools позволяет отслеживать все сетевые запросы, сделанные вашим веб-приложением. Это включает в себя запросы на загрузку HTML, CSS, JavaScript, изображений и других ресурсов.
Открытие и базовая настройка вкладки Network
Открытие вкладки Network:
Ctrl + Shift + I / Cmd + Opt + I).Network.Перезагрузка страницы:
F5 или Ctrl + R / Cmd + R для перезагрузки страницы с открытой вкладкой Network.Основные элементы вкладки Network
Фильтры:
Network вы можете выбрать типы запросов, которые хотите увидеть (All, XHR, JS, CSS, Img, Media, Font, Doc, WS, Other).Img, чтобы увидеть только запросы изображений.Таблица запросов:
Детали запроса:
Примеры анализа сетевых запросов на google.com
Анализ запросов к основным ресурсам:
https://www.google.com и проанализируйте заголовки. Обратите внимание на заголовки Content-Type, Cache-Control и Expires.Фильтрация запросов:
JS, чтобы увидеть все запросы к JavaScript-файлам. Вы увидите такие файлы, как base.js или main.js.Анализ времени загрузки:
Time и Waterfall.Waterfall, чтобы понять, сколько времени занял каждый запрос и как они взаимодействовали друг с другом. Это поможет вам найти узкие места в производительности.Загрузка изображений:
Img, чтобы увидеть все запросы к изображениям.Использование вкладки Timing:
Timing, чтобы увидеть разбивку времени загрузки.https://www.google.com и перейдите на вкладку Timing. Вы увидите такие этапы, как DNS Lookup, Initial Connection, SSL, Request Sent, Waiting (TTFB), и Content Download. Это поможет вам понять, где возникают задержки.Анализ POST-запросов:
Headers, чтобы увидеть отправленные данные.Примеры практического использования
Поиск и устранение проблем с загрузкой ресурсов:
Network, чтобы найти ресурсы, которые занимают много времени на загрузку. Например, вы можете обнаружить, что одно из изображений слишком большое и требует оптимизации.Отладка проблем с CORS:
Network поможет вам увидеть ответы сервера и понять, какие заголовки отсутствуют или неправильно настроены.Проверка кеширования:
Cache-Control и Expires. Это поможет вам убедиться, что браузер правильно кеширует ваш контент для ускорения последующих загрузок.Вкладка Sources в DevTools позволяет вам просматривать, редактировать и отлаживать JavaScript-код на вашей веб-странице. Используя Google.com в качестве примера, мы рассмотрим основные функции вкладки Sources.
1. Открытие вкладки Sources:
Чтобы открыть вкладку Sources, выполните следующие шаги:
F12 или Ctrl + Shift + I (на Windows) или Cmd + Opt + I (на macOS).Sources.Пример: На сайте Google.com откройте DevTools и перейдите на вкладку Sources.
2. Исследование файлов:
На вкладке Sources вы можете видеть дерево файлов, загруженных на страницу. Оно обычно делится на три панели:
Пример: В навигаторе файлов выберите файл main.js или аналогичный (в зависимости от структуры сайта Google.com), чтобы посмотреть его содержимое.
3. Установка точек останова (Breakpoints):
Точки останова позволяют вам остановить выполнение кода в определенном месте и исследовать текущее состояние переменных и вызовов функций.
Пример: В выбранном файле main.js найдите интересующую вас функцию и установите точку останова на первой строке этой функции.
4. Шаговая отладка (Stepping through code):
После установки точки останова вы можете пошагово выполнять код, используя следующие инструменты:
F10): Выполняет текущую строку и переходит к следующей.F11): Входит в вызванную функцию.Shift + F11): Выходит из текущей функции.F8): Продолжает выполнение кода до следующей точки останова.Пример: Установите точку останова в функции обработки клика и нажмите кнопку поиска на Google.com, чтобы остановить выполнение кода. Используйте Step Over, Step Into и Step Out для исследования выполнения кода.
5. Инспектирование переменных и контекста (Inspect variables and context):
Когда выполнение кода останавливается на точке останова, вы можете:
Scope отображает текущие значения переменных.Call Stack показывает последовательность вызовов функций, которые привели к текущей точке.Пример: Установите точку останова в функции обработки ввода в поисковую строку Google.com. Когда выполнение кода остановится, изучите значения переменных на панели Scope.
6. Использование Watch Expressions:
Watch Expressions позволяют вам следить за изменением значений переменных или выражений.
+ на панели Watch, чтобы добавить переменную или выражение.Пример: Добавьте выражение document.getElementById('searchbox').value в Watch Expressions и следите за изменениями, когда пользователь вводит текст в поисковую строку.
7. Использование Snippets:
Snippets – это небольшие фрагменты кода, которые можно сохранять и запускать по необходимости.
Snippets, затем нажмите New Snippet.Ctrl + Enter (Windows) / Cmd + Enter (macOS) для его выполнения.Пример: Создайте сниппет с кодом alert('Hello, Google!') и запустите его, чтобы увидеть всплывающее сообщение на странице Google.com.
8. Локальные изменения и сохранение:
Вы можете временно изменять код в DevTools и тестировать его.
Пример: Измените текст в функции, которая отвечает за отображение текста на странице, и посмотрите результат.
Написание и запуск Snippet:
MySnippet.// Пример сниппета: выводит сообщение в консоль и отображает alert
console.log('Hello from Snippet!');
alert('Hello, Google!');
Ctrl + Enter (на Windows) или Cmd + Enter (на macOS).3. Проверка результата:
Hello, Google!.Пример:
Sources.Snippets и создайте новый сниппет с именем MySnippet.console.log('Hello from Snippet!');
alert('Hello, Google!');
Ctrl + Enter или Cmd + Enter.Hello from Snippet!, и на странице появилось всплывающее окно с текстом Hello, Google!.4. Примеры полезных сниппетов:
Вот несколько примеров сниппетов, которые могут быть полезны при работе с веб-страницами:
console.log('Page load time is ' + (window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart) + ' ms');const links = document.querySelectorAll('a');
links.forEach(link => link.style.backgroundColor = 'yellow');
console.log('Highlighted ' + links.length + ' links.');document.cookie.split(";").forEach(function(c) {
document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
});
alert('All cookies have been deleted.');Управление хранилищем (cookies, local storage и др.)
Вкладка Application в DevTools предоставляет доступ к различным данным и ресурсам, которые веб-страницы хранят в браузере. Эти данные могут включать файлы cookie, local storage, session storage, кэшированные ресурсы, базы данных IndexedDB, файлы сервиса воркера и многое другое. Рассмотрим более детально работу с Application на примере сайта google.com.
1. Открытие вкладки Application:
F12 или Ctrl + Shift + I (Windows) / Cmd + Opt + I (macOS).Application.2. Cookies:
Cookies используются для хранения данных, которые помогают сайтам сохранять состояние и отслеживать активность пользователей.
Просмотр Cookies:
Storage, выберите Cookies и затем https://www.google.com.Редактирование Cookies:
NID.Удаление Cookies:
Delete или правой кнопкой мыши выберите Delete.Пример: Найдите файл cookie с именем 1P_JAR, измените его значение на любое другое и обновите страницу, чтобы увидеть, как это влияет на сайт.
3. Local Storage и Session Storage:
Local Storage и Session Storage используются для хранения данных в браузере без даты истечения срока действия и с истечением после закрытия вкладки соответственно.
Просмотр и изменение данных Local Storage:
Storage, выберите Local Storage и затем https://www.google.com.Add Item. Например, добавьте ключ testKey и значение testValue.Просмотр и изменение данных Session Storage:
Storage, выберите Session Storage и затем https://www.google.com.Пример: Добавьте новую пару ключ-значение в Local Storage и посмотрите, как эти данные сохраняются и доступны при перезагрузке страницы.
4. IndexedDB:
IndexedDB – это асинхронное API для хранения больших объемов структурированных данных, включая файлы и бинарные данные.
Просмотр и взаимодействие с базами данных IndexedDB:
Storage, выберите IndexedDB и затем https://www.google.com.firebaseLocalStorageDb.Изучение данных в IndexedDB:
Пример: Найдите базу данных IndexedDB, созданную сайтом Google, и просмотрите данные, хранящиеся в ней.
5. Cache Storage:
Cache Storage используется для хранения сетевых запросов и ответов, которые могут быть использованы повторно.
Просмотр и управление Cache Storage:
Storage, выберите Cache Storage и затем https://www.google.com.google.com.Очистка Cache Storage:
Delete.Пример: Очистите кэш google.com и посмотрите, как это влияет на производительность сайта при перезагрузке.
6. Service Workers:
Service Workers – это скрипты, которые ваш браузер запускает в фоновом режиме, отдельно от веб-страницы, позволяя выполнять задачи, не зависящие от веб-страницы.
Просмотр и управление Service Workers:
Application, выберите Service Workers.Принудительная перезагрузка Service Workers:
Update или Unregister, чтобы обновить или удалить сервисного рабочего.Пример: Найдите сервисных рабочих, зарегистрированных на сайте Google, и принудительно обновите их.
Однако это лишь часть того, что мы можем вам предложить. На нашем полноценном курсе вы сможете получить углубленные знания и навыки, которые помогут вам стать настоящим мастером DevTools.
Если вам требуется какая-либо поддержка или у вас возникли дополнительные вопросы, не стесняйтесь связаться с нами – мы готовы быстро оказать вам помощь.
Мы также присутствуем в социальных сетях! Подписывайтесь на нас и получайте последние новости, акции, скидки, бесплатные тренинги и участие в марафонах.
Будем рады видеть вас в нашем сообществе!
Публичная оферта. Авторское право © 2024 Школа подготовки тестировщиков
