Взгляд в основные инструменты Firefox для веб-разработчиков

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

Прежде всего, нам нужно установить Firebug.

поджигатель

Firebug является обязательным для установки дополнением для веб-разработки. Предполагая, что вы не знаете, где взять Firebug, вы можете установить его здесь. Возможно, вам нужно перезапустить Firefox, прежде чем он будет активирован.

После этого вы можете просмотреть Firebug одним из следующих способов: следуйте этому меню Инструменты> Веб-разработчики> Firebug, щелкните правой кнопкой мыши на веб-странице и выберите “Осмотреть элемент с помощью Firebug”.

Кроме того, вы можете найти значок Firebug в Firefox и щелкнуть по нему, это покажет окно Firebug;

Firebug совершенно идентичен Инструменты разработчика Chrome. у него есть панель для просмотра структуры и стилей HTML, а также панель консоли для просмотра ошибок, предупреждений и журналов. Но у меня есть еще несколько советов, которые, возможно, вы найдете полезными.

Регулировка размера коробки

HTML-элемент состоит из блочной модели CSS, которая состоит из полей, отступов и размеров объекта (ширина / высота). Иногда нам может понадобиться изменить эти свойства. В этом случае вы можете выбрать один из элементов, который вы хотите изменить, а затем перейти к раскладка панель.

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

Вычисленные стили

Во многих ситуациях вы, вероятно, задаетесь вопросом, почему некоторые стили не применяются. Один из более простых и быстрых способов, особенно если у вас есть тысячи линий стилей, заключается в проверке Компьютерный стиль панель. Этот пример показывает, что цвет текста тега привязки перезаписывается .кнопка класс, в то время как фон .кнопка класс перезаписывается .button.add.

Проверка семейства шрифтов (простой способ)

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

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

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

Это может быть банальность, но Site Speed ​​теперь является одним из параметров (алгоритма) Google при определении качества сайта; веб-сайт, который загружается быстрее, считается хорошо развитым и имеет более высокий рейтинг по содержанию. Так что скорость не должна быть упущена.

Чистая панель

Первое место, которое вам, возможно, придется посетить, чтобы проверить эффективность вашего сайта, это Сеть панель. Эта панель будет записывать HTTP-запрос вашего сайта при его загрузке. На снимке экрана ниже показана веб-страница, которая загружается 42 запроса и занимает 4,36 секунды загрузить.

Затем вы можете отсортировать HTTP-запрос по их типу, как HTML, CSS и изображения.

YSlow!

Кроме того, вы также можете установить YSlow, расширение для Firebug от Yahoo !. После того, как он активирован, вы найдете дополнительную панель, которая называется Yslow.!.

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

Скорость страницы

Кроме того, вы также можете установить Page Speed ​​от Google. Похожий на YSlow!, Он тестирует скорость работы сайта, хотя результаты теста могут немного отличаться. Этот пример показывает, что та же самая веб-страница набрал 82 в соответствии с Page Speed.

Инструменты для веб-разработчиков

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

Инспекция изображений

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

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

И этот пример показывает, как мы показываем размер изображения и размер файла изображения одновременно:

Firefox Встроенные инструменты

В последних версиях Firefox значительно улучшил свои встроенные функции для веб-разработчиков, некоторые из них:

Родной Элемент Проверки

Этот родной Осмотреть элемент от Firefox может выглядеть похожим на “Осмотреть элемент в Firebug”, но это на самом деле действует по-разному.

На этот раз я не буду вдаваться в подробности этой функции, поскольку она по сути идентична панели Firebug HTML и CSS, хотя и с разницей в макете и дизайне. Но есть одна отличительная черта, которую стоит попробовать, 3D вид.

С помощью 3D вид Вы можете просмотреть структуру веб-страницы подробно. Чтобы активировать этот вид, вы можете найти кнопку в правом нижнем углу “Firefox Native Inspect Element”. Вот как 3D вид похоже.

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

Веб дизайн

С ростом популярности адаптивного веб-дизайна Firefox запустил адаптивный букмарклет для браузера. Этот инструмент позволит нам протестировать наш адаптивный веб-сайт в разных окнах просмотра без изменения размера окна браузера..

Это представление доступно из этого меню: Сервис> Веб-разработчик> Веб-дизайн. И вот так выглядит вид.

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

Наконец, если вы часто работаете с CSS, вы, вероятно, влюбитесь в эту функцию. Начиная с версии 11, Firefox добавил Редактор стилей в его родных инструментах разработчика.

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

Редактор стилей доступен из следующего меню: Сервис> Веб-разработчик> Редактор стилей.

Последняя мысль

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

Какие функции вы часто используете? Вы можете поделиться своими мыслями в поле для комментариев ниже.