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

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

Если вы – тот, кто никогда не использовал или не очень хорошо знаком с инструментами разработчика, даже теми, которые есть в стандартной версии, проверьте этот классный “DevTools Challenger“Сначала Mozilla. Здесь вы можете попрактиковаться с некоторыми из инструментов, упомянутых ниже, в браузере Firefox для разработчиков. Примеры очень забавные и простые в исполнении, инструкции простые, а если не получается, просто следуйте видео-уроку ,
1. Инспектор анимации
CSS-анимации становятся все более распространенными, а инструменты CSS-анимации, предоставляемые разработчиком Firefox, позволяют легко отслеживать и проверять каждый шаг созданной анимации. Вы можете приостановить, воспроизвести и повернуть любую анимацию; Вы также можете просматривать происходящее кадр за кадром с помощью очистки.

Чтобы получить доступ к инструменту, откройте инструмент «Инспектор», щелкнув правой кнопкой мыши на элементе анимации и выбрав «проверить элемент», затем в правой части окна инструмента dev нажмите «Анимации».
2. Редактор анимации
Время анимации редактируется в инструменте dev: вы просто щелкаете значок рядом с функцией в разделе «Правила» инструмента «Инспектор», и открывается всплывающее окно с кривыми функций. Вы можете перетащить и изменить это, чтобы настроить время анимации. После внесения изменений в кривые скорость анимации изменится соответствующим образом.
Если вы еще не знакомы с функцией кубической анимации Безье, я рекомендую этот пост, чтобы узнать больше об этом.
3. Палитра цветов для свойств CSS
В стандартной версии Firefox уже есть палитра цветов (подробнее об этом в этом посте), который выбирает цвет со страницы и копирует его в буфер обмена. Выбор цвета, о котором я сейчас говорю, специфичен для CSS-значений свойств.

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

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

Чтобы удалить фильтр, щелкните значок «×» справа от имени фильтра. Чтобы добавить фильтр, нажмите на поле фильтра внизу и выберите тот, который вы хотите добавить, и нажмите & plus; подписать. Вы также можете переставить фильтры в любом порядке, перетаскивая каждый элемент.
6. Инструмент памяти
С помощью этого инструмента вы можете узнать, что занимает память на вашей веб-странице. Это поможет вам снизить нагрузку на память и, следовательно, повысить скорость вашей страницы.

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

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