0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>21 дек 2023</li>
2
<ul><li>21 дек 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Ищем и исправляем ошибки, редактируем код и повышаем скорость веб-приложений.</p>
4
</ul><p>Ищем и исправляем ошибки, редактируем код и повышаем скорость веб-приложений.</p>
5
<p>Иллюстрация: Merry Mary для Skillbox Media</p>
5
<p>Иллюстрация: Merry Mary для Skillbox Media</p>
6
<p>Шеф-редактор Skillbox Media "Код". Пишет о разработке, софт-скиллах и культовых личностях в IT. Обожает Swift, продукты Apple и мемы про код.</p>
6
<p>Шеф-редактор Skillbox Media "Код". Пишет о разработке, софт-скиллах и культовых личностях в IT. Обожает Swift, продукты Apple и мемы про код.</p>
7
<p><strong>Chrome DevTools (developer tools)</strong> - это набор инструментов, которые помогают программистам тестировать сайты и исправлять ошибки в интерактивном режиме. Из этой статьи вы узнаете, как пользоваться DevTools на примере реальных задач веб-разработчика.</p>
7
<p><strong>Chrome DevTools (developer tools)</strong> - это набор инструментов, которые помогают программистам тестировать сайты и исправлять ошибки в интерактивном режиме. Из этой статьи вы узнаете, как пользоваться DevTools на примере реальных задач веб-разработчика.</p>
8
<p><strong>Содержание</strong></p>
8
<p><strong>Содержание</strong></p>
9
<ul><li><a>Как открыть инструменты разработчика</a></li>
9
<ul><li><a>Как открыть инструменты разработчика</a></li>
10
<li><a>Какие есть вкладки в DevTools</a></li>
10
<li><a>Какие есть вкладки в DevTools</a></li>
11
</ul><ul><li><a>Elements</a></li>
11
</ul><ul><li><a>Elements</a></li>
12
<li><a>Sources</a></li>
12
<li><a>Sources</a></li>
13
<li><a>Console</a></li>
13
<li><a>Console</a></li>
14
<li><a>Network</a></li>
14
<li><a>Network</a></li>
15
<li><a>Security</a></li>
15
<li><a>Security</a></li>
16
<li><a>Performance</a></li>
16
<li><a>Performance</a></li>
17
<li><a>Memory</a></li>
17
<li><a>Memory</a></li>
18
<li><a>Lighthouse</a></li>
18
<li><a>Lighthouse</a></li>
19
</ul><ul><li><a>Что можно делать в DevTools</a></li>
19
</ul><ul><li><a>Что можно делать в DevTools</a></li>
20
</ul><ul><li><a>Ищем и исправляем баги</a></li>
20
</ul><ul><li><a>Ищем и исправляем баги</a></li>
21
<li><a>Редактируем исходный код</a></li>
21
<li><a>Редактируем исходный код</a></li>
22
<li><a>Изменяем страницы без погружения в код</a></li>
22
<li><a>Изменяем страницы без погружения в код</a></li>
23
<li><a>Анализируем доступность сайта</a></li>
23
<li><a>Анализируем доступность сайта</a></li>
24
<li><a>Разбираемся со скоростью</a></li>
24
<li><a>Разбираемся со скоростью</a></li>
25
</ul><ul><li><a>Бонус: запускаем скрипты</a></li>
25
</ul><ul><li><a>Бонус: запускаем скрипты</a></li>
26
</ul><p>Для начала - откроем "Инструменты". Это можно сделать как минимум тремя способами:</p>
26
</ul><p>Для начала - откроем "Инструменты". Это можно сделать как минимум тремя способами:</p>
27
<ul><li>Одной кнопкой -<strong>F12</strong>.</li>
27
<ul><li>Одной кнопкой -<strong>F12</strong>.</li>
28
<li>Сочетанием клавиш -<strong>Ctrl</strong>+<strong>Shift</strong>+<strong>I</strong>в Windows или<strong>Command</strong>+<strong>Option</strong>+<strong>I</strong>в macOS.</li>
28
<li>Сочетанием клавиш -<strong>Ctrl</strong>+<strong>Shift</strong>+<strong>I</strong>в Windows или<strong>Command</strong>+<strong>Option</strong>+<strong>I</strong>в macOS.</li>
29
<li>Через меню: нажимаем на три точки → "Дополнительные инструменты" → "Инструменты для разработчиков".</li>
29
<li>Через меню: нажимаем на три точки → "Дополнительные инструменты" → "Инструменты для разработчиков".</li>
30
</ul><p>Эти способы открыть Chrome DevTools будут работать во всех браузерах, где используется хромовский движок: Opera, Microsoft Edge, Mozilla, Brave, "Яндекс Браузер" и даже не к ночи упомянутый Amigo :) И в этом ещё одна прелесть инструментов разработчика Chrome - если освоите их, сможете укротить практически любой современный браузер.</p>
30
</ul><p>Эти способы открыть Chrome DevTools будут работать во всех браузерах, где используется хромовский движок: Opera, Microsoft Edge, Mozilla, Brave, "Яндекс Браузер" и даже не к ночи упомянутый Amigo :) И в этом ещё одна прелесть инструментов разработчика Chrome - если освоите их, сможете укротить практически любой современный браузер.</p>
31
<p>Теперь разберём основные вкладки DevTools и их назначение.</p>
31
<p>Теперь разберём основные вкладки DevTools и их назначение.</p>
32
<p>Позволяет просматривать и редактировать элементы DOM-дерева страницы. Работает так: наводите курсор на строчку кода, а браузер подсвечивает вам элемент страницы, за который он отвечает. Это удобно: можно в лайв-режиме менять параметры объектов и сразу наблюдать за изменениями. В свою очередь, у Elements есть несколько дополнительных вкладок для работы со стилями, параметрами и событиями элемента.</p>
32
<p>Позволяет просматривать и редактировать элементы DOM-дерева страницы. Работает так: наводите курсор на строчку кода, а браузер подсвечивает вам элемент страницы, за который он отвечает. Это удобно: можно в лайв-режиме менять параметры объектов и сразу наблюдать за изменениями. В свою очередь, у Elements есть несколько дополнительных вкладок для работы со стилями, параметрами и событиями элемента.</p>
33
Интерфейс Chrome DevTools<em>Скриншот: Skillbox Media</em><p>Что-то вроде встроенной среды разработки, которая позволяет смотреть и редактировать файлы, из которых состоит веб-страница. Как в заправском редакторе кода, область просмотра в Sources можно делить на воркспейсы и работать с ними параллельно. А ещё здесь есть инструменты для отладки JavaScript с помощью брейк-пойнтов - специальных точек остановки в коде.</p>
33
Интерфейс Chrome DevTools<em>Скриншот: Skillbox Media</em><p>Что-то вроде встроенной среды разработки, которая позволяет смотреть и редактировать файлы, из которых состоит веб-страница. Как в заправском редакторе кода, область просмотра в Sources можно делить на воркспейсы и работать с ними параллельно. А ещё здесь есть инструменты для отладки JavaScript с помощью брейк-пойнтов - специальных точек остановки в коде.</p>
34
<p>Её величество консоль - превращает браузер в интерпретатор JS-кода, благодаря чему вы можете запустить на любой странице абсолютно любой скрипт. Но это, конечно, не единственное её назначение. А нужна она главным образом для диагностики - здесь вы сможете посмотреть ошибки, возникшие при открытии страницы, узнать их расположение в коде и выгрузить логи в отдельный файл.</p>
34
<p>Её величество консоль - превращает браузер в интерпретатор JS-кода, благодаря чему вы можете запустить на любой странице абсолютно любой скрипт. Но это, конечно, не единственное её назначение. А нужна она главным образом для диагностики - здесь вы сможете посмотреть ошибки, возникшие при открытии страницы, узнать их расположение в коде и выгрузить логи в отдельный файл.</p>
35
<p>Выводит в виде таблицы все запросы, которыми обмениваются браузер и сервер. Запросы можно фильтровать по типу, статусу и другим параметрам. Основной смысл в том, чтобы изучить, сколько времени уходит на загрузку каждого ресурса, выявить самые прожорливые процессы и оптимизировать их.</p>
35
<p>Выводит в виде таблицы все запросы, которыми обмениваются браузер и сервер. Запросы можно фильтровать по типу, статусу и другим параметрам. Основной смысл в том, чтобы изучить, сколько времени уходит на загрузку каждого ресурса, выявить самые прожорливые процессы и оптимизировать их.</p>
36
<p>На этой вкладке можно выяснить, насколько безопасна страница и какие протоколы шифрования она использует. А для тех, кто хочет углубиться в нюансы, есть возможность изучить сертификат.</p>
36
<p>На этой вкладке можно выяснить, насколько безопасна страница и какие протоколы шифрования она использует. А для тех, кто хочет углубиться в нюансы, есть возможность изучить сертификат.</p>
37
<p>Позволяет анализировать производительность страницы во время её работы. Работает просто: открываете вкладку, нажимаете кнопку записи, и спустя некоторое время браузер выводит вам все данные о работе страницы: использование памяти, выполнение скриптов, время отклика, сетевые запросы и так далее. Частый кейс: посмотреть, не слишком ли много оперативки и ресурсов клиентской машины подъедает страница.</p>
37
<p>Позволяет анализировать производительность страницы во время её работы. Работает просто: открываете вкладку, нажимаете кнопку записи, и спустя некоторое время браузер выводит вам все данные о работе страницы: использование памяти, выполнение скриптов, время отклика, сетевые запросы и так далее. Частый кейс: посмотреть, не слишком ли много оперативки и ресурсов клиентской машины подъедает страница.</p>
38
<p>Ещё один хороший инструмент для контроля нагрузки кода на систему. По умолчанию показывает, сколько памяти потребляет страница, но можно запросить детальный отчёт по каждому элементу. Интересно, что в этот отчёт попадают не только элементы сайта, но и хромовские расширения - то есть можно воочию увидеть, сколько потребляют разные прокси, скриншоторезы и прочие адблоки.</p>
38
<p>Ещё один хороший инструмент для контроля нагрузки кода на систему. По умолчанию показывает, сколько памяти потребляет страница, но можно запросить детальный отчёт по каждому элементу. Интересно, что в этот отчёт попадают не только элементы сайта, но и хромовские расширения - то есть можно воочию увидеть, сколько потребляют разные прокси, скриншоторезы и прочие адблоки.</p>
39
<p>А если не хотите копаться в этих дебрях сами, можно попросить Chrome составить для вас подробный отчёт. Браузер проанализирует ваш сайт по четырём основным параметрам: производительность, доступность, SEO и лучшие практики, а потом ещё раздаст советы, что поправить, чтобы эти показатели улучшить.</p>
39
<p>А если не хотите копаться в этих дебрях сами, можно попросить Chrome составить для вас подробный отчёт. Браузер проанализирует ваш сайт по четырём основным параметрам: производительность, доступность, SEO и лучшие практики, а потом ещё раздаст советы, что поправить, чтобы эти показатели улучшить.</p>
40
<p>А теперь давайте разберём несколько кейсов, в которых эти инструменты могут быть полезны. Они могут показаться довольно детскими и забавными, но для первого знакомства с DevTools вполне подойдут :)</p>
40
<p>А теперь давайте разберём несколько кейсов, в которых эти инструменты могут быть полезны. Они могут показаться довольно детскими и забавными, но для первого знакомства с DevTools вполне подойдут :)</p>
41
<p><strong>Ситуация</strong>: вы сделали свой сайт, а он работает как-то несуразно - картинки не грузятся, кнопки не нажимаются, слайдеры уехали в подвал, а вместо красивых шрифтов стандартный Times New Roman. Как быть?</p>
41
<p><strong>Ситуация</strong>: вы сделали свой сайт, а он работает как-то несуразно - картинки не грузятся, кнопки не нажимаются, слайдеры уехали в подвал, а вместо красивых шрифтов стандартный Times New Roman. Как быть?</p>
42
<p>Можно перелопатить весь код проекта и найти ошибки вручную. Но если сайт большой и сложный, на это уйдёт много часов.</p>
42
<p>Можно перелопатить весь код проекта и найти ошибки вручную. Но если сайт большой и сложный, на это уйдёт много часов.</p>
43
<p><strong>Решение</strong>: переходим в панель<strong>Console</strong>браузера. Там смотрим, в какую строке кода закралась ошибка, что она означает, и исправляем баг на лету. Вот как выглядят консольные сообщения об ошибках:</p>
43
<p><strong>Решение</strong>: переходим в панель<strong>Console</strong>браузера. Там смотрим, в какую строке кода закралась ошибка, что она означает, и исправляем баг на лету. Вот как выглядят консольные сообщения об ошибках:</p>
44
<em>Скриншот: Skillbox Media</em><p>На нашем сайте Chrome обнаружил две проблемы: потерялись фотографии и CSS. Так бывает, когда какая-то строка в коде ссылается на несуществующий файл. Например, если мы вместо реально существующей картинки photo.png случайно вызываем foto.png.</p>
44
<em>Скриншот: Skillbox Media</em><p>На нашем сайте Chrome обнаружил две проблемы: потерялись фотографии и CSS. Так бывает, когда какая-то строка в коде ссылается на несуществующий файл. Например, если мы вместо реально существующей картинки photo.png случайно вызываем foto.png.</p>
45
<p>Делаем всё как надо и получаем идеально работающий лендинг для продажи путёвок в Доминикану:</p>
45
<p>Делаем всё как надо и получаем идеально работающий лендинг для продажи путёвок в Доминикану:</p>
46
<em>Скриншот: Skillbox Media</em><p>Вся внешняя сторона интернета пишется на трёх языках:<a>HTML</a>,<a>CSS</a>и <a>JavaScript</a>. Если знать их на базовом уровне, можно переделать любой сайт как вам нравится: перекрасить фон, поменять шрифты, добавить обводку картинкам. Вот как это сделать с помощью панели DevTools:</p>
46
<em>Скриншот: Skillbox Media</em><p>Вся внешняя сторона интернета пишется на трёх языках:<a>HTML</a>,<a>CSS</a>и <a>JavaScript</a>. Если знать их на базовом уровне, можно переделать любой сайт как вам нравится: перекрасить фон, поменять шрифты, добавить обводку картинкам. Вот как это сделать с помощью панели DevTools:</p>
47
<ul><li>Наводим курсор на элемент, который хотим изменить.</li>
47
<ul><li>Наводим курсор на элемент, который хотим изменить.</li>
48
<li>Кликаем правой кнопкой и выбираем "Посмотреть код" - откроется вкладка<strong>Elements</strong>.</li>
48
<li>Кликаем правой кнопкой и выбираем "Посмотреть код" - откроется вкладка<strong>Elements</strong>.</li>
49
<li>Браузер подсвечивает элемент и показывает, какой код за него отвечает.</li>
49
<li>Браузер подсвечивает элемент и показывает, какой код за него отвечает.</li>
50
<li>А дальше дело за нами - где-то цвета докрутить, где-то обводку поменять. В общем, всё, что придумаете.</li>
50
<li>А дальше дело за нами - где-то цвета докрутить, где-то обводку поменять. В общем, всё, что придумаете.</li>
51
</ul><p>Например, мы решили поменять цветовую гамму нашего лендинга про Доминикану с холодной на тёплую - лето же всё-таки:</p>
51
</ul><p>Например, мы решили поменять цветовую гамму нашего лендинга про Доминикану с холодной на тёплую - лето же всё-таки:</p>
52
<em>Изображение: Skillbox Media</em><p>Если активировать "режим дизайна", можно редактировать сайты в Chrome без кода - как обычный текст. Вот зачем это может пригодиться:</p>
52
<em>Изображение: Skillbox Media</em><p>Если активировать "режим дизайна", можно редактировать сайты в Chrome без кода - как обычный текст. Вот зачем это может пригодиться:</p>
53
<ul><li>Для работы - например, чтобы проверить, не "расползётся" ли макет, если загрузить туда новый контент. Это важная задача для веб-дизайнера.</li>
53
<ul><li>Для работы - например, чтобы проверить, не "расползётся" ли макет, если загрузить туда новый контент. Это важная задача для веб-дизайнера.</li>
54
<li>Для развлечения - например, чтобы разыграть друзей или исправить оценки в электронном дневнике.</li>
54
<li>Для развлечения - например, чтобы разыграть друзей или исправить оценки в электронном дневнике.</li>
55
</ul><p>Чтобы перейти в дизайн-мод, откройте панель<strong>Console</strong>в инструментах разработчика и запустите вот такую команду:</p>
55
</ul><p>Чтобы перейти в дизайн-мод, откройте панель<strong>Console</strong>в инструментах разработчика и запустите вот такую команду:</p>
56
document.designMode = 'on'<p>Теперь можно закрывать консоль и делать всё, что душа просит. Например, мы решили заменить текст в разделе "О проекте" в Skillbox Media на программистские цитаты. Почему нет?</p>
56
document.designMode = 'on'<p>Теперь можно закрывать консоль и делать всё, что душа просит. Например, мы решили заменить текст в разделе "О проекте" в Skillbox Media на программистские цитаты. Почему нет?</p>
57
<em>Источник: Skillbox Media</em><p>Единственный момент - все изменения видны только вам и сбросятся сразу после перезагрузки страницы. Так что прокачать сайт навсегда не получится. А жаль.</p>
57
<em>Источник: Skillbox Media</em><p>Единственный момент - все изменения видны только вам и сбросятся сразу после перезагрузки страницы. Так что прокачать сайт навсегда не получится. А жаль.</p>
58
<p>Важная часть работы фронтендера - сделать так, чтобы сайт было удобно читать на мобильных устройствах. Для этого в панели DevTools есть режим смартфона - он имитирует работу разных девайсов и помогает адаптировать контент под небольшие экраны.</p>
58
<p>Важная часть работы фронтендера - сделать так, чтобы сайт было удобно читать на мобильных устройствах. Для этого в панели DevTools есть режим смартфона - он имитирует работу разных девайсов и помогает адаптировать контент под небольшие экраны.</p>
59
<p>Вот что можно настраивать с его помощью:</p>
59
<p>Вот что можно настраивать с его помощью:</p>
60
<ul><li>Визуальную часть - проследить, чтобы сайт правильно отображался на смартфоне: текст не уезжал за границы, элементы нормально группировались, а кнопки не заслоняли контент.</li>
60
<ul><li>Визуальную часть - проследить, чтобы сайт правильно отображался на смартфоне: текст не уезжал за границы, элементы нормально группировались, а кнопки не заслоняли контент.</li>
61
<li>Железо - посмотреть, как сайт работает с аппаратной частью смартфона: процессором, связью, GPS или сканером отпечатков.</li>
61
<li>Железо - посмотреть, как сайт работает с аппаратной частью смартфона: процессором, связью, GPS или сканером отпечатков.</li>
62
</ul><p>Допустим, нам надо посмотреть, как выглядит сайт на iPhone 12 Pro. Чтобы это сделать, открываем инструменты разработчика и нажимаем на кнопку слева от вкладки<strong>Elements</strong>. Выглядит она так:</p>
62
</ul><p>Допустим, нам надо посмотреть, как выглядит сайт на iPhone 12 Pro. Чтобы это сделать, открываем инструменты разработчика и нажимаем на кнопку слева от вкладки<strong>Elements</strong>. Выглядит она так:</p>
63
<em>Скриншот: Skillbox Media</em><p>Откроется окно просмотра, которое можно растягивать и подстраивать под экран любого устройства:</p>
63
<em>Скриншот: Skillbox Media</em><p>Откроется окно просмотра, которое можно растягивать и подстраивать под экран любого устройства:</p>
64
<em>Скриншот: Skillbox Media</em><p>Чтобы сайты быстро открывались и не тормозили, их нужно периодически оптимизировать - работать с памятью, сетевыми запросами и нагрузкой на железо. Вот три вкладки в панели DevTools, которые могут с этим помочь:</p>
64
<em>Скриншот: Skillbox Media</em><p>Чтобы сайты быстро открывались и не тормозили, их нужно периодически оптимизировать - работать с памятью, сетевыми запросами и нагрузкой на железо. Вот три вкладки в панели DevTools, которые могут с этим помочь:</p>
65
<ul><li><strong>"Сеть"</strong> - посмотреть, сколько времени занимает загрузка сайта.</li>
65
<ul><li><strong>"Сеть"</strong> - посмотреть, сколько времени занимает загрузка сайта.</li>
66
<li><strong>"Производительность"</strong> - узнать, как сайт ведёт себя после загрузки и как влияет на процессор пользователя.</li>
66
<li><strong>"Производительность"</strong> - узнать, как сайт ведёт себя после загрузки и как влияет на процессор пользователя.</li>
67
<li><strong>"Память"</strong> - понять, какие части кода подъедают оперативку и как с этим бороться.</li>
67
<li><strong>"Память"</strong> - понять, какие части кода подъедают оперативку и как с этим бороться.</li>
68
</ul><p>Если не хотите с этим возиться, можно запросить автоматический отчёт о состоянии сайта во вкладке Lighthouse. Браузер сам расскажет, какие у сайта есть проблемы по части железа и как их решить. А ещё даст советы по вёрстке, контенту и поисковой оптимизации.</p>
68
</ul><p>Если не хотите с этим возиться, можно запросить автоматический отчёт о состоянии сайта во вкладке Lighthouse. Браузер сам расскажет, какие у сайта есть проблемы по части железа и как их решить. А ещё даст советы по вёрстке, контенту и поисковой оптимизации.</p>
69
<em>Скриншот: Skillbox Media</em><p>Писать код можно не только в специальных программах - обычный браузер тоже подходит. Для этого там есть интерпретатор, который умеет исполнять команды на JavaScript. Таким способом можно запускать любой код на любом сайте, даже если у вас нет к нему доступа.</p>
69
<em>Скриншот: Skillbox Media</em><p>Писать код можно не только в специальных программах - обычный браузер тоже подходит. Для этого там есть интерпретатор, который умеет исполнять команды на JavaScript. Таким способом можно запускать любой код на любом сайте, даже если у вас нет к нему доступа.</p>
70
<p>Вот как это сделать:</p>
70
<p>Вот как это сделать:</p>
71
<ul><li>Берём код на JavaScript.</li>
71
<ul><li>Берём код на JavaScript.</li>
72
<li>Вставляем в консоль браузера.</li>
72
<li>Вставляем в консоль браузера.</li>
73
<li>Браузер проверяет его на ошибки, а потом выполняет построчно.</li>
73
<li>Браузер проверяет его на ошибки, а потом выполняет построчно.</li>
74
<li>Происходит магия.</li>
74
<li>Происходит магия.</li>
75
</ul><p>В <a>статье про JavaScript</a>мы рассказываем, как добавить на любой сайт воздушные шарики, даже если вы не администратор, а гость. Для этого нужно вставить в консоль вот такой код:</p>
75
</ul><p>В <a>статье про JavaScript</a>мы рассказываем, как добавить на любой сайт воздушные шарики, даже если вы не администратор, а гость. Для этого нужно вставить в консоль вот такой код:</p>
76
var script = document.createElement('script'); script.src = "https://safronovmax.github.io/LoveCursor/birthday.js"; document.body.appendChild(script);<p>Попробуйте и расскажите друзьям, что получилось :)</p>
76
var script = document.createElement('script'); script.src = "https://safronovmax.github.io/LoveCursor/birthday.js"; document.body.appendChild(script);<p>Попробуйте и расскажите друзьям, что получилось :)</p>
77
<p>Панель Chrome DevTools - это как дедушкин гараж на даче: инструментов так много, что за один день не разберёшь. Если хотите глубже в это погрузиться - посмотрите<a>официальную документацию</a>по DevTools от Google.</p>
77
<p>Панель Chrome DevTools - это как дедушкин гараж на даче: инструментов так много, что за один день не разберёшь. Если хотите глубже в это погрузиться - посмотрите<a>официальную документацию</a>по DevTools от Google.</p>
78
<p>Или читайте наши следующие статьи - мы будем больше рассказывать о полезных инструментах для разработчиков.</p>
78
<p>Или читайте наши следующие статьи - мы будем больше рассказывать о полезных инструментах для разработчиков.</p>
79
<a>Курс с трудоустройством: "Профессия Инженер по тестированию + ИИ" Узнать о курсе</a>
79
<a>Курс с трудоустройством: "Профессия Инженер по тестированию + ИИ" Узнать о курсе</a>