Рекомендации по дополнительным инструментам браузера, которые помогут в разработке

Fire Fox:

• Проверьте это, если вы вообще используете инспектор DOM
• Measure It для определения расстояния в пикселях (если вам это нужно)
• Просмотр IE или Safari View для удобства тестирования в других браузерах.
• HTML Validator, если вы заботитесь о проверке
• Console², чтобы исправить ошибку js консоль
• Букмарклет Javascript Shell также удобен (и посмотрите на другие там же)

Изменить: это дополнение к панели инструментов веб-разработки, упомянутой другими

Для Фаерфокса:

Firebug отлично подходит для исследования и разработки.

панель инструментов веб-разработчика также хороша. Действительно помогает с CSS и макетами страниц, а также со многим другим.

Я также использую живые заголовки HTTP (думаю, это называется, но это находится на моей рабочей машине, поэтому сейчас не могу найти ссылку). Что помогло нам решить проблемы с кэшированием и тому подобное.

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

Я обычно использую Firefox только для разработки и просто тестирую в других браузерах, так как в большинстве из них нет такого обширного набора плагинов для помощи в разработке, как в Firefox.

Другим обязательным элементом Firefox является панель инструментов веб-разработчика Криса Педерика.

Вы обязательно должны установить Safari. Он имеет ряд встроенных инструментов. Я использую его в сочетании с другими браузерами все время.

• Хронология сети
• Консоль ошибок
• Веб-инспектор
• Редактор сниппетов

Кроме того, он позволяет вам установить пользовательский агент для ваших запросов.

Учтите, что у него есть отдельное меню верхнего уровня под названием Разработка.

В опере есть:

Dragonfly (инструменты -> дополнительные -> инструменты разработчика)

Меню отладки

методы UserJS для перехвата вещей

opera:config#CompatMode%20Override для форсирования причудливого или стандартного режима

Виджеты веб-разработчика

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

В случае с IE могут пригодиться следующие инструменты

• Панель инструментов разработчика Microsoft – dom | просмотрщик стилей
• HTTP-отладчик Fiddler — http-монитор
• Мгновенный источник – dom|просмотрщик стилей
• Companion.JS — средство просмотра стилей dom|, расширенная консоль ошибок

Расширение «uber» для IE — «Инструменты разработчика», предоставляемое как часть IE8.

Консоль разработчика и Снимок DOM для Opera:

http://dev.opera.com/tools/

Удивительно то, что это букмарклеты, реализованные на JS. Отстой в том, что они требуют Интернетз.

Fire Fox:

Проверьте это, если вы вообще используете DOM Inspector

Измерьте это, чтобы сообщить вам расстояние в пикселях (если вам это нужно)

IE View или Safari View для удобства тестирования в других браузерах

HTML Validator, если вы заботитесь о проверке

Console2 для улучшения вашей консоли ошибок js

Букмарклет Javascript Shell также удобен (и посмотрите на другие там же)

Это в дополнение к панели инструментов веб-разработки, упомянутой другими

Этот список Cebjyre почти завершен (поскольку FireBug уже упоминался в вопросе). Я бы добавил только Tamperdata. Время от времени это очень полезно.

Вот мои дополнения для Firefox 3, ориентированные на разработку:

1. Веб-разработчик
2. Firebug
   1. Firecookie
   2. FirePHP
   3. Радуга
3. Подделка данных
4. Плакат
5. FireFTP
6. ReloadEvery
7. Selenium IDE

YSlow — это приятное дополнение Firebug для устранения неполадок со временем загрузки страницы.

Помимо уже упомянутых превосходных инструментов, я считаю чрезвычайно полезным Charles. Тем более, что я много работаю с Flash Remoting, с которым он отлично справляется.

Charles — это прокси-сервер HTTP/монитор HTTP/обратный прокси-сервер, который позволяет разработчику просматривать весь HTTP-трафик между его компьютером и Интернетом. Сюда входят запросы, ответы и заголовки HTTP (которые содержат файлы cookie и информацию о кэшировании).

Чарльз может выступать в качестве посредника для связи HTTP/SSL, позволяя вам отлаживать содержимое ваших сеансов HTTPS.

Он кроссплатформенный, стоит 50 долларов, но вы можете скачать 30-минутную оценку сеанса.

Вот что я использую:

Fire Fox:

• Инспектор DOM: я использую его чаще всего для веб-разработки.
• Launchy: для открытия сайтов в других браузерах/приложениях.
• Подделка данных: это может быть полезно для отладки запросов GET/POST.
• Панель инструментов веб-разработчика: здесь так много удобных функций для отладки: инструменты проверки W3C, встроенные линейка, инструменты изменения размера, манипулирование исходным кодом, простые инструменты кэширования/css/скриптов

IE:

• Панель инструментов разработчика Internet Explorer : далеко не так удобно, как Firefox, но, по крайней мере, он дает вам достойный инспектор DOM.

Разное:

• удобные букмарклеты Джесси: shell особенно удобен
• Я также устанавливаю Safari и Opera, но в основном просто используйте их для тестирования и сравнительного анализа, поскольку их инструменты разработки не так надежны, как Firefox, и не так глючны, как IE.
• Lynx: я использую это, чтобы убедиться, что все сайты с большим количеством JS по-прежнему работают. так что я уверен, что они будут выглядеть нормально для Google, программ чтения с экрана и любого другого приложения, похожего на бота.