Когда вы совершаете покупки по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Вот как это работает.
Поскольку пять браузеров регулярно выпускают более крупные и лучшие версии своих встроенных инструментов разработчика, перспективы веб-разработчиков никогда не были более радужными. Эти инструменты незаменимы для создания, отладки, анализа и оптимизации наших сайтов и веб-приложений.
В последние годы инструменты разработчика Chrome и Firefox развивались с головокружительной скоростью, обеспечивая превосходную среду отладки. Microsoft Edge также сделал большой шаг вперед, и инструменты Opera теперь полностью соответствуют Chrome.
Ниже приведены 20 советов, которые помогут вам получить еще больше от инструментов разработчика.
01. Развернуть все узлы
Панель «Элементы» отображает дерево объектной модели документа (DOM) текущей страницы и является первой панелью, которая появляется, когда мы нажимаем
F12 в Windows или Cmd+Alt+I на Маке. В Firefox эта панель называется «Инспектор», а в IE/Edge — «Проводник DOM».Когда вы щелкаете правой кнопкой мыши по странице и проверяете элемент, дерево DOM автоматически расширяется, чтобы отобразить этот элемент на панели. Мы также можем детализировать дерево DOM, используя треугольную стрелку слева от каждого элемента. В Chrome, Firefox, Opera и Safari, удерживая Alt, щелкните этот треугольник, чтобы открыть закрытое окно. элемент расширит каждый узел под ним, предоставляя вам быструю и полную видимость всех элементов. дети.
02. Переместить элементы
Вы можете перетаскивать элементы внутри дерева DOM, чтобы изменить их положение в документе. Просто щелкните и перетащите элемент в нужное положение, и появится линия, показывающая, где он будет размещен.
03. Увеличение значений CSS
Стили, примененные к элементам в DOM, отображаются на панели «Стили», расположенной справа от дерева DOM. В Firefox эта панель называется «Правила». Из него вы можете изменить значения любого свойства CSS, примененного в настоящее время к вашим элементам, а также добавить новые свойства и значения.
Мы можем настроить числовые значения свойств, такие как поля, отступы, границы, ширину, высоту, поворот и даже цвет, используя клавиши курсора. Клавиши «Вверх» или «Вниз» увеличивают или уменьшают значение на единицу. Проведение Сдвиг клавишу, одновременно нажимая Вверх или Вниз изменит единицу измерения на 10, удерживая кнопку Альтернативный вариант клавиша изменит единицу измерения на 0,1. В Chrome и Opera вы также можете использовать колесо мыши для регулировки значения.
04. Посмотреть блочную модель
Модель CSS Box описывает пространство, занимаемое каждым элементом, включая поля, отступы, границы, ширину и высоту. Эти значения используются механизмом рендеринга для расчета прямоугольного пространства, занимаемого элементом, и, в конечном итоге, макета нашей страницы.
Как современные веб-разработчики, мы часто упрощаем расчеты макета, настраивая блочную модель так, чтобы граница и отступы включались в значения ширины и высоты. Мы используем следующий CSS:
body * { box-sizing: border-box; }Выбрав элемент в нашем дереве DOM, мы можем просмотреть блочную модель CSS этого элемента на панели «Стили/Правила». В Chrome и Opera это находится на вкладке «Вычисляемые». В Firefox это находится на вкладке «Блочная модель»; в Safari вкладка называется «Метрики», а в IE/Edge — «Макет».
Наведя указатель мыши на диаграмму блочной модели в Chrome, Firefox или Opera, к соответствующему элементу и свойствам на странице будет применен цветной оттенок, чтобы вы могли визуализировать свой макет. Вы можете редактировать значения блочной модели, просто щелкнув и изменив их.
05. Псевдоклассы стилей
Мы можем принудительно отображать псевдоклассы CSS, например :наведите курсор и :фокус изнутри DevTools. Это позволяет нам стилизовать и отлаживать состояния этих элементов без необходимости взаимодействия с ними.
В верхней части панели «Стили/Правила» находится значок, который включает другие состояния. В зависимости от браузера значок представляет собой либо значок булавки, три маленьких прямоугольника, либо буквы «:hov» или «a:».
В Safari щелчок правой кнопкой мыши по элементу в дереве DOM на панели «Элементы» откроет строку меню, в которой есть опция «Принудительно использовать псевдоклассы».
В Chrome, Firefox и Opera всякий раз, когда мы включаем псевдосостояние, рядом с элементом появляется оранжевый индикатор. :до и :после псевдостили элемента можно найти под основным списком стилей в Chrome и Opera.
06. Влияние CSS
В Chrome и Opera длительное наведение курсора мыши на определенный селектор CSS на панели «Стили» выделит место его использования на странице. Выбрав элемент, мы можем включать и отключать отдельные классы CSS, чтобы увидеть, какой стиль они создают. Просто включите параметр «.cls» на панели «Стили», затем установите и снимите флажки для каждого имени класса.
07. Выберите цвета
Chrome, Opera, Firefox и Edge предлагают палитру цветов, позволяющую вам выбирать и определять цвета для вашей страницы. Чтобы получить доступ к палитре цветов, щелкните образец рядом с любым свойством цвета на панели «Стили».
В Chrome и Opera вы можете переключать значение цвета между шестнадцатеричным, RGBa и HSLa, используя значок стрелки рядом со значением. Вы также можете увидеть палитру, показывающую цвета, которые уже используются на вашей странице в Chrome. Opera и Edge, а также создание собственной палитры и палитры, содержащей Material Design. цвета.
Каждый из инструментов разработчика можно переместить в один из трех вариантов: закрепить внизу, закрепить справа или в отдельном окне. Опцию закрепления можно найти в правом верхнем углу DevTools (или в левом верхнем углу в Safari). Сочетание клавиш Cmd+Shift+D переключит две последние выбранные опции в Chrome, Firefox и Opera. В Эдже, Ctrl+П будет переключаться между стыковкой внизу и отдельным окном.
Мы можем увидеть, как наша веб-страница будет выглядеть на экранах разных размеров, используя режим адаптивного дизайна. В Chrome и Opera это переключается нажатием значка устройства слева от верхней панели; в то время как в Firefox значок представляет собой квадрат изменения размера.
Firefox предлагает ряд различных комбинаций ширины и высоты, а также возможность ввода дополнительных размеров в раскрывающемся поле. IE и Edge предлагают аналогичные возможности для изменения размера экрана на панели «Эмуляция».
Помимо списка устройств и возможности настройки самостоятельно, Chrome и Opera предлагают дополнительный медиа-запрос. Инспектор (находится в разделе «Дополнительные параметры» > «Показать медиа-запросы»), который позволяет быстро просматривать и переключаться между каждым из ваших контрольные точки. Эти браузеры также предлагают возможность регулировать скорость сети и регулировать время туда и обратно (RTT) для имитации более медленных сетей.
10. Включить эксперименты
В DevTools есть ряд дополнительных функций, которые еще не готовы к массовому выпуску, но может предоставить некоторые дополнительные функции отладки, если вы согласны с тем, что они могут не быть стабильный.
Включите их, набрав «chrome://flags» в адресной строке в Chrome (или «opera://flags» в Opera), а затем нажав «Включить» в разделе «Включить эксперименты с инструментами разработчика». Новые функции можно будет включать и отключать в меню «Настройки» на вкладке «Эксперименты».
Текущие эксперименты включают инспектор специальных возможностей и обещаний, а также редактор макета для изменения полей и отступов (доступен на панели «Стиль»). Вы можете найти еще больше экспериментальных функций в Chrome DevTools, шесть раз нажав клавишу Shift на вкладке «Эксперименты». К ним относятся эксперименты по отображению контрастной линии в палитре цветов; Регулирование ЦП и отображение графика данных графического процессора на панели «Таймлайн».
Firefox также позволяет пользователям включать экспериментальные функции индивидуально из меню настроек.
11. Отладка анимации
Отладка CSS-анимации иногда может быть затруднена, но Chrome, Firefox и Opera обратили внимание на то, чтобы упростить этот процесс. В каждом из них предусмотрены новые функции, позволяющие анализировать, как ваши анимации воспроизводятся и работают вместе.
Чтобы воспроизводить и воспроизводить анимацию с разной скоростью в Chrome и Opera, используйте панель «Анимации», доступную на панели задач консоли (нажмите Esc, чтобы открыть ее), или панель «Анимации» в Firefox.
Элементы управления позволяют отлаживать CSS-переходы, CSS-анимацию и API веб-анимации. На панели «Анимации» в Chrome/Opera также можно редактировать время и задержки анимации в реальном времени с помощью интерфейса перетаскивания для дальнейшей отладки.
12. Отладка замедления анимации
Рядом с каждым стилем перехода и анимации CSS, содержащим свойство плавности, вы можете найти образец. При нажатии на эту кнопку откроется меню отладки замедления с предопределенными параметрами замедления, а также инструмент графика, обеспечивающий более широкие возможности настройки и предварительный просмотр в реальном времени.
13. Мониторинг событий
Панель «Консоль» отлично подходит для регистрации отладочной информации о вашей веб-странице и ввода JavaScript для взаимодействия с документом. В Chrome, Opera и Safari его также можно использовать для мониторинга и регистрации событий.
Чтобы отслеживать конкретное событие, используйте:
monitorEvents(elem, 'eventType');Где элем это элемент, который вы хотите отслеживать и тип события это событие (например, мышь, щелкнуть, нажатие клавиши, трогать, изменить размер или прокрутка). Если элемент, который вы хотите отслеживать, в данный момент выбран на панели «Элементы», вы можете использовать $0 чтобы получить к нему доступ.
Чтобы прекратить мониторинг событий, используйте команду:
unmonitorEvents(elem);14. Перезапустите консольные команды
После запуска команды на панели консоли просто нажмите стрелку вверх, чтобы открыть историю предыдущих консольных команд. Чтобы запустить его повторно, нажмите Enter.
15. Изменить фокус кадра
Если ваша веб-страница содержит один или несколько iframe (как это часто бывает с такими инструментами, как CodePen, JS Bin и JSFiddle), отладка нужного фрейма из консоли может оказаться сложной задачей. Вы можете настроить фрейм из консоли DevTools, выбрав его из раскрывающегося списка, расположенного в верхней части окна консоли Chrome и Opera; или с помощью значка выбора рамки в правом верхнем углу строки меню Firefox. Safari предлагает ту же опцию справа от командной строки консоли.
16. Эмулировать геолокацию
Геолокацию можно эмулировать в Edge из меню «Эмуляция». В Chrome и Opera геолокацию и акселерометр можно эмулировать, выбрав «Дополнительные инструменты» > «Датчики» в меню справа. Геолокация позволяет вам заменить вашу позицию другим набором координат долготы и широты или эмулировать недоступную позицию.
17. Эмулировать ориентацию
Эмуляцию акселерометра можно найти на той же панели, что и геолокацию в Chrome и Opera. Это позволяет изменять значения альфа, бета и гаммы ориентации устройства:
Альфа представляет движение устройства вокруг оси Z от 0 до 360 градусов.
Бета представляет движение устройства вокруг оси X от -180 до 180 градусов, напоминающее движение вперед-назад.
Гамма представляет движение устройства вокруг оси Y от -90 до 90 градусов, напоминающее движение слева направо.
Изменение значений вызовет ориентация устройства событие, которое вы можете протестировать с помощью: MonitorEvents (окно, «ориентация устройства»); .
18. Проведите аудит производительности
Вам не нужно быть экспертом в области сетевого трафика и рендеринга страниц, чтобы найти полезные советы о том, как ускорить работу вашего сайта. Chrome и Opera предоставляют возможность аудита и дают советы о том, как улучшить производительность сети и страниц.
Чтобы запустить аудит, выберите панель «Аудит», выберите тесты, которые вы хотите выполнить, и нажмите «Выполнить». Сетевой аудит выявит узкие места в загрузке вашего сайта (например, большие размеры изображений); в то время как аудит производительности определит способы ускорения вашей страницы (например, удаление неиспользуемых правил CSS).
19. Фильтровать ресурсы
На панели «Сеть» в каждом браузере отображается список ресурсов, которые были запрошены во время просмотра страницы. загрузить вместе с кодом состояния размер файла и время, необходимое для выполнения запроса. возвращаться. Прилагаемый каскадный график визуализирует время, затраченное на загрузку каждого из этих ресурсов на страницу.
Хотя список ресурсов можно фильтровать по типу (например, CSS, изображения или XHR) в каждом браузере, Chrome и Opera также допускают расширенную фильтрацию в своих полях поиска со следующими префиксами:
домен: Чтобы фильтровать ресурсы из указанного домена
больше, чем: Для размера файла
смешанный контент: для фильтрации ресурсов, загружаемых через HTTP на защищенном сайте.
код состояния: для фильтрации по определенному коду состояния (например, «404 не найден»).
На панелях сети Chrome и Opera также доступен ряд дополнительных столбцов, которые могут предоставить дополнительную полезную информацию. К ним относятся Cache-Control и Initiator. Вы можете включать и выключать столбцы, щелкнув правой кнопкой мыши любой из заголовков.
20. Асинхронная отладка
Панель «Источники/Отладчик» позволяет добавлять точки останова и просматривать код, наблюдая за переменными и исследуя стек вызовов по ходу работы. Наблюдая за переменной, вы можете отслеживать ее значение во время выполнения вашей программы.
Чтобы добавить часы, просто введите имя переменной на панели справа. Часы будут обновлять свое значение по мере того, как вы выполняете свой код.
В Chrome и Opera вы также можете просмотреть полный стек вызовов асинхронных обратных вызовов и обещаний JavaScript, установив флажок Async в правом углу. Когда вы проходите через стек вызовов, значения наблюдения также обновляются до своего состояния в данный момент. Вы можете упростить отладку стека вызовов, назвав обратные вызовы, а не делая их анонимными функциями.
Подведение итогов
Инструменты разработчика браузера могут оказаться неоценимыми при разработке и отладке веб-проектов. Действительно стоит потратить время на эксперименты и изучение инструментов разработчика в выбранном вами браузере, чтобы узнать, как все это работает. Постоянно появляются новые функции для решения классических проблем (например, редактор макетов) и помощи в отладке. совершенно новые веб-функции (например, панель Sources Service Worker), никогда не было так важно оставаться в курсе дата.