Рубрики
Без рубрики

5 полезных инструментов веб-разработчика

Пять полезных инструментов разработчика в Firefox и Chrome. Узнайте о подобных функциях в обоих браузерах, так и как его освоить!

Автор оригинала: Errietta Kostala.

5 отличных инструментов разработчика

Это пять элементов разработчиков, которые я часто использую в Firefox и Chrome. Я подумал, что я бы блог о подобных функциях в обоих браузерах, а не сосредоточиться на одном браузере, и показать, как их использовать в обоих их.

Эмулирующие элементы состояния (наведите курсор, фокус и т. Д.)

Одна из моих любимых функций, которая делает вещи гораздо меньше боли, это способность обмануть браузер, думая, что вы паряте над элементом, пока не удалите флаг. Затем вы можете свободно проверять любой : Hover CSS-код и посмотрите, как он (не) работает.

В инструментах Chrome Dev, после проверки элемента, вы можете щелкнуть правой кнопкой мыши на элементе (убедитесь, что не сделайте это на корпусе/тексте, или оно не будет работать), и нажмите «Усилить элемент Element», то состояние вы Хотите (например, : Hover )

Формировать состояние зависания в Chrome

Теперь вы должны увидеть твой стилею для : Hover государственный!

Штат Hover вынужден

Вы можете сделать то же самое в Firefox, просто щелкнув правой кнопкой мыши элемент и щелкнув «Hover», он снова позволяет вам видеть эффекты ваших CSS и увидеть новое : Hover код применения.

Firefox форсирование штата

Эмуляция устройства

В Chrome вы можете переключить нижнюю панель, нажав ESC, когда ваши инструменты разработчика работают. Как только ваши инструменты DEV открыты, вы можете выбрать панель «эмуляцию». Это дает вам несколько вариантов: от размеров экрана, для пользовательских агентов, на все настройки устройства! Идеально подходит для тестирования отзывчивых веб-сайтов. Вы также можете эмулировать сенсорные события с помощью мыши там.

Эмуляция устройства Chrome

В Firefox есть небольшой значок на инспекторе элементов, который переключает режим отзывчивого дизайна

Эмуляция устройства Firefox

После нажатия вы можете снова увидеть ваш сайт в различных размерах.

Firefox отзывчивый взгляд

Существует раскрывающееся раскрытие, чтобы выбрать размер экрана, и вы можете снова включить эмуляцию сенсорных событий или сделать скриншот. Моя любимая функция там, хотя это способность вращать экран с помощью кнопки!

Сеть

Chrome имеет вкладку с сетью в своей консоли, которая позволяет вам видеть все ваши запросы и сколько времени потребовалось каждый запрос. Помимо того, чтобы быть способом увидеть, есть ли у вас медленные страницы, он также помогает диагностировать ошибки, такие как отсутствующие активы и см. AJAX запросы.

Chrome Networking Monitor.

Он также показывает подробности для определенного запроса при нажатии, что позволяет легко увидеть заголовки запроса и тело – очень полезно для отладки запросов после отладки.

Конкретная информация о запросе

Наконец, есть панель «аудита», которая предлагает несколько советов о том, как сделать вашу страницу быстрее, вроде как YLLOW и аналогичные расширения.

Аудит производительности

Firefox предлагает одинаковую функциональность в своей собственной сетевой панели:

Сетевая информация Firefox.
Firefox Один запрос Информация

И если вы нажмете маленькие часы в правом нижнем углу, вы можете увидеть поломку различных элементов страницы и сколько времени они берут.

Аудит производительности Firefox

Редактор стилей

Если вы открываете файл CSS в источниках, Chrome позволяет вносить изменения в нее на лету и посмотреть, если они применяются. Это, конечно, в дополнение к возможности видеть и редактировать какие-либо стили, которые относятся к элементу обратно на панель элементов!

Chrome CSS редактор

Firefox имеет панель редактора стилей, которая работает то же самое, но с добавлением способности добавлять новые таблицы стилей и импортировать таблицы стилей, что еще лучше.

Firefox CSS редактор

Редактор шейдера

Наконец, это функция Firefox, которую я узнал только о том, когда пишут этот пост! Если вы нажмете значок маленького гаечного ключа в левом верхнем углу инструментов DEV Firefox, вы можете включить редактор Shader. Если вы перейдете на страницу, которая использует WebGL потом (например, HelloRacer ), вы можете увидеть и редактировать код шейдера. Довольно аккуратно!

Редактор шейдера