Firefox Developer Edition 6 самых крутых инструментов, чтобы попробовать

Firefox Developer Edition - единственный браузер на сегодняшний день, созданный специально для разработчиков. Инструменты разработчика в стандартной редакции появляются первыми в редакции разработчика, а в редакции для разработчиков есть инструменты, которых нет и не будет доступно в стандартной редакции. Сегодня мы рассмотрим некоторые инструменты, которые на данный момент можно найти только в редакции разработчика.

Если вы тот, кто никогда не пользовался или не очень хорошо знаком с инструментами разработчика, даже со стандартными версиями, сначала посмотрите этот крутой «DevTools Challenger» от Mozilla. Здесь вы можете попрактиковаться с некоторыми из инструментов, упомянутых ниже в браузере Firefox для разработчиков. Примеры интересны и просты в исполнении, инструкции просты, и если вы не можете их догнать, просто следуйте видео-уроку.

1. Инспектор анимации

CSS-анимация становится все более распространенной, а инструменты CSS-анимации, предоставляемые разработчиком Firefox, позволяют легко отслеживать и проверять каждый шаг созданной анимации. Вы можете приостановить, воспроизвести и повернуть любую анимацию; Вы также можете просмотреть это происходящее кадр за кадром с помощью очистки.

Чтобы получить доступ к инструменту, откройте Инспектор инструмент, щелкнув правой кнопкой мыши на элементе анимации и выбрав «проверить элемент», затем в правой части окна инструмента dev нажмите «Анимации».

2. Редактор анимации

Время анимации можно редактировать в инструменте разработчика, просто щелкните значок рядом с функцией в правила раздел Инспектор инструмент и всплывающее окно, показывающее кривые функции. Вы можете перетащить и изменить это, чтобы настроить время анимации. После внесения изменений в кривые скорость анимации изменится соответственно.

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

3. Палитра цветов для свойств CSS

В стандартной версии Firefox уже есть палитра цветов (подробнее об этом в этом посте), который выбирает цвет со страницы и копирует его в буфер обмена. Выбор цвета, о котором я сейчас говорю, специфичные для CSS цветовые значения свойств.

Рядом с каждым значением цвета CSS в правила раздел Инспектор инструмент, есть значок, который откроет всплывающее цветовое колесо при нажатии. Вы можете выбрать, какой цвет вы хотите от колеса.

Если у вас уже есть нужный вам цвет, и он находится на странице, просто щелкните пипетку в нижней части всплывающего окна, чтобы открыть палитру цветов, затем перетащите палитру на нужный цвет и нажмите на него. , Значение цвета CSS будет изменено на значение выбранного цвета.

4. Измерительный инструмент

Этот инструмент позволяет видеть положение курсора по оси XY, а также измерение высоты, ширины и диагонали в пикселях выбранной части. Чтобы использовать инструмент, вы должны сначала включить его в разработчику Параметры панели инструментов, установив флажок «Измерить часть страницы» в разделе «Доступные кнопки панели инструментов».

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

5. CSS фильтр-редактор

Если вы применили фильтр CSS к элементу на странице, рядом с ним появится значок правила раздел Инспектор инструмент, который открывает редактор фильтров CSS при нажатии.

Чтобы удалить фильтр, щелкните значок «×» справа от имени фильтра. Чтобы добавить фильтр, щелкните поле фильтра внизу, выберите тот, который вы хотите добавить, и нажмите кнопку + знак. Вы также можете переставить фильтры в любом порядке, перетаскивая каждый элемент.

6. Инструмент памяти

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

Чтобы использовать инструмент, вы должны сначала включить его из Параметры панели инструментов установив флажок «Память» в разделе «Инструменты разработчика Firefox по умолчанию». После проверки вы увидите раздел «Память» в верхней части окна инструмента dev сразу после «Производительности». Выберите это.

Чтобы использовать инструмент, нажмите «Сделать снимок» или кнопку камеры. Вы увидите список элементов, таких как объекты и скрипты, которые занимают память .