Рекомендации по дополнительным инструментам для браузера, которые помогут в разработке
Кто-нибудь может предложить несколько хороших инструментов / расширений для браузера, чтобы помочь с разработкой? У меня установлен Firebug в Firefox, который отлично подходит для работы с CSS, HTML и javascript; какие-либо другие предложения?
12 ответов
Fire Fox:
- Проверьте это, если вы используете DOM Inspector на всех
- Измерьте это, чтобы сообщить вам расстояние в пикселях (если вам это нужно)
- IE View или Safari View для удобства тестирования в других браузерах
- HTML Validator, если вы заботитесь о проверке
- Консоль2 для улучшения вашей консоли ошибок JS
- Также очень удобен букмарклет Javascript Shell (и посмотрите на другие)
Изменить: это в дополнение к панели инструментов веб-разработки, упомянутой другими
Для Firefox:
Firebug хорош для исследований и разработок.
Панель инструментов веб-разработчика также хороша. Действительно помогает с CSS и макетами страниц, а также многим другим.
Я также использую заголовки Live HTTP (я думаю, что он называется, но он на моей рабочей машине, поэтому сейчас не могу найти ссылку). Который помог нам с проблемами кэширования и тому подобное.
Я много занимаюсь разработкой мобильных телефонов, поэтому я также использую UserAgent Switcher. Очень полезно для того, чтобы притворяться разными мобильными телефонами.
Я склонен использовать Firefox только для разработки и просто тестировать в других браузерах, так как большинство из них не имеют обширного набора плагинов для помощи в разработке, чем Firefox.
В случае IE, следующие инструменты могут быть полезны
- Панель инструментов разработчика Microsoft - dom| просмотр стилей
- Fiddler HTTP Debugger - монитор http
- Мгновенный источник - dom| стилей просмотра
- Companion.JS - dom| просмотр стилей, расширенная консоль ошибок
Расширение "uber" для IE - "Инструменты разработчика", предоставляемое как часть IE8
Другим обязательным условием для Firefox является панель инструментов веб-разработчика Криса Педерика.
Вам обязательно нужно установить Safari. Он имеет ряд встроенных инструментов. Я использую его в сочетании с другими браузерами все время.
- Сетевой график
- Консоль ошибок
- Веб-инспектор
- Редактор сниппетов
Кроме того, он позволяет вам установить пользовательский агент для ваших запросов.
Учтите это, у него есть отдельное меню верхнего уровня под названием Develop.
Опера имеет:
Dragonfly (инструменты -> продвинутый -> инструменты разработчика)
UserJS методы для перехвата вещей
opera:config#CompatMode%20Override для форсирования причуд или режима стандартов
Вы можете просматривать исходные файлы, редактировать их, применять изменения и перезагрузить из кеша.
Консоль разработчика и DOM Snapshot для Opera:
Удивительно, что это букмарклеты, реализованные с помощью JS. Suckiness является то, что они требуют Internetz.
Вот мои ориентированные на разработку дополнения для Firefox 3:
Fire Fox:
Проверьте это, если вы используете DOM Inspector на всех
Измерьте это, чтобы сообщить вам расстояние в пикселях (если вам это нужно)
IE View или Safari View для удобства тестирования в других браузерах
HTML Validator, если вы заботитесь о проверке
Console2, чтобы улучшить вашу консоль ошибок js
Также очень удобен букмарклет Javascript Shell (и посмотрите на другие)
Это в дополнение к панели инструментов веб-разработки, упомянутой другими
Этот список от Cebjyre почти завершен (поскольку FireBug уже упоминался в вопросе). Я бы только добавил Tamperdata. Время от времени это очень полезно.
YSlow - это приятное дополнение к Firebug для устранения проблем с загрузкой страницы.
Вот что я использую:
Fire Fox:
- DOM Inspector: Я использую это больше всего на свете для веб-разработки
- Launchy: для открытия сайтов в других браузерах / приложениях
- Данные тампера: это может быть полезно для отладки запросов GET/POST
- Панель инструментов веб-разработчика: в ней так много удобных функций для отладки: инструменты проверки W3C, встроенная линейка, инструменты изменения размера, манипуляции с исходным кодом, простые инструменты для кэширования / CSS / сценариев
IE:
- Панель инструментов разработчика Internet Explorer: нигде не такая удобная, как Firefox, но, по крайней мере, она дает вам достойного инспектора DOM
Разное:
- Удобные букмарклеты Джесси: особенно удобен букмарклет с оболочкой
- Я также устанавливаю Safari и Opera, но в основном просто использую их для тестирования и бенчмаркинга, поскольку их инструменты для разработки не так надежны, как Firefox, и они не такие глючные, как IE.
- Lynx: я использую это, чтобы убедиться, что все сайты с JS-поддержкой все еще работают, так что я уверен, что они будут хорошо смотреться с Google, программами для чтения с экрана и любыми другими бот-подобными приложениями.
Помимо уже упомянутых превосходных инструментов, я считаю Чарльза чрезвычайно полезным. Тем более, что я много работаю с Flash Remoting, с которой он отлично справляется.
Charles - это HTTP-прокси / HTTP-монитор / обратный прокси-сервер, который позволяет разработчику просматривать весь HTTP-трафик между своим компьютером и Интернетом. Это включает в себя запросы, ответы и заголовки HTTP (которые содержат файлы cookie и информацию о кэшировании).
Чарльз может выступать в роли посредника в обмене данными по протоколу HTTP/SSL, что позволяет вам отлаживать содержимое ваших сеансов HTTPS.
Он кроссплатформенный, стоит 50 долларов, но вы можете скачать оценку "30 минут на сессию".