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