Автор оригинала: Errietta Kostala.
5 отличных инструментов разработчика
Это пять элементов разработчиков, которые я часто использую в Firefox и Chrome. Я подумал, что я бы блог о подобных функциях в обоих браузерах, а не сосредоточиться на одном браузере, и показать, как их использовать в обоих их.
Эмулирующие элементы состояния (наведите курсор, фокус и т. Д.)
Одна из моих любимых функций, которая делает вещи гораздо меньше боли, это способность обмануть браузер, думая, что вы паряте над элементом, пока не удалите флаг. Затем вы можете свободно проверять любой : Hover
CSS-код и посмотрите, как он (не) работает.
В инструментах Chrome Dev, после проверки элемента, вы можете щелкнуть правой кнопкой мыши на элементе (убедитесь, что не сделайте это на корпусе/тексте, или оно не будет работать), и нажмите «Усилить элемент Element», то состояние вы Хотите (например, : Hover
)
Теперь вы должны увидеть твой стилею для : Hover
государственный!
Вы можете сделать то же самое в Firefox, просто щелкнув правой кнопкой мыши элемент и щелкнув «Hover», он снова позволяет вам видеть эффекты ваших CSS и увидеть новое : Hover
код применения.
Эмуляция устройства
В Chrome вы можете переключить нижнюю панель, нажав ESC, когда ваши инструменты разработчика работают. Как только ваши инструменты DEV открыты, вы можете выбрать панель «эмуляцию». Это дает вам несколько вариантов: от размеров экрана, для пользовательских агентов, на все настройки устройства! Идеально подходит для тестирования отзывчивых веб-сайтов. Вы также можете эмулировать сенсорные события с помощью мыши там.
В Firefox есть небольшой значок на инспекторе элементов, который переключает режим отзывчивого дизайна
После нажатия вы можете снова увидеть ваш сайт в различных размерах.
Существует раскрывающееся раскрытие, чтобы выбрать размер экрана, и вы можете снова включить эмуляцию сенсорных событий или сделать скриншот. Моя любимая функция там, хотя это способность вращать экран с помощью кнопки!
Сеть
Chrome имеет вкладку с сетью в своей консоли, которая позволяет вам видеть все ваши запросы и сколько времени потребовалось каждый запрос. Помимо того, чтобы быть способом увидеть, есть ли у вас медленные страницы, он также помогает диагностировать ошибки, такие как отсутствующие активы и см. AJAX запросы.
Он также показывает подробности для определенного запроса при нажатии, что позволяет легко увидеть заголовки запроса и тело – очень полезно для отладки запросов после отладки.
Наконец, есть панель «аудита», которая предлагает несколько советов о том, как сделать вашу страницу быстрее, вроде как YLLOW и аналогичные расширения.
Firefox предлагает одинаковую функциональность в своей собственной сетевой панели:
И если вы нажмете маленькие часы в правом нижнем углу, вы можете увидеть поломку различных элементов страницы и сколько времени они берут.
Редактор стилей
Если вы открываете файл CSS в источниках, Chrome позволяет вносить изменения в нее на лету и посмотреть, если они применяются. Это, конечно, в дополнение к возможности видеть и редактировать какие-либо стили, которые относятся к элементу обратно на панель элементов!
Firefox имеет панель редактора стилей, которая работает то же самое, но с добавлением способности добавлять новые таблицы стилей и импортировать таблицы стилей, что еще лучше.
Редактор шейдера
Наконец, это функция Firefox, которую я узнал только о том, когда пишут этот пост! Если вы нажмете значок маленького гаечного ключа в левом верхнем углу инструментов DEV Firefox, вы можете включить редактор Shader. Если вы перейдете на страницу, которая использует WebGL потом (например, HelloRacer ), вы можете увидеть и редактировать код шейдера. Довольно аккуратно!