Независимо от того, что вы слышали о Google Chrome, когда речь идет о веб-дизайне и разработке, Firefox по-прежнему остается лучшим браузером с дружественной средой разработки, который вы можете найти.
Черт, у Firefox даже есть специальная версия браузера, созданного только для веб-разработчиков. Вот насколько сильно Mozilla заботится о веб-дизайнерах и разработчиках.
У Firefox также есть огромная коллекция расширений, которые делают браузер более мощным для максимального эффекта. Вот некоторые из лучших расширений Firefox, которые вы можете использовать, чтобы облегчить себе жизнь в процессе веб-разработки.
Установите, протестируйте и используйте большинство из этих расширений. В конце концов, все они бесплатны для использования!
- Что делает: Инспектирует веб-страницы
Firebug - это расширение, без которого веб-дизайнеры и разработчики просто не могут жить. Это расширение похоже на расширенную версию интегрированной консоли разработчика, которая поставляется вместе с Firefox. Firebug значительно облегчает вам проверку элементов на веб-страницах и показывает, как все работает на разных сайтах.
- Подходит: веб-разработчикам
- Что делает: клиент для Firefox
FireFTP - это FTP/SFTP-клиент для Firefox, который позволяет вам безопасно загружать и передавать файлы между вашим компьютером и сервером непосредственно из вашего браузера. Благодаря этому дополнению вам никогда больше не придется прыгать между браузером и клиентскими приложениями FTP.
- Подходит: веб-разработчикам и дизайнерам
- Что делает: анализ и проверка веб-страниц
Это своеобразное расширение «все в одном», которое добавляет в ваш Firefox ряд полезных инструментов. Некоторые из инструментов, включенные в этот аддон - отображение и редактирование таблиц стилей CSS, отключение стилей, инструменты отладки и т. д.
- Что делает: инструмент для анализа цвета
ColorZilla - отличный инструмент, который интерфейсные веб-дизайнеры найдут весьма полезным. Этот аддон имеет пипетку для быстрого выбора цвета на веб-странице, генератор градиента CSS, цветовой анализатор, цветовые палитры и многое другое.
- Подходит: веб-разработчикам
- Что делает: изменение веб-сайтов с настраиваемым кодом
Любимое более миллионом пользователей Firefox, Greasemonkey - это расширение, которое подарит вам бесконечное удовольствие. Это дополнение позволяет вам настраивать популярные веб-сайты, редактируя их с помощью собственного кода JavaScript. Вы также можете получить удовольствие от скриптов, уже созданных другими разработчиками.
- Подходит: дизайнерам интерфейсов
- Что делает: регулирует смещение веб-элементов
Простой, но полезный плагин, который позволяет вам проверять веб-элементы и визуально видеть, сколько пикселей отключено в элементах, создавая композицию с прозрачными слоями. Используя эту композицию, вы можете настроить свою реальную веб-страницу так, чтобы она соответствовала наложению для достижения наилучшего результата без каких-либо догадок.
Например, если одно из изображений на вашей веб-странице перекрывает другой объект, вы можете использовать Pixel Perfect, чтобы определить, сколько пикселей нужно настроить, чтобы получить это изображение в нужном месте.
- Подходит: веб-дизайнерам
- Что делает: загружает все с веб-страницы
Этот плагин соответствует своему названию, позволяя вам загружать все с веб-страницы. С помощью одного щелчка вы можете загрузить все изображения, ссылки и другие данные, содержащиеся на веб-странице, используя данное расширение. Аддон также имеет встроенный ускоритель загрузки, который оптимизирует скорость загрузки в четыре раза.
- Подходит: дизайнерам интерфейсов
- Что делает: проверяйте веб-страницы в Internet Explorer
Хотите - верьте, хотите - нет, но есть люди, которые все еще используют старые версии Internet Explorer для выхода в Интернет. Создание сайтов, хорошо работающих в этих старых браузерах, является одной из проблем, с которой веб-дизайнеры по-прежнему борются. Этот плагин упрощает настройку веб-дизайна для более старых браузеров Internet Explorer, создавая новую вкладку в IE.
- Подходит: веб-дизайнерам и разработчикам
- Что делает: показывает о технологии, используемые на веб-сайте
Хотите знать, какие технологии использовались для создания ваших любимых веб-сайтов? Тогда это дополнение вам пригодится. BuiltWith - это расширение, которое позволяет сканировать веб-сайты, чтобы найти, какие технологии используются на странице. Отличный инструмент для всех начинающих веб-дизайнеров, чтобы учиться на примере готовых веб-сайтов.
- Подходит: веб-разработчикам
- Что делает: включает или выключает Java
Это дополнение позволяет вам легко включать или отключать Java в вашем браузере. Он также может отключить на веб-странице Javascript, Cookies, анимированные изображения, Flash и другое. Это полезный плагин не только для разработчиков, но и для обычных пользователей, чтобы повысить безопасность браузера и снизить пропускную способность.
- Подходит: дизайнерам интерфейсов
- Что делает: Измеряет элементы в пикселях
Функция этого дополнения проста, он позволяет вам рисовать виртуальную линейку поверх веб-страницы или элемента на странице, чтобы измерить ширину, высоту или выровнять элемент по пикселям на веб-странице. MeasureIt пригодится большинству разработчиков интерфейсов для создания макетов.
- Подходит: веб-дизайнерам
- Что делает: переключает язык в браузере
Это полезный инструмент, который мгновенно переводит ваш Firefox на другой язык. Все в вашем браузере, включая пользовательский интерфейс, словарь проверки орфографии и содержимое веб-сайта, будут переведены на выбранный вами язык. Отличная возможность, которую вы можете использовать при разработке многоязычных веб-сайтов.
- Подходит: дизайнерам интерфейсов
- Что он делает: генерирует фиктивный текст
Создание фиктивного текста для ваших новых макетов и прототипов веб-сайта - это скучная задача, которая вряд ли способна развлечь хотя бы одного дизайнера. Это расширение сделает этот процесс менее скучным, позволяя вам создавать фиктивный текст «Lorem Ipsum» прямо из Firefox.
- Подходит: веб-разработчикам
- Что делает: редактирует и создает cookie
Это дополнение не только управляет файлами cookie вашего сайта, но и позволяет легко редактировать и создавать новые файлы. Некоторые из функций плагина включают встроенный просмотр файлов cookie, возможность сменить домен, возможность одновременного редактирования нескольких файлов cookie и многое другое.
- Подходит: дизайнерам интерфейсов
- Что делает: выбирает цвета на веб-странице
Простой в использовании инструмент, который позволяет вам выбирать цвета любого пикселя на веб-странице и легко копировать цветовой код RGB или Hex для использования в ваших собственных проектах. Красота и визуальный интерфейс этого инструмента значительно облегчают новичкам изучение цветов на веб-страницах.
- Подходит: веб-дизайнерам и разработчикам
- Что делает: дает информацию о программном обеспечении, используемым веб-сайтом
Подобно дополнению BuiltWith, Wappalyzer – это еще одно полезное расширение, которое позволяет вам узнать, какое программное обеспечение используется на веб-сайте. Например, вы можете узнать, какой тип CMS использует сайт, какую операционную систему поддерживает сервер веб-сайта и многое другое.
- Подходит: веб-разработчикам
- Что делает: изменяет пользовательский агент браузера
Хотите узнать, как будет выглядеть ваш сайт на разных платформах и операционных системах? Тогда это инструмент, который пригодится вам точно пригодится. User-Agent Switcher позволяет переключаться между различными платформами, такими как Android, Mac, Windows, и выбирать операционные системы для изменения пользовательского агента вашего браузера.
- Подходит: веб-дизайнерам и разработчикам
- Что делает: показывает пример использования вкладки памяти браузера
Это удобное дополнение, которое поможет вам определить, сколько ресурсов вашего компьютера используется каждой открытой вкладкой в Firefox. Вы можете использовать этот инструмент, чтобы выяснить, сколько ресурсов используется вашим сайтом и оптимизировать сайт для достижения максимальной производительности.
- Подходит: веб-дизайнерам и графическим дизайнерам
- Что делает: открывает изображения в Photoshop
Это дополнение делает то, что говорит его название, просто открывает одним щелчком изображения, которые вы находите на веб-странице с помощью Photoshop. Не нужно загружать изображение или запускать Photoshop, расширение будет делать все, что необходимо.
- Подходит: дизайнерам интерфейсов
- Что делает: улучшает таблицы HTML
Графики, статистика, сравнения, таблицы - это дополнение может сделать все. Вы можете использовать этот инструмент для создания удобных и красивых HTML-таблиц и схем.
- Подходит: веб-разработчикам
- Что делает: клиент SSH для Firefox
Как правило, вам нужно установить приложение для запуска SSH-терминала. Эти приложения отличаются одной операционной системы от другой. FireSSH, однако, работает на всех платформах, если у вас есть Firefox. Расширение позволяет запускать SSH-терминал непосредственно из браузера.
- Подходит: дизайнерам интерфейсов
- Что делает: автоматически обновляет веб-страницы
Одна из раздражающих вещей, с которыми сталкиваются веб-дизайнеры при разработке веб-сайтов, это необходимость обновлять веб-страницу вручную после внесения каждого небольшого изменения в код. Auto Refresh - это расширение, которое устраняет эту проблему, позволяя автоматически обновлять одну или несколько вкладок в Firefox с определенными вами интервалами.
- Подходит: дизайнерам интерфейсов
- Что делает: изменяет размер окон Firefox для конкретных разрешений экрана
Это дополнение позволяет изменять размер окна Firefox в определенных разрешениях, чтобы увидеть, как выглядит ваш веб-сайт на разных экранах. Вам понадобится установить Firefox Add-On Bar для того, чтобы это расширение работало должным образом.
- Подходит: веб-дизайнерам и разработчикам
- Что делает: находит информацию о шрифтах страницы и ее элементов
Font Finder - удобный инструмент, который позволяет вам изучать элементы веб-сайта, чтобы узнать важную информацию о шрифтах, используемых на странице, такую как название семейства шрифтов, цвет шрифта, межстрочный интервал, декор и многое другое.
- Подходит: дизайнерам интерфейсов
- Что делает: проверяет веб-страницы в различных браузерах
Функция этого дополнения проста. Оно позволяет мгновенно открывать любую веб-страницу, которую вы просматриваете в Firefox, с помощью другого браузера одним щелчком мыши. Нет необходимости копировать URL-адреса, открывать каждый браузер один за другим и вставлять URL-адреса, чтобы открыть веб-сайт.
- Подходит: веб-дизайнерам и разработчикам
- Что делает: очищает кэш браузера
Это дополнение моментально очищает кэш браузера Firefox (RAM и DISK), чтобы сократить использование ресурсов компьютера. Расширение позволяет очистить кэш, просто нажав на кнопку или нажав клавишу F9 на клавиатуре. Если вы хотите быстро просмотреть изменения, внесенные на веб-страницу, это дополнение окажется очень полезным.
С ростом популярности браузера Google Chrome появляются расширения, которые позволяют экономить время веб-разработчиков, давая им возможность отслеживать ошибки и проблемы с производительностью сайта.
Вот несколько полезных расширений для Google Chrome.
Расширение Web Developer
Хочу отметить самый удобный и мощный инструмент для веб-разработчика и веб-дизайнера - расширение Web Developer для Google Chrome.
Расширение добавляется в панель инструментов Google Chrome в виде кнопочки с изображенной шестеренкой и содержит различные инструменты для разработки и отладки веб-сайта. Это официальная адаптация популярного , написанная тем же разработчиком.
Расширение имеет большое количество опций.
Например, многим надо просто узнать цвет элемента на экране монитора в шестнадцатиричном формате. Для этого в плагине есть специальная функция. В разделе Miscellaneous выбрать пункт Display Color Picker .
Выбрав пункт Display Color Picker , курсор становится в виде крестика. Теперь, кликая на любую область экрана в правом нижнем углу браузера отображается цвет в шестнадцатиричной системе для использования в CSS.
Google Chrome поддерживает нескольких различных каналов обновлений, начиная от ежедневных сборок Canary и заканчивая стабильными релизами с 6-недельным циклом выхода.
Обратите внимание, что Вы можете запускать релизы Canary совместно с сборками другого канала, потому что в этом случае не производится обмен данными профиля с другими каналами. Это позволяет пользователям тестировать новейшие разработки, сохраняя проверенную версию Google Chrome.
Обзоры каналов Google Chrome
- Stable : данный канал получает полностью протестированные тестовой командой Google версии браузера, которые не содержат серьезных сбоев и значительных проблем. Канал обновляется каждые 2 недели для промежуточных выпусков и каждые 6 недель для основных релизов. Скачать стабильную версию можно на странице - Google Chrome .
- Beta : Если Вы хотите протестировать новые функции и улучшения с минимальными риском, канал Beta будет отличным выбором. Сборки обновляются каждую неделю, а основные версии появляются каждый 6 недель, более, чем за месяц до выхода стабильной версии.
- Dev : Если Вы хотите ознакомиться с нововведениями как можно быстрее, вам подойдет канал Dev. Канал Dev получает обновление один или два раза в неделю и наглядно демонстрирует над какими улучшениями ведет работу команда Chrome. Задержка относительно основных версий отсутствует, и пользователь получает последний код. Несмотря на то, что данные сборки проходят тестирования, в них может содержаться большое количество ошибок.
- Canary : В сборках Canary тестируются изменения, связанные с риском. Релизы выпускаются ежедневно и не проходят предварительное тестирование. Так как нет гарантий, что данные версии запустятся, они используют собственный профиль и настройки, а значит могут работать параллельно релизам другого канала Chrome. По умолчанию версии Canary сообщают о сбоях и статистке использования в Google, но Вы можете отключить данную опцию на странице загрузки.
- Другие сборки : Если Вы - абсолютно бесстрашный тестировщик, Вы можете загрузить последнюю рабочую сборку из непрерывного потока разработки Chromium, посмотрев на номер под "LKGR", перейдя в загрузочный сегмент Google и скачав соответствующую сборку.
Примечание: Релизы раннего доступа (сборки Canary, Dev и Beta) будут лишь частично переведены на другие языки, отличные от английского. Текст, связанный с новыми функциями может не быть переведен на другие языки до того, как выйдет стабильная версия.
Что нужно знать, перед изменением канала?
Резервное копирование данных
Перед тем, как Вы перейдете на другие сборки, Вы должны создать резервное копирование данных профиля (закладки, самые посещаемые страницы, история, файлы куки и т.д.) Если Вы захотите снова перейти на более стабильный канал, обновленный данные могут быть несовместимыми со старыми версиями.
Сделайте копию папки User Data\Default directory (например, скопируйте в папку "Default Backup" в той же директории). Путь зависит от операционной системы:
- Каналы Stable, beta, и dev: \Documents and Settings\username\Local Settings\Application Data\Google\Chrome\User Data\Default
- Сборки Canary: \Documents and Settings\username\Local Settings\Application Data\Google\Chrome SxS\User Data\Default
Windows Vista или 7:
- Каналы Stable, beta, и dev: \Users\username\AppData\Local\Google\Chrome\User Data\Default
- Сборки Canary: \Users\username\AppData\Local\Google\Chrome SxS\User Data\Default
- Каналы Stable, beta, и dev: ~/Library/Application Support/Google/Chrome/Default
- Сборки Canary: ~/Library/Application Support/Google/Chrome Canary/Default
- ~/.config/google-chrome/Default
Примечание: если Вы используете Проводник Windows для поиски папки, может потребоваться включение опции “Показывать скрытые папки и файлы” в Панели управления> Свойства папки (Параметры Проводника) > Вид
Есть куча бесплатных расширений Chrome для упрощения вашей жизни – мы выбрали лучшие.
Chrome DevTools- это здорово, но возможно добавить еще больше интересных возможностей в ваш браузер, чтобы сделать веб-дизайн и разработку значительно проще. Мы представляем 32 из наших любимых расширений Chrome.
Радикально ускорить процессы стилизации элементов с DomFlags - действительно грандиозным расширением, которое позволяет создавать сочетания клавиш для элементов DOM! Это как закладки для навигации по DOM и это изменит способ работы с DevTools.
Вот интересный способ привлечь людей к обсуждению: Highly Highlighter позволяет обмениваться фрагментами из статей в интернете, так что вы можете обратить внимание на наиболее значимые части написанного.
Booom делает Dribbble лучше, показывая больше кадров в списках, добавив к ним кнопки Like и Add to Bucket, а также создавая автозапуск GIF-файлов и делая прокрутку бесконечной.
Это мощное расширение для Chrome, позволяющее создавать дизайн, а затем экспортировать его в файл CSS для использования на вашем сайте. Оно поддерживает слои и содержит в себе множество инструментов, которые вы привыкли использовать в своем обычном фото-редакторе.
Это блестящее расширение возьмет ваш код и выведет снимки для демо и макетов. Вы также можете добавить темы и эффекты для создания изображений для ваших промо и онлайн-портфолио.
Как веб-разработчику, вам необходимо тестировать ваши веб-страницы. Повторять одни и те же действия снова и снова может стать утомительным процессом. iМacros - это удобное расширение для Chrome, которое позволяет записывать действия и сохранять их, так что вам нужно будет сделать определенное действие всего один раз. После этого вы можете тестировать ваши страницы снова и снова, повторяя действия одним нажатием кнопки, экономя драгоценное время и позволяя себе сосредоточиться на более насущных вопросах.
Каждый дизайнер и разработчик найдет это расширение бесценным. Font Playground позволяет экспериментировать с локальными шрифтами и всей библиотекой шрифтов Google на веб-странице, не делая каких-либо фактических изменений. Прелесть этого расширения заключается в том, что оно включает в себя все различные начертания шрифтов, стили и текстовые эффекты, так что вы можете просматривать веб-страницу перед тем, как внедрять изменения.
Это расширение Chrome является очень полезным инструментом, который делает именно то, что гласит его название - изменяет размер окна браузера, чтобы помочь вам в создании адаптивного дизайна сайта. Выбирайте из списка популярных размеров монитора или добавляйте самостоятельно пользовательские размеры и разрешения для увеличения точности.
Если вам когда-нибудь придется работать с макетом изображения со встроенным текстом, это расширение может спасти вас от небольшого раздражения. проект Лигроин может спасти вас в мир легкого раздражения. Благодаря искусным трюкам OCR, расширение позволяет выделять, копировать и вставлять текст из любого изображения и даже может перевести его для вас.
Очень полезное расширение для Google Chrome, позволяющее разработчикам и дизайнерам идентифицировать шрифты, используемые на веб-странице. Поэтому, если вы наткнулись на необычно выглядящий веб-шрифт, который хотите использовать в одном из своих будущих проектов, просто наведите на него курсор и выясните, мгновенно, какой это шрифт.
Этот инструмент не только проверяет, как быстро ваши веб-страницы загружаются, он также говорит вам, в случае чего, замедляет их. Yslow проверяет вашу веб-страницу по 23 из 34 правил, определенных командой производительности компании Yahoo. Это чрезвычайно полезный инструмент для анализа веб-страниц, а также предложения способов повышения их эффективности.
Как веб-разработчик, вы можете спросить себя, как вы жили без этого расширения. Он добавляет кнопку на панели инструментов Chrome с множеством полезных инструментов для веб-разработчика. Это официальный порт расширения Web Developer для Firefox.
Page Ruler - это отличный инструмент для точного измерения элементов на любой веб-странице и их последующей обработке согласно вашим требованиям. Нарисуйте линейку, чтобы получить размеры в пикселях и расположение.
Этот инструмент позволит вам проверить, если ваши веб-страницы следуют лучшей практике, когда дело доходит до SEO, юзабилити, доступности и производительности (скорость загрузки). Так, например, если у вас отсутствует тег H1 на странице или она без мета-тегов, то расширение уведомляет вас об этом, так что вы сможете быстро устранить эту проблему. Если вы щелкните на ссылку «подробнее и помощь» в нижней части расширения, то найдете более углубленный список.
Настоящая жемчужина для всех веб-разработчиков, DevTools Autosave позволяет автоматически сохранять любые изменения, сделанные на веб-странице, в CSS и JS через Chrome DevTools. Расширение легкое в настройке и использовании, а также сэкономит вам много времени.
Превратить любую веб-страницу в вайрфрейм с помощью всего одного клика. Это расширение для Google Chrome помогает веб-разработчикам и дизайнерам просматривать веб-страницы, будь то локальные или в Интернете, с наложением вайрфрейма.
Расширение ColorZilla - это усовершенствованная пипетка, сборщик цвета, генератор градиента и другие полезные цветовые инструменты, которые помогут вам в вашем дизайне – прямо в окне вашего браузера.
Это мультиплатформенный эмулятор мобильной среды, который может помочь вам проверить ваши веб-приложения, используя различные устройства и разрешения экрана. Ripple Emulator может использоваться в сочетании с существующими средствами разработки для выполнения отладки, проверки DOM и автоматизированного тестирования.
Если вы веб-разработчик, то, наверное, слышали о Stack Overflow - место для решения любых проблем и вопросов, связанных с разработкой. Если нет, то вам обязательно нужно его проверить, сообщество процветает и охватывает широкий спектр тем от C# и Java до PHP и jQuery. Это фантастическое расширение добавляет окно поиска прямо в ваш браузер, позволяя искать среди огромных ресурсов Stack Overflow.
Это может быть довольно трудным помнить каждую функцию, поэтому, если вы бывали в ситуациях, когда приходилось тратить часы на поиск определенной функции PHP в Google, то это расширение обязательно привлечет ваше внимание. PHP Ninja Manual предоставляет вам всю документацию PHP-5.5 с примерами на восьми языках, не выходя из вашего браузера.
Дизайнеры ненавидят, когда они создают потрясающий дизайн, который в итоге не совпадает с результатом кодирования. PerfectPixel на самом деле является идеальным расширением для веб-разработчиков, стремящихся разрабатывать сайты, которые являются точными образами дизайна. Это простое в использовании расширение позволяет наложить полупрозрачное изображение поверх веб-страницы и выполнить сравнение пикселей, чтобы гарантировать 100% точность.
Этот инструмент позволит вам не только просматривать исходный код, с которым вы уже работаете, но он также функционирует как CSS редактор, где вы можете редактировать свои веб-страницы и видеть изменения мгновенно.
Отличный инструмент, чтобы просматривать, как выглядит сайт, используя различные пользовательские средства, такие как iPad, iPhone или Android. Это может оказаться очень полезным, если сайт был взломан, и так вы можете просматривать то, как поисковые системы видят страницы.
Один из самых популярных и полезных эмуляторов IE. Он позволяет веб-разработчикам тестировать веб-страницы в различных версиях IE непосредственно в браузере Chrome.
Это простой в использовании, бесплатный онлайн-фоторедактор, который позволяет редактировать веб-страницы, изображения и скриншоты. Но это не то, что делает его хорошим. PicMonkey позволяет захватить любой образ и делать скриншот всей страницы одним нажатием кнопки. После того, как вы выберите изображение, вы можете отредактировать его, как вы хотите, применяя эффекты для изменения экспозиции.
Дефицит цветового зрения или дальтонизм затрагивает миллионы людей по всему миру. Это гениальное расширение использует техника, которая позволяет создавать образы, подходящие для просмотра людям с данным нарушением.
Расширение поможет веб-разработчику в проверке библиотек фреймворков, CMS и JavaScript на сайте, в тот момент, когда вы его просматриваете. В адресной строке, появится иконка, указывающая обнаруженную библиотеку. Это расширение Chrome имеет высокий рейтинг и может обнаружить более 100 популярных CMS и JS библиотек.
Закончили сайт, но забыли проверить все ссылки? Независимо от того, насколько тщательно вы следили за этим, возможно, что вы упустили одну или две, и просмотреть их все будет довольно муторно. С этим расширением, вы можете просто оставить сайт в работе, и оно будет читать все ссылки на каждой странице, выделяя доступные зеленым цветом и битые – красным.
Это просто небольшое расширение, которое отображает популярные фотографии с Fickr каждый раз, когда вы открываете окно. Нажмите на фотографию, чтобы просмотреть ее в Flickr или щелкните имя пользователя, чтобы увидеть больше фотографий от фотографа.
Как и в случае с предыдущим расширением, в каждой новой вкладке вы будете видеть шедевры от таких великих художников как Ван Гог и Моне. Если вам понравилось изображение, нажмите на него, и вы попадете на веб-сайт Google Cultural Institute, который полон информации о работе и ее создателе.
Итак, ваш последний счет от мобильного провайдера за Интернет был внушительным? Не паникуйте. Вам просто нужно это расширение: оно уменьшает объем данных, используемых при просмотре веб-страниц. При включении Chrome будет использовать серверы Google, чтобы сжимать страницы перед их загрузкой. Есть только один нюанс: не будет включен SSL и режим инкогнито.
Если вы активный пользователь браузера Google Chrome, то самое время прокачать его на полную катушку инструментами настоящего разработчика. Вот список популярных плагинов, который упростит работу и разнообразит обыденный интернет-сёрфинг.
Stylebot
Если вы хотите переделать любимые интернет-страницы на свой лад, то лучше плагина не найти.
Image Downloader
Приложение для скачивания понравившихся картинок с любого сайта.
DomFlags
Создание меню ссылок для быстрой навигации по вашему коду.
CSS-Shack
Очень удобная утилита, в которой вы можете работать с текстом, изображениями, верстать страницы, а потом просто экспортировать файл в CSS и пользоваться в создании свей страницы.
Marmoset
Предельно бесполезное приложение для создания красивых скриншотов вашего кода. Под красотой понимается возможность изменения цвета фона и вращение в 3D.
iMacros for Chrome
Если вам надо настроить тестирование веб-страницы путём циклического совершения определённых действий, то это приложение именно то, что нужно.
Font Playground
Не самое замысловатое приложение, но крайне удобное. Позволяет быстро оценить изменение шрифта, как в отдельном блоке, так и на всей странице.
Firebug Lite
Возможно, вы знаете про подобную мощную надстройку для Firefox, которая служит отладчиком и DOM-инспектором JavaScript, HTML, CSS. Чуть менее функциональная версия есть и на Chrome.
Window Resizer
Позволяет быстро посмотреть, как будет выглядеть страница на экране произвольного размера.
Ripple Emulator
Аналогичная утилита, которая демонстрирует отображение страницы на конкретном гаджете.
Project Naptha
Приложение будет полезно не только разработчику, но и простому пользователю. Позволяет копировать текст с картинки, редактировать его и даже переводить.
What Font
Чтобы узнать, какой перед вами шрифт, просто установите в браузер приложение What Font.
ColorZilla
А это приложение позволит узнать номер цвета.
Yslow
Данная утилита не просто покажет скорость загрузки страницы, но и подскажет, что именно эту самую скорость снижает.
Web Developer
Какой веб-разработчик сможет жить без приложения Web Developer? Добавляет на главное окно кнопки-стандартные инструменты разработчика.
Page Ruler
Рулетка для веб-страниц сообщит вам габариты того или иного элемента.
DevTools Autosave
Как понятно из названия, данное приложение автоматически сохраняет ваши труды по созданию кода.
Instant Wireframe
С помощью этой утилиты вы сможете на любо ресурсе просмотреть структурную схему страницы (wireframe).
Search Stackoverflow
Быстрый поиск по популярному сервису вопросов и ответов для программистов и разработчиков.
PerfectPixel
Приложение для работы со слоями в вебе, в частности можно делать их полупрозрачными.
Chrome Daltonize
Если вдруг решите сделать сайт, рассчитанный в том числе на людей с проблемой цветоощущения, то непременно воспользуйтесь этой утилитой.
Check My Links
А какими расширениями и приложениями браузера вы пользуетесь в работе?