—»     —»   Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome
  Раздел: Браузеры   Нет комментариев  

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

С самого момента запуска, система расширений остается самой востребованной функцией Google Chrome, и в прошлом месяце, Google наконец-то разродились! Был запущен веб-сайт Google Chrome Extensions в бета-стадии, и буквально в течении месяца они уже разместили на нем более 1000 великолепных расширений (правда, пока что нет поддержки системы Mac).

Теперь основной вопрос заключается в том, насколько полноценной и полезной системой разработки мы, дизайнеры и разработчики, можем сделать Chrome в поддержке этих новых расширений? А следующий вопрос заключается в том, заменит ли он Firefox или все-таки нет?

Основное преимущество Chrome заключается в скорости его работы. Да, этот браузер работает быстрее, чем Firefox. Но ведь основная цель всех браузеров – не скорость. Браузер должен быть максимально комфортным для пользования конечным пользователем, он должен уметь подчиняться различным настройкам и улучшениями, которыми хотел бы воспользоваться человек, при работе в сети Интернет.
Именно за эти качества любят Firefox. И если человек давно пользуется этим браузером, то должно случиться нечто невообразимое, чтобы он поменял браузер на что-то другое. Firefox предлагает пользователям нечто вроде чистого холста, на котором они сами могут нарисовать оболочку браузера, в которой им будет удобно работать. И именно поэтому Chrome до сих пор стоит на позицию ниже, но может быть все это временно.

Возвращаясь к нашему первому вопросу о том, насколько полноценным и удобным мы можем сделать Chrome, будучи в роли дизайнера или разработчика. Сказать честно, можно получить достаточно мощный продукт. Всего за месяц было выпущено огромное число различных дополнений как раз-таки для веб-разработчиков, и в этой статье мы постарались собрать самые лучшие и полезные расширения для создания своей собственной среды веб-разработки в Chrome.

Для того, чтобы эти расширения работали, Вам придется скачать бета канал от Google Chrome.
Вы можете скачать его здесь: Скачать Google Chrome (Beta) (Требуется Windows Vista/XP SP2+).

01. Firebug Lite

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

Если Вы серьезный разработчик, то очевидно, что Вы будете использовать Firefox и, конечно же, с расширением Firebug. Firebug предоставляет изобилие инструментов для веб-разработки, которые позволяют Вам редактировать, отлаживать и отслеживать CSS, HTML и javascript прямо на странице. Это на самом деле незаменимая вещь.

У Chrome, в свою очередь, есть альтернативный вариант, который представляет собой облегченную версию Firebug, и называется она соответственно – Firebug Lite. Она была разработана той же командой разработчиков, и она намного меньше версии для Firefox, и может лишь симулировать ту мощь, которой наделено расширение для Firefox. Но не нужно сразу воспитывать в себе предрассудок. На самом деле, функций в этом расширении, все же, достаточно для большей части разработчиков и дизайнеров.

* Скачать Firebug

02. Pendule

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

Pendule – это очень полезное расширение, которое дает Вам огромный выбор различных простых в использовании инструментов для разработки. Набор включает в себя возможность просматривать исходный код страницы, пипетки, линейки и возможность отключения CSS. А также есть некоторые инструменты для работы над изображениями: возможность прятать изображения, отображение альтернативного текста, отображение размеров и путей. А также, самое полезное – возможность проверять валидность CSS, HTML и Feeds.
Это расширение любят за его простоту, за то, что в нем нет ничего сверхъестественного, просто важные и нужны инструменты. Прекрасно!

* Скачать Pendule

03. Web Developer Mini

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

В отличие от Firebug Lite и Pendule, Web Developer Mini предлагает не такой большой ассортимент инструментов, но все же считается очень мощным продуктом. Web Developer Mini – это основное расширение для разработчиков, которое предоставляет возможность валидации CSS и HTML, возможность просмотра исходного кода страницы, а также самую любимую функцию – прямой доступ к BrowserShots (приложение для генерации скриншотов).

* Скачать Web Developer Mini

04. Speed Tracer

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

Speed Tracer представляет собой бесплатное приложение, которое помогает вычислять и исправлять проблемы производительности ваших веб-приложений. Приложение визуализирует измерения, которые берутся с медленных фрагментов, в пределах работы браузера, а затем анализирует производительность вашего приложения.
С помощью Speed Tracer, Вы сможете получить более четкую картину того, на загрузку какого фрагмента Вашего приложения требуется больше всего времени. Изображение включает в себя проблемы, вызванные парсингом и выполнением javascript, версткой, пересчетом и соотношением селекторов CSS, управлением событий DOM, подгрузкой ресурсов сети, обратных отзывов XMLHttpRequest и так далее…

Обучающее видео о Speed Tracer

Узнайте больше об одном из новейших инструментов Google Web Toolkit 2.0 - Speed Tracer. В этом видео Вам будет предоставлен обзор приложения Speed Tracer. Оно представляет собой расширение для Chrome, которое дает возможность разработчикам получать внутренние сведения браузера, предотвращая дальнейшие сложности путем диагностики и устранения скрытых проблем.


* Скачать Speed Tracer

05. PlainClothes

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

Это расширение может «раздеть» любую веб-страницу. Только представьте себе: черный текст, белый фон, непрочитанные ссылки голубые, посещенные фиолетовые, и все ссылки подчеркнуты. Ну, или же любыми другими цветами, которые Вы выберете. И весь текст отображается шрифтами, которые Вы установите по умолчанию (или как указано в “Options” > “Under the Hood” > “Change font and language settings”).
Вы можете управлять, также редактировать опции того, какие стили отменять, через окно опций (”Extensions” > “PlainClothes” > “Options”). А еще, Вы можете включать и отключать действие приложения, кликая по иконке на панели.

* Скачать PlainClothes

06. Chrome Sniffer

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

Chrome Sniffer – это расширение, которое позволяет Вам изучить веб-платформу/CMS и запущенные на сайте библиотеки javascript. Работа расширения заключается в иконке, которая отображает информацию об обнаруженной платформе. В данный момент, расширение может распознать более 25 популярных CMS и библиотек javascript, а также у разработчиков огромные планы на будущее.

* Скачать Chrome Sniffer

07. BuiltWith

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

BuiltWith – это инструмент для профилирования веб-сайтов. При просмотре страницы, BuiltWith возвращает все технологии, которые он обнаружит на странице. Цель BuiltWith заключается в помощи разработчикам и дизайнерам в поиске того, на каких технологиях была разработана страница. Эта информация сможет дать пищу для ума и помочь решить, какие способы реализации использовать в собственных разработках.

* Скачать BuiltWith

08. IE Tab

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

В одной из вкладок Chrome страница подгружается как будто в браузере IE. Иногда сайты приемлемо отображаются только в IE, и это расширение дает возможность увидеть сайт в IE, не выключая Chrome. Это расширение отлично подойдет разработчикам, кто часто тестирует работу веб-сайтов в браузере Internet Explorer, пользователям, которые часто посещают сайты с ActiveX, и тем, кто хочет проверять локальные файлы через Explorer.

* Скачать IE Tab

09. javascript Console

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

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

* Скачать javascript Console

10. Window Resizer

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

Отличное расширение, которое позволяет Вам масштабировать окно браузера, тем самым имитируя разные расширения экрана, а также расширения экрана в мобильном устройстве. А также имеется опция изменения настроек и создания собственных расширений экрана.
Ссылка на видео поддержки: Window Resizer Support.

* Скачать Window Resizer

11. META Inspector

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

META Inspector – это расширение для Chrome, которое может быть использовано для анализа мета-данных, которые обычно не видны при просмотре веб-сайтов. В общем, это приложение нужно веб-разработчикам, которым нужно проверить собственные проекты на тэги и описания, но также подойдет и тем, кто просто заинтересован в том, чтобы видеть то, что обычно не показывается на страницах сайтов.

* Скачать META Inspector

12. Aviary Screen Capture

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

С помощью Aviary Screen Capture Вы можете с легкостью делать скриншоты любой страницы и редактировать его прямо в браузере, используя приложения Aviary.
Очень полезное расширение для блоггеров и дизайнеров. С его помощью можно сделать скриншот видимой области страницы, а затем открыть полученное изображение прямо во встроенном редакторе изображений, сделать верстку (нарисовать стрелки и прямоугольники), отредактировать (вырезать, повернуть, масштабировать) и получить все цвета, используемые на странице.

* Скачать Aviary Screen Capture

13. LoremIpsumGenerator

Создаем собственную среду разработки веб-приложений при помощи расширений Google Chrome

Это простое расширение даст Вам быстрый доступ к генератору Lorem Ipsum – неотъемлемому инструменту любого веб-дизайнера.
Многие другие расширения такого типа – в других браузерах – просто усложняют эту задачу, используя на самом деле расширенный код, XHR и т.д. Основная цель этого расширения заключается в меньшем объеме кода, и помощи разработчикам или пользователям в приближении к завершению работы.

* Скачать LoremIpsumGenerator

А также полезные ресурсы о расширениях Chrome:

- Google Chrome Extensions
- Блог «The Chromium»
- Google Chrome Extensions на Google Code
- Начинаем работу с Chrome Extension Development
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Firefox, Google Chrome
Опубликовал Mysterious Master   Прочитано (раз): 10080   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031