При правильной настройке Firefox может стать отличным инструментом веб-разработки, предоставляя вам прямой доступ к странице, над которой вы работаете, чтобы вы могли оформлять страницы в реальном времени, отлаживать JavaScript или даже редактировать HTML.
Создать отдельный профиль для веб-разработки
Установка всех этих инструментов разработки превратит Firefox в очень тяжелый браузер, поэтому мы должны сначала создать новый профиль для Firefox.
Вы можете запустить отдельный профиль одновременно с обычным профилем, создав новый ярлык с этими аргументами, заменив WebDev именем вашего профиля. Там также более подробное объяснение того, как это сделать.
firefox.exe -P WebDev -no-remote
Теперь, когда вы настроили Firefox с отдельным профилем только для веб-разработки, давайте взглянем на расширения, которые мы можем использовать, чтобы сделать Firefox идеальным инструментом веб-разработки.
Обязательные расширения для веб-разработчиков
Это все расширения, которые я использую на регулярной основе для веб-разработки.
Firebug — самое мощное расширение для отладки javascript, просмотра CSS и html. Вы можете вносить динамические изменения в код и CSS и использовать его для отладки своего Ajax-кода. Это действительно лучшее расширение.
Одно из лучших расширений за x лет подряд. Это необходимо для любого разработчика, но вы уже слышали об этом.
Это расширение является очень легким расширением, которое легко покажет вам элементы на странице и назначенный им класс / идентификатор. Его проще использовать, чем расширение для веб-разработчиков, в тех случаях, когда вам просто нужна быстрая информация об элементе. Вы также можете использовать его для удаления элементов со страницы.
Выберите цвета легко. Больше не нужно искать цвета, встроенные в таблицу стилей.
Вы можете настроить несколько профилей просмотра источника для открытия источника в разных приложениях.
Это расширение позволяет легко проверять HTML-код вашей страницы и устанавливается на панель «Источник».
Это не совсем расширение для веб-разработчиков, но Greasemonkey потрясающе, не в последнюю очередь благодаря способности автоматизировать часто выполняемые действия, что значительно экономит время веб-разработчиков.
С этим расширением легко измерить расстояние на экране. После того, как вы измерили площадь, вы можете перетащить прямоугольник по экрану для использования в качестве сравнения.
IE View / IE Tab / OperaView / FirefoxView / Safari View / IE View Lite
Эти расширения (на ваш выбор) позволяют легко просматривать текущую страницу в разных браузерах. IE Tab даже позволит вам запустить IE внутри вкладки, если вы так склонны.
Очищает кеш. Особенно полезно для проверки новых изменений CSS.
Расширение Restart Firefox очень полезно для закрытия и перезапуска Firefox с сохранением всех вкладок и сессий.
Расширение Tab Mix Plus является отличным расширением в целом, но имеет несколько принципиально полезных функций для веб-разработчиков: Duplicate Tab и Copy Tab URL.
Расширение YSlow — это новое расширение от Yahoo, которое проанализирует вашу страницу и сообщит вам, где вы делаете ошибки. Это даже даст вам оценку производительности вашего сайта. Вы увидите небольшой индикатор в правом нижнем углу … он показывает вам общий размер вашей страницы, а также время загрузки. Очень полезное расширение, но оно требует расширения Firebug.
Расширение генератора Dummy Lipsum создаст для вас фиктивный контент на основе известного текста Lorem Ipsum, который очень полезен для размещения фальшивого контента на вашем сайте.
Расширение Screengrab позволит вам делать скриншоты страниц, но может делать то, что не умеет обычный инструмент для создания скриншотов — он может сделать изображение всей страницы, а не только видимой части.
Есть множество других расширений, которые вы можете использовать, но это лучшие из лучших из всего, что я видел. Если у вас есть другое расширение, которое вы используете регулярно, оставьте упоминание в комментариях.
Теперь вы превратили Firefox в идеальный инструмент для веб-разработки. Потратьте время, чтобы узнать, как использовать Firebug особенно.