2. • Инструменты разработчика — отдельные
программы или встроенные решения для
выполнения тех или иных задач, связанных
с созданием ПО или сайтов.
3. • Chrome DevTools позволяет не только
узнавать и менять практически любые
элементы веб-страниц "на лету", но также
имеет JavaScript-консоль, эмулятор экранов
различных устройств и целый ряд
диагностических инструментов для аудита и
оптимизации загрузки сайтов.
4. Вызов инструментов разработчика
и представления страницы
• Из основного меню. Кликаем по кнопке меню (три
точки в правом верхнем углу окна браузера), наводим
курсор на выпадающий список "Дополнительные
инструменты" и в нём нажимаем пункт "Инструменты
разработчика".
• Горячими клавишами. Для вызова можно нажать
кнопку F12 или комбинацию CTRL+SHIFT+I.
• Из контекстного меню (наиболее удобно для
инспекции конкретных элементов страницы).
Нажимаем правой кнопкой мыши по нужному объекту
на веб-страничке и выбираем пункт "Просмотреть
код" (или "Исследовать элемент" в некоторых более
ранних версиях Хрома).
5.
6. Вкладка Elements
• Позволяет просматривать и быстро менять
HTML и CSS-код различных элементов веб-
страницы. Чтобы выбрать элемент,
достаточно активировать первую кнопку в
левой части панели ("Select an element in
the page to inspect it") и курсором мышки
ткнуть в нужный фрагмент страницы.
7. Вкладка Elements
• Computed – отображает модель выбранного блока и вычисленные
для него автоматически стили, которые явно не заданы или были
унаследованы от родительских блоков;
• Event Listeners – выводит список функций, "слушающих"
определённые события для всей страницы или конкретно выбранного
блока (нужно снять галочку ;
• DOM Breakpoints – содержит так называемые "точки остановки" DOM
(сокр. англ. "Document Object Model" – "объектная модель
документа"), которые можно создавать из контекстного меню HTML-
кода (группа "Break on") при его модификации для быстрой
отмены/применения внесённых правок;
• Properties – позволяет просмотреть полный список JavaScript-свойств
для выбранного блока на страничке;
• Accessibility – показывает иерархический уровень вложенности для
выбранного блока без учёта типов блоков, их классов,
идентификаторов или иных характеристик.
8. Консоль
Консоль может выполнять сразу две функции: мониторинг
событий на странице с отображением предупреждений
и ошибок, а также исполнение JavaScript-команд,
введённых пользователем. Явно выполняется первая
функция.
В выводе консоли все события группируются на три
категории с разным цветом фона:
• Белый – "отстуки" об успешно выполненных событиях.
• Жёлтый – предупреждения о возможных
некритических ошибках и сбоях.
• Красный – ошибки в выполнении скриптов или в
доступе к определённым запрашиваемым ресурсам.
9. • Ошибки и предупреждения содержат в себе
краткое описание проблемы и ссылку на
файл и строку в нём, которая эту проблему
вызывает. Зная точный адрес
возникновения неполадки (при условии,
что она возникает в файле на Вашем
сервере), Вы можете быстро локализовать
и устранить ошибку.
10. Вкладка Sources
• Эта панель позволяет просмотреть все
ресурсы, которые подгружаются вместе со
страницей. Картинки, скрипты, таблицы
стилей – всё это можно выделить и
просмотреть в рабочей области (а скрипты
можно ещё и править)
11.
12. • Помимо просмотра ресурсов и правки
JavaScript (кстати, при этом можно
использовать инструменты из правой
панели), вкладка "Sources" позволяет
скачивать любые файлы на компьютер.
13. Вкладка "Network"
• Вкладка "Network" позволяет просмотреть
статистику загрузки всех элементов
инспектируемой веб-страницы, а также
наблюдать за запросами, отправляемыми
ею во время работы.
14. • Полученные результаты можно изучить,
используя фильтрацию событий по типы
передаваемых данных, по их размеру,
времени загрузки и т.п. Кроме того, можно
эмулировать загрузку страницы с
искусственным ограничением скорости,
соответствующим тем или иным
мобильным сетям (выпадающий список
"Online").
15. Вкладка "Performance“/Timeline
• Позволяет оценить, какую нагрузку создаёт
веб-ресурс на компьютер пользователя.
Чтобы получить достаточное для анализа
количество данных, достаточно записывать
работу страницы в течении минуты, после
чего останавливаем и смотрим результаты
16. • Графики имеют разноцветные метки,
позволяющие видеть, какие процессы
отнимают больше всего времени и
ресурсов компьютера на ротяжении всей
проверки.
• Все эти данные также можно использовать
для оптимизации веб-страниц.
17. Вкладка "Memory"
• По умолчанию на ней отображается
обобщённое текущее потребление памяти
открытой страницей.
• Если же Вам нужен детальный отчёт, можете
запустить процесс записи, аналогичный тому,
который был на предыдущих вкладках. В
результате Вы получите данные обо всех
процессах, потребляющих оперативную
память компьютера
18. Вкладкa "Application"
• Если Вам нужно узнать, что хранит веб-
страница в сессиях, cookie-файлах или иных
локальных хранилищах, Вам на вкладку
"Application".
• Здесь всё максимально просто – в левой
панели выбираем интересующее нас
хранилище данных, а в основной области
смотрим его содержимое.
• И, что характерно, здесь же мы можем сразу
это содержимое править и даже полностью
удалять (кнопки "Clear all" и "Delete selected")
19. Вкладка "Security"
• Сейчас стало практически необходимо
использовать на сайтах защищённый HTTPS-
протокол.
• Чтобы оценить эффективность его работы и
потенциальные бреши в безопасности веб-страниц,
можно воспользоваться вкладкой "Security".
• Здесь после перезагрузки страницы мы увидим
отчёт о безопасных и опасных ресурсах и,
соответственно, сможем принять дальнейшие меры
для устранения выявленных недостатков
20. Вкладка "Audits"
• Наконец, в довершение ко всему, Google
Chrome может дать нам практические
советы по улучшению работы сайта. Для
этого нужно перейти на вкладку "Audits",
запустить тестирование и дождаться его
завершения. По результатам аудита будут
сформированы графики и конкретные
рекомендации по дальнейшей
оптимизации страниц
21.
22. Практики в console
• Выбор элементов DOM
$(‘tagName’), $(‘.class’), $(‘#id’), $(‘.class#id’)
возвращают первый элемент DOM
$$(‘.className’) предоставит нам массив
всех элементов страницы с указанным при
её вызове именем класса
• Превращаем браузер в текстовый
редактор
document.body.contentEditable=true
23. • Поиск обработчиков событий, привязанных к
элементу
getEventListeners($(‘selector’))
• Мониторинг событий
– Команда monitorEvents($(‘selector’)) - мониторинг всех
событий, связанных с элементом, которому
соответствует селектор.
– Команда monitorEvents($(‘selector’),’
eventName’) похожа на предыдущую, но она нацелена
на конкретное событие.
– Команда monitorEvents($(‘selector’),[‘eventName1’,
’eventName3',….]) позволяет наблюдать за
несколькими выбранными событиями
24. • Измерение времени выполнения фрагмента кода
console.time('myTime');
//Запускает таймер с меткой myTime
console.timeEnd('myTime');
//Останавливает таймер с меткой myTime
//Вывод: myTime:123.00 ms
26. • Просмотр кода элемента
Команда inspect($(‘selector’)) позволяет открыть
код элемента, соответствующего селектору, в
панели Elements инструментов разработчика
Google Chrome.
• Вывод списка свойств элемента
dir($(‘selector’))
27. • Вызов последнего полученного результата
2+3+4 9
//- Результат суммирования - 9
$_ 9
// Выводится последний полученный результат
$_ * $_ 81
// Так как последний результат 9, получаем 81
Math.sqrt($_) 9
// Квадратный корень из последнего результата, который
был равен 81
$_ 9
// Снова получаем 9 – результат предыдущего вычисления
• Очистка консоли и памяти
clear()
