Мне было интересно узнать о некоторых возможностях инструментов инспектора Chrome, поэтому я погрузился в курс Front End Masters под названием Mastering Chrome Developer Tools. Вот несколько вещей, которые я нашел полезными для моего рабочего процесса.
Command + Option + J открывает инструменты разработчика в браузере Chrome.
вы также можете щелкнуть правой кнопкой мыши в браузере и выбрать «Проверить» во всплывающем окне.
Вкладка "Сеть"
Визуальное представление всех http-запросов при загрузке страницы
Вкладка Хронология
Пожалуй, самый мощный инструмент. Наряду с сетевыми запросами он показывает время выполнения функций ваших страниц, распределение памяти между объектами JS ваших страниц и связанными узлами DOM, а временная шкала распределения записей изолирует утечки памяти.
Вкладка "Консоль"
интерактивное отталкивание JS (цикл оценки чтения), который может взаимодействовать с элементами на странице. Здесь отображаются Console.log() и Console.err()
когда-нибудь видели ==$0 в ваших элементах?
Chrome отслеживает последние 5 элементов (от 0 до 4 долларов), которые вы нажали, и вы можете получить к ним доступ в консоли, введя ссылку на них. Это даст вам доступ к дереву для того элемента, который вы открываете и проверяете на большей панели.
Вкладка Аудит
высокоуровневое представление способов оптимизации производительности страницы можно считать «легко исправить».
Вкладка "Элементы"
На левой панели показана html-структура содержимого в окне браузера. Правая панель содержит более подробные сведения о выбранном элементе.
Забавные факты:
когда у вас выделен элемент, нажатие клавиши h скроет/покажет элемент в окне браузера
Щелкните правой кнопкой мыши элемент и выберите «Разрыв», это даст вам три варианта. Модификации поддерева, модификации атрибутов и удаление узла. Это покажет вам точки в вашем коде, где что-то меняется, то есть на панели ползунка изображения.
