Привет дорогой читатель, в интернете не мало статей по использованию dev tools. Но большинство из них непонятные и дают не практичные знания, которые непонятно как и зачем использовать.
Многие знают как посмотреть css, dom и консоль
Но мы поговорим о том, что нужно использовать, но многие не знают о том как и зачем используется.
Network
В network мы можем посмотреть все загружаемые элементы, а также запросы.
Первое, что мы можем сделать, это скачать музыку, видео доступные к прослушиванию полностью, но без возможности скачать. Исключением являются сайты уровня vk, которые могут позволить себе серьёзного уровня защиту.
Также, когда мы занимаемся разработкой и тестируем формы (или что-то подобное), то мы может повторять запросы (с повтором данных)
Также можно скопировать отправленный запрос, подкорректировать и повторить
Команды в консоле
В этой области можно увидеть длинный список команд, которые дают доступ ко множеству полезных функций.
Например "Расширенная функция скриншотов"
Снимки части экрана приходится делать довольно часто, и я не сомневаюсь, что для этого на вашем компьютере установлены удобные программы. А могут ли они:
- сделать скриншот всей страницы целиком, в том числе контента, который находится за пределами области просмотра?
- захватить содержимое отдельного элемента DOM?
Такая необходимость возникает нередко, но большинство системных инструментов для создания снимков экрана не справляются с этими задачами. К счастью, для создания таких скриншотов у нас есть специальные команды Chrome Screenshot Capture full size screenshot (сделать снимок страницы целиком) и Screenshot Capture node screenshot (сделать снимок отдельного узла)
Результат последней операции в консоли
Сильно расписывать не буду т.к это не имеет смысла, смотрите ниже пример на картинке.
Также можно обратиться к предыдущим результатам по индексу $0-$4
Отслеживание статуса загрузки страницы
На полную загрузку страницы может уйти более десяти секунд. В таких случаях нужно контролировать процесс загрузки страницы в каждый отдельный момент времени.
В Chrome DevTools можно делать скриншоты страницы в ходе ее загрузки, поставив галочку напротив Capture Screenshots на вкладке Network.
Выберите скриншот, чтобы посмотреть информацию о соответствующих сетевых запросах. Такая визуализация даст вам лучшее представление о сетевых запросах, которые отправляются на сервер в отдельные моменты времени.
#dev tools #javascript #es6 #google chrome