Панель инструментов Web Developer для Firefox

Панель инструментов Web Developer для Firefox часто указывается в качестве одного из незаменимых инструментов для веб-разработчиков. Воспользовавшись панели инструментов в моей среде разработки, я от всей души согласился. Это сокращает время разработки часов. Он делает то, что может быть утомительной задачи, почти весело. Это позволяет мне быстро взглянул на сайте в отдельном окне размер. Это помогает мне отладки и проверки JavaScript и CSS код.

Крис Pederick разработали эту панель инструментов для Firefox. Вот то, что панель инструментов выглядит следующим образом:

Примечание: Это один бар в верхней части окна браузера. Показано, как два изображения выше, так что вы можете увидеть весь бар.

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

В режиме реального времени CSS отладки. При просмотре веб-страницы моей, я могу обновить файл CSS, что появляется с левой (или снизу) веб-страницы (из панели инструментов, выберите CSS / редактирование CSS) и видеть свои результаты в окне браузера. Это очень удобно для поиска неисправностей и для получения до мельчайших как лишние 10 пикселей для заполнения влияет на моей веб-странице. Хотя я не могу сразу же сохранить свои CSS обновления, я могу легко скопировать изменения, которые я знаю, уже работают и вставьте их в листе стилей CSS открытой в веб-редактор.

Валидаторов. Правом верхнем углу панели инструментов показывает, красная / зеленая кнопки, чтобы указать срок действия кода CSS и Javascript код. Если кнопка горит, я просто курсор на кнопку, и он сразу говорит мне, что ошибка его найти. Я могу нажать на консоли ошибок, чтобы узнать более подробную информацию, вернитесь в код (CSS или JavaScript), внести изменения, обновите окно браузера и смотреть на кнопке (ы), мы надеемся, станут зелеными. Удобства отладки кода удивительно - и, как правило, быстро решены.

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

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

Интеграция с Joomla. Это любимое на самом деле такой же, как и первый, перечисленные выше, но в определенной среде. Панель инструментов веб-разработчика имеет неоценимое значение в Joomla окружающей среды. Без инструментов, я постоянно происходит в Joomla, перейти на Расширения / Менеджер шаблонов, выбирая подходящий шаблон, делая то, что я считаю необходимым изменениям, сохранить его, то возвращаясь к окна браузера и проверки результатов. Вот так! С Developer Toolbar, я просто выберите «редактировать CSS» из меню CSS, внести необходимые изменения и просмотра результатов. Я могу продолжать настройки CSS, пока это право. Не ходит взад и вперед между окнами и приложениями. После того, CSS правильно, я просто выделите изменений, скопируйте код и вставьте его в шаблон CSS внутри Joomla. Это быстрее. Это проще. Это очень просто.

Это только верхушка айсберга в том, что эта панель может сделать для веб-разработчиков. Легко устанавливается и прост в использовании. Я настоятельно рекомендуется делать это часть вашей среде разработки. Она доступна на в https://addons.mozilla.org/en-US/firefox/addon/60.