16 полезных плагинов для интернет-маркетолога в Google Chrome. Фаербаг для хрома
19 Лучших расширений Google Chrome для вебмастера
Работа вебмастера сама по себе является очень не простой и требует много усилий. Постоянный анализ сайта, его доработка, правка кода, отслеживание позиций и другие занятия, без которых редко обходится рабочий день специалиста. Любой вариант упрощения работы, позволяет сэкономить немного времени и потратить его на личные цели или улучшение самого сайта. В этой статье хотелось бы предложить несколько полезных расширений (иногда их называют плагинами), которые можно скачать и установить на браузер Google Chrome для оптимизации своей работы.
Расширения для Google Chrome
Все официальные расширения для этого браузера можно скачать в «Web Store Chrome» выбрав нужную категорию или вбив запрос в поиск. Все расширения, описанные в этой статье, будут разбиты на три основные группы, в зависимости от рода деятельности:
- Для дизайнеров и верстальщиков
- Для владельцев блогов
- Для сео оптимизаторов
Ниже будет дано краткое описание и список полезных плагинов.
Расширения для дизайнеров и верстальщиков кода
Web Developer
С помощью данного расширения Вы сможете подробно изучить структуру сайта, без необходимости просмотра его кода. После активации плагина он покажет следующую информацию:
- Выполнит подсветку блоков div
- Отключит стили сайта в файле style.css
- Отобразит размеры изображений и их alt
Так же имеет большой выбор функций для любого верстальщика.
Eye Dropper и Color Pick
Два этих плагина позволяют определить значение цвета в любой точке на сайте. Цвет будет отображен в трех основных значениях. Так же Вы можете получить информацию о коде цвета даже для 1 пикселя.
Awesome Screenshot
Плагин предназначен для создания скриншотов экрана. Помимо стандартных настроек доступны функции по размытию элементов и их выделению.
Resolution Test
Этот плагин позволяет изменять размер браузера. С его помощью можно имитировать просмотр страницы с различных устройств и при разных разрешениях экрана. Идеально подойдет для проверки оптимизации сайта под мобильные устройства и нестандартные разрешения.
MeasureIt
С помощью данного расширения можно узнать размеры элементов, расположенных на странице (высота и ширина). Довольно удобный инструмент при подборе баннеров на сайт и т.д.
Firebug Lite
Отличный плагин, который станет незаменимым помощником для верстальщика. С его помощью можно просматривать и вносить изменения в файлы HTML и CSS. При этом сам код будет сохранен в отдельном файле, плюс Вы сможете посмотреть на страницу после ее изменения. Идеально подойдет для редактирования шаблонов сайта.
Подборка расширений для блоггера
Live Internet
Расширение, разработчиком которого является популярный счетчик посещений — Live Internet. После установки Вы сможете получать подробную статистику по каждому сайту (в случае если там установлен данный счетчик). Позволяет экономить время для анализа сайтов.
RoboForm
Отличное решение для пользователей, которые размещают комментарии на сторонних сайтах. С его помощью можно настроить быстрое заполнение стандартных полей (логин, почта, текст комментария).
Google Translate
С помощью расширения Google Translate можно переводить страницы сайта одним кликом. Хотя современный браузер большинство страниц переводит самостоятельно, этот плагин все еще пользуется популярностью.
LY
С помощью этого расширения Вы можете быстро сократить любые ссылки. Вместо длинных URL адресов будет сгенерирована компактная ссылка на страницу в интернете.
WordPress Comments Notifer
Отличное расширение для владельцев сайтов на WordPress. С его помощью можно всегда отслеживать новые комментарии на сайте, которые требуют Вашей модерации.
На панели браузера будет отображен небольшой значок, возле которого появятся цифры, обозначающие количество новых комментариев. Для первоначальной настройки необходимо установить авторизацию на блоге с помощью плагина. Так же можно задать время обновления плагина.
Расширения для SEO оптимизатора
Proxy
Небольшое расширение, использование которого позволяет переключаться между прокси адресами прямо в браузере. Вы можете добавить список имеющихся адресов и переключать их простым нажатием на кнопки. Интерфейс прост и понятен.
Site Geo IP Location
С помощью данного расширения можно отображать нахождение серверов сайта прямо в браузере. После установки просто зайдите на любую страницу и включите плагин. Будет показано место расположения его сервера.
Yandex CY
Плагин, который отображает пузомерки сайта и количество проиндексированных страниц. Показывает значения ТИЦ, PageRank (хотя он уже не актуален) и AlexaRank.
SEO Website Analysis
С помощью данного расширения можно получить подробную информацию о сайте. После запуска он проанализирует показатели сайта и отобразит их на экране. Для сбора информации используется анализатор проекта woorank.
Seo Site Tools
Еще один интересный плагин для анализа сайта. Показывает стандартные пузомерки страниц, количество проиндексированных статей и множество других показателей. Идеально подойдет для быстрого анализа сайта.
Расширение RDS Bar
Расширение которое позволяет проводить быстрый сео анализ сайта. Собирает следующую информацию:
- Показатели ТИЦ, PR, Alexa
- Количество проиндексированных страниц в Яндексе, Гугле, Бинге
- Количество входящих и исходящих ссылок
- Наличие сайта в каталогах
Domain Details
Расширение для Хрома, с помощью которого можно получить информацию о домене (IP адрес, WHOIS и другие показатели).
SEO Plus
Еще один плагин для отображения пузомерок сайта и параметров его индексации.
Loading... web-ru.net
16 полезных плагинов для интернет-маркетолога в Google Chrome
Чем отличается обычный пользователь от маркетолога, работающего в сети «Интернет»? Специалист ходит по сайтам в целях анализа, создания рекламной кампании и продвижения своего продукта. Разумеется, такие задачи были бы невыполнимы без специальных приспособлений, программ и приложений. Многие из них едва ли подойдут каждому, но часть полезных утилит действительно должна быть чуть ли не у каждого интернет-маркетолога.
1. Chrome Sniffer
Sniffer – это быстрое и удобное решение для «вскрытия» технологий, которые использовались при создании ресурса. Расширение производит поиск и показывает данные по сайту – движок, frameworks, библиотеки Javascript. Во внутреннем банке CS уже более 100 моделей, которые могут быть определены. Результат, в случае успешного поиска, отобразится в командной строке.
2. SimilarWeb
Сервис помогает установить источники любой страницы, а также показать множество важных данных о пользователях, что позволит увеличить поток аудитории на сайт. В функциях SimilarWeb: определение страниц, с которых человек переходит на ваш (любой) сайт, страницы, которые ищут вместе с вашим ресурсом и аналогичные страницы. Грамотный подход к работе с приложением позволит быть на шаг вперед своих конкурентов.
3. Ghoostery
Программа, защищающая ваше личное пространство на просторах Интернета. Она отслеживает и обнаруживает большинство из возможных «жучков», которые следят за активностью пользователя в сети. Ghoostery определяет более 500 крупнейших компаний, собирающих поведенческую информацию и предоставит вам отчет. Помимо этого, «призрак» способен контролировать вводимые вами данные, оставляя анонимным то, что вы хотите оставить таковым. Плагин не требует длительной установки и регистрации.
4. Google Analytics Debugger
Debugger занимается отладкой кода от Google Analytics. Это незаменимая вещь при редактировании и наличии «живых» элементов: отслеживания страниц, онлайн-торговли и многих других. Приложение анализирует код и выдает все ошибки в результате. Так что, Debugger от GA просто незаменим против всевозможных ошибок.
5. Table Booster for Google Analytics
Еще одна интересная утилита для GA. Ее суть – вывод отчетов в графической форме непосредственно в интерфейсе. Это очень удобно для тех, кому не нужны полные и громоздкие отчеты с ненужными данными, особенно когда надоедает смотреть на «тонны» цифр. В функциях table booster есть таблица, гистограмма, тепловая карта. Из других цветовых расширений стоит отметить Analytics Percentage Highlighter, который подмечает цветом количественные изменения в показателях.
6. Google Tag Assistant
Помощник по анализу тэгов на странице выполняет быструю и точную проверку ресурса, анализ данных по тегам, что позволяет определять правильность кода Google Analytics и устранить проблемы, если они присутствуют. Функции ассистента – анализ деятельности пользователя для искоренения неполадок и искажений. Он покажет, правильно ли распложены тэги на вашей странице, составит отчет и предложит правильную версию.
7. Yandex Wordstat Helper
Для каждого маркетолога, сеошника и копирайтера, работающего с Yandex Wordstat просто необходим персональный помощник, которым и является Yandex Wordstat Helper. Приложение значительно ускоряет работу с ключевыми словами. В его полезные функции входит сортировка, быстрое копирование, составление таблицы, проверка на дублирование, счетчик количества, а также добавление и удаление слов. Кроме того, помощник отображает любые действия. Таким образом, программа значительно облегчает ваш труд с Вордстат.
8. Alexa Traffic Rank
Простое, но полезное приложение подсчитывает популярность каждого сайта относительно всех остальных сайтов в Интернете и предоставляет данные в виде рейтинга. Это позволяет определить потребности и нарастить активную аудиторию на вашем сайте. Единственным минусом является то, что учитываются пользователи, имеющие toolbar от Alexa. Альтернативным вариантом будет статистика от LiveInternet.ru, которая, в отличие от первой, рассчитана в первую очередь на рунет. Также оба электронных агрегата показывают и внутреннюю статистику сайта.
9. Яндекс.Метрика
Каждому уважающему себя Интернет-маркетологу знакомо приложения Яндекс.Метрика, которое играет огромную роль в построении и оценке эффективности работы сайта, рекламных кампаний. Метрика показывает полную статистику активности, деятельности на вашем сайте, а также помогает привлечь новую аудиторию, благодаря отображению ключевых и популярных поисковых запросов, комбинаций и многого другого. Подобные функции есть у устанавливаемого расширения Page Analytics от Google.
10. Mozbar
Seo-плагин Mozbar позволяет маркетологам анализировать сайт и ссылки, непосредственно, находясь на странице. Главные преимущества программы – возможность анализа выдачи результата поисковыми системами, полный анализ сайта и ссылок. В него также установлено создание определенных профилей по городам/регионам, что упрощает работу с локальными ресурсами. Аналогами утилиты являются Seoquake, META SEO inspector, RDS bar.
11. PageSpeed Insights
Отличное приложение для маркетологов, разработчиков и всех остальных, кто причастен к созданию и функционированию сайта. Оно измеряет скорость загрузки страницы, что позволяет отладить оптимизацию своего ресурса. При этом отдельно измеряется полная и мобильная версия, а также время от клика до загрузки верхней полосы и до полной загрузки. Результат складывается в 100-балльную систему, чем выше результат, тем лучше. Помимо анализа, PageSpeed Insights предлагает и свои пути решения проблем со скоростью загрузки, если таковые имеются.
12. Firebug Lite for Google Chrome
Firebug предназначен для работы с исходниками сайтов. Он визуализирует html и dom элементы, показывает блоки и дает возможность редактировать свойства CSS. При этом Firebug Lite for Google Chrome интегрирован с инструментарием браузера, он может быть включен или выключен всегда или активирован исключительно для определенных доменов. Наиболее распространенными аналогами считаются Chrome Developer Tools и Web Developer, которые позволяют быстро и комфортно просмотреть и изменить исходники сайта.
13. Edit This Cookie
Edit This Cookie – это уникальный, по своей природе, менеджер куки. Теперь вся информация и данные могут быть легко защищены, так как приложение создано для поиска, защиты, блокировки, добавления, изменения и удаления ваших cookies.
14. Pushbullet
Относительно новое приложение, которое повышает продуктивность с помощью синхронизации устройств. Pushbullet знаменит своей «бесшовной» интеграцией между смартфоном, ноутбуком, планшетом и компьютером. Синхронизации поддаются фотографии, файлы, ссылки, уведомления. Причем платформа устройств не играет роли, программа подходит для разных систем. Грубо говоря, приложение создает единый организм из всех устройств, что позволяет увеличить продуктивность их использования.
15. Context Menu Search
Эта утилита занимается поиском выделенной фразы в разных системах. Результат можно найти в любой из выбранных в меню систем, даже в таких как Yahoo, Wikipedia, Bing и многих других.
16. Работа в социальных сетях
Социальные сети – один из крупнейших механизмов для продвижения сайта, рекламы, продукции. Поэтому многие приложения создаются сразу для них. PromoRepublic облегчает такое продвижение. В нем предусмотрены готовые шаблоны на каждый день, встроенный редактор, анализ эффективности, автоматический и множественный постинг. Hootsuite призван управлять всеми социальными медиа, создавать автоматические рассылки и изучать эффективность. Еще одной полезной программой для «расшаривания» является Shareaholic for Google Chrome.
acades.by
16 расширений, которые превратят ваш браузер в хакерский инструмент
В наше время для того, чтобы выполнять аудит и взаимодействовать с любыми удаленными сервисами уже не требуются какие-либо специальные «хакерские программы». Благодаря специальным расширениям современные браузеры позволяют заменить собой целый набор утилит, при этом совершенно не вызывая подозрений. В этой статье мы рассмотрим соответствующие дополнения для Chrome, однако их аналоги можно найти и для Firefox, и для Opera, и для других браузеров.
Важно! Выполнение аудита безопасности подразумевает получение предварительного согласия владельца ресурса и в большинстве случаев требует наличия лицензии. Без них можно тестировать только собственный сайт. Автор статьи и блог АЛЛО не несут ответственности за любой вред, причиненный необдуманным использованием описанных расширений.
IP Address and Domain Information
Перед тем, как совершить какую-либо операцию, важно все тщательно изучить и разведать. В этом нам поможет расширение сайта TCPIPutils.com. Расширение позволяет увидеть IP-адрес запрашиваемого ресурса, который может предоставить множество интересной информации о веб-странице, домене и о провайдере, на хостинге которого этот ресурс размещен. Удобно, что на отдельной вкладке можно посмотреть свой текущий адрес IP.
Установить расширение “IP Address and Domain Information” из магазина Chrome:
Shodan
Следующим этапом после просмотра записей из открытых баз официальных регистраторов является проверка сайта через теневой поисковик Shodan. Этот поисковик покажет владельца IP-адреса на карте, выдаст список открытых портов и сервисов на них, включая номер версии. Бесплатное расширение доступно как на сайте,так и в магазине Chrome.
Установить расширение “Shodan” из магазина Chrome:
Port Scanner
Еще больше узнать об открытых портах на удаленном узле и выяснить их состояние в данный момент может помочь расширение с незамысловатым названием Port Scanner. Автором расширения является программист из Индии Ашок Мунишвара. Находясь на одной странице, расширение позволяет сканировать сервер совершенно другой. Отдельными кнопками задается сканирование только открытых или наиболее уязвимых (часто используемых троянами) портов. Диапазон TCP-портов также задается вручную. Для удобства введенные адреса запоминаются — потом их можно выбрать из всплывающих подсказок по мере ввода.
Установить расширение “Port Scanner” из магазина Chrome:
Proxy SwitchyOmega
Сканирование портов со своего IP-адреса может оказаться не самой лучшей идеей. Многие серверы оснащаются продвинутыми брандмауэрами и системами предотвращения вторжения, которые могут отреагировать на опрос портов, как на начало атаки. После этого Ваш IP как минимум занесут в черный список (как максимум — Вас могут навестить и предложить ответить на пару вопросов). Избежать всего этого помогут анонимные прокси. Среди множества вариантов расширение Proxy SwitchyOmega (ранее известное как Proxy SwitchySharp) позволяет настроить все быстро и легко. Расширение устанавливается в два клика и после настройки работает по заданным параметрам в автоматическом режиме.
Установить расширение “Proxy SwitchyOmega” из магазина Chrome:
EditThisCookie
На сегодняшний день практически каждый сайт норовит присвоить Вашему компьютеру временный идентификатор, который сохраняется в куки вместе с другими демаскирующими Вас параметрами. С установкой расширения EditThisCookie у Вас появляется простая возможность управлять всеми «печеньками». Менеджер отображает только куки, относящиеся к активной веб-странице, поэтому их можно быстро находить без ручных фильтров, удалять, защищать от удаления, блокировать и даже править в отдельном окне.
Установить расширение “EditThisCookie” из магазина Chrome:
The Exploit Database
После того, как Вы собрали все разведданные о каком-либо сайте, следующим этапом станет поиск на нем уязвимостей. Расширение The Exploit Database предоставляет удобный доступ к большой постоянно обновляемой базе эксплоитов из архива Offensive Security. По умолчанию обновления проверяются каждые пять минут, а все новые уязвимости сортируются по дате, типу, автору и описанию. Установить расширение можно из магазина Chrome. Оно отлично работает в паре с приложением GHDB, о котором мы поговорим далее.
Установить расширение “The Exploit Database” из магазина Chrome:
GHDB (Google Hack Data Base)
GHDB (Google Hack Data Base) — это приложение для Chrome с быстрым запуском из панели. В нем собраны примеры хитрых запросов, которые позволяют быстро отыскать через Google сетевое оборудование и веб-платформы с известными уязвимостями. В отдельный раздел включены типовые запросы для систем видеонаблюдения, сетевых камер и принтеров. Также свой раздел получили процедуры поиска встроенных учетных записей и специфических ошибок. На двух последних вкладках собраны разные примеры — от поиска директорий с набором ценных данных до конфигурационных файлов Cisco PIX. Интересно, что Google спокойно позволяет установить GHDB прямо из собственного магазина.
Установить расширение “GHDB (Google Hack Data Base)” из магазина Chrome:
XSS Rays
Расширение XSS Rays является мощным инструментом для тестов на проникновение с использованием XSS-атак. Оно включает в себя сканер уязвимостей, инспектор скриптов, инжектор форм, менеджер событий, а также функции обратной разработки. Расширение может извлекать любые формы и даже позволяет редактировать их на лету, не меняя исходный объект. Умеет выполнять продвинутый поиск по ключевым словам, причем не только в теле HTML-страниц, но и в скриптах и внешних обработчиках событий. Расширение XSS Rays помогает разобраться в структуре сложных сайтов и понять, как происходит обработка любой отображаемой или скрытой формы.
Установить расширение “XSS Rays” из магазина Chrome:
HPP Finder
Расширение HPP Finder в незаметном режиме выполняет фоновую проверку сайта в активной вкладке. Оно ищет элементы веб-приложений, подверженных уязвимости HTTP Parameter Pollution. Во многих случаях атака по типу смешения границ параметров дает возможность обхода WAF и выполнения SQL-инжектов. Она работает там, где блокируются методы XSS. Подозрительные с точки зрения WAF запросы в таких элементах расщепляются на безобидные фрагменты, которые из-за особенностей обработки склеиваются в одну команду за счет использования одноименных параметров. HPP Finder использует метод, обнаруженный несколько лет назад, однако найденная уязвимость затрагивает фундаментальные недостатки RFC3986 и потому актуальна до сих пор.
Установить расширение “HPP Finder” из магазина Chrome:
Firebug Lite for Google Chrome
Firebug обеспечивает визуальный анализ исходного кода веб-страниц, таблиц CSS, скриптов и объектов DOM с возможностью исправлять содержимое каждой секции. При переходе по разным фрагментам кода соответствующие ему элементы страницы выделяются цветовой рамкой. Firebug помогает выяснить, как работает веб-приложение, а также провести его аудит. Это одно из немногих расширений, которое можно загрузить, но нельзя запустить на странице магазина Chrome из соображений безопасности.
Установить расширение “Firebug Lite for Google Chrome” из магазина Chrome:
d3coder
Часто при анализе содержимого веб-страниц и скриптов Вы можете увидеть данные в формате Base64, ROT13 или другой кодировке. Также может понадобиться перевести в читаемый вид временные метки из разных систем отсчета, раскодировать URI/URL или посчитать какой-нибудь хеш. Со всеми этими задачами поможет справиться расширение d3coder. Оно вызывается из контекстного меню и обладает хорошим набором функций, но его интерфейс еще далек от совершенства. Например, результаты работы расширения часто отображаются во всплывающем окне без возможности выделения и копирования.
Установить расширение “d3coder” из магазина Chrome:
Form Fuzzer
Form Fuzzer – это необычный инструмент для работы с формами любого типа, включая скрытые. Расширение автоматически наполняет их заданным текстом или случайным набором символов определенной длины, чтобы можно было проверить их дальнейшую обработку на сайте. Form Fuzzer умеет отмечать чекбоксы, переключать «радиокнопки» и проверять другие интерактивные функции веб-страницы, а также имеет множество настроек. Form Fuzzer часто используется для ускорения XSS-атак и SQL-инжектов, однако не смотря на это расширение можно свободно скачать в магазине Chrome.
Установить расширение “Form Fuzzer” из магазина Chrome:
Request Maker
Это расширение используется для отправки стандартных или измененных запросов на сервер и анализа ответных пакетов. Может применяться для подмены URL и модификации заголовков писем и поддерживает работу с формами. Также расширение может пригодиться для атаки на веб-приложения путем изменения HTTP-запросов. По умолчанию Request Maker запускается из меню «Дополнения» при нажатии кнопки «Параметры». Под каждым пунктом настроек расширения встроена мини-справка.
Установить расширение “Request Maker” из магазина Chrome:
iMacros for Chrome
Расширение iMacros экономит время, позволяя полностью автоматизировать рутинные операции. Например, если Вам часто приходится повторять одни и те же действия на разных страницах сайта, iMacros может записать их и воспроизводить с заданными настройками. В базе примеров уже есть типовые задачи, на которых можно легко создать собственные.
Установить расширение “iMacros for Chrome” из магазина Chrome:
Web Developer
Web Developer является очень удобным средством для быстрого изменения настроек. Расширение умеет в один клик активировать и отключать плагины, обработку JavaScript, вывод уведомлений и всплывающих окон. Web Developer имеет отдельные вкладки для управления cookies, CSS, интерактивными формами и загрузкой картинок. В разделе Tools содержится вьювер исходного кода веб-страниц и восемь инструментов валидации через внешние веб-сервисы, к которым можно добавить свои.
Установить расширение “Web Developer” из магазина Chrome:
Panic Button Plus
Хакер «со стажем» успевает уничтожить ноутбук еще до того, как его арестуют, такие кардинальные меры уже в прошлом. Иногда достаточно будет просто спрятать вкладки от коллег, оставив безобидную страницу Google. Сделать это при помощи всего одного клика поможет кнопка Panic. Повторная активация кнопки вернет все вкладки на свои места, поэтому не лишним будет добавить в настройках парольную защиту.
Установить расширение “Panic Button Plus” из магазина Chrome:
blog.allo.ua
Firebug и аналоги | KV.by
Общий обзор встроенных средств отладки веб-страниц и веб-приложений
Исправление ошибок - необходимое условие любой работы, будь то написание статьи в газету или создание веб-сайта. В компьютерную эпоху работа над ошибками давно автоматизирована. Например, для исправления грамматических ошибок есть спеллчекр в офисном редакторе теста, что помогает пишущей братии писать романы, повести, статьи, даже, можно сказать, не зная всего алфавита. Есть подобные средства и для писателей гипертекста - веб-разработчиков. Примером самого популярного такого средства сейчас является расширение Firebug для Firefox.
Первым делом Firebug
Firebug стал одним из самых любимых приложений для веб-дизайнеров и программистов. Популярность этого расширения, в свою очередь, вынудила создателей конкурирующих браузеров также включить аналогичную функциональность и в свои веб-обозреватели. Но так как Firebug, как говорится, сейчас "законодатель мод", то в этой статье сначала познакомимся с ним, а потом уже на его фоне рассмотрим аналоги в других браузерах.
Firebug создан программистом Джо Хевиттом и, как мы уже говорили, предназначен для инспекции ошибок веб-страниц - разметки HTML, стилей CSS, сценариев JavaScript. Также при помощи этого расширения можно оценить проблемные места при загрузке страницы в браузер.
Firebug (getfirebug.com) устанавливается как расширение для Firefox. После установки в правом нижнем углу браузера появится иконка жука, кликнув на который, внизу обозревателя откроется специальное окно. В зависимости от режима работы, с правой стороны может появляться второе дополнительное окно. Firebug может запускаться и как самостоятельное приложение, что удобно для обладателей двух мониторов.
Основных режимов отладки шесть - это HTML, CSS, JavaScript, консоль, DOM и сеть. Для каждого из режимов предусмотрена в главном меню веб-отладчика своя собственная вкладка. Кстати, Firebug русифицирован.
Рассмотрим работу в каждом из режимов подробнее.
Отладка HTML. Инспектировать HTML-страницу при помощи Fireburg - одно удовольствие. Нажимаем в главном меню иконку со стрелочкой, наводим курсор на элемент веб-страницы, и тут же в окне HTML появится подсвеченный код этого элемента. И уже не нужно мучительно долго искать глубоко скрытый в коде проблемный элемент. Также в правом вспомогательном окошке появятся дополнительные сведения о стиле, расположении элемента и его свойствах DOM.
Содержимое подсвеченного элемента лёгким движением руки можно тут же отредактировать и сразу же увидеть произведённые изменения.
Поддерживается сворачивание ("фолдинг") кода. Также "Огнежук" позволяет активно использовать кнопки Tab и "вверх-вниз". Tab используется для перемещения по атрибутам элемента при редактировании. А при помощи клавиш "вверх", "вниз" можно переключать значение атрибутов. То есть Firebug увеличит или уменьшит значение числового атрибута на 1, если нажать, соответственно, "вверх", "вниз".
Важным является специальная вкладка в дополнительном вторичном окне под названием "Макет". Каждый элемент веб-страницы содержится в последовательно вложенных контейнерах margin, border, padding. Вкладка "Макет" отражает в виде символических разноцветных прямоугольников сами эти контейнеры. Изменять их значения можно точно так же, как и значения других элементов html, и тут же видеть, как меняется при этом вид страницы.
Редактирование CSS. Ремонтировать стили CSS можно как во вторичном окне режима HTML, так и в отдельном собственном режиме. Редактирование CSS тоже очень удобное: здесь можно и нужно пользоваться клавишами "вверх- вниз". Это позволяет изменять не только значения селекторов CSS, но и сами селекторы, так как Firebug содержит полный словарь ключевых слов каскадных таблиц стилей.
Любое свойство CSS можно быстро отключить и обратно включить, нажимая появляющуюся слева при наведении курсора на CSS-свойство серенькую кнопку.
При наведении курсора на свойство цвета или изображения появляется маленькое окно просмотра этого цвета или картинки. Причём в случае изображения отображаются его размеры.
Режим сети. Данный режим позволяет инспектировать время загрузки всех файлов, составляющих веб-страницу. Это и загрузка баннеров, картинок, js-сценариев, файлов стилей. Очень важным является возможность просмотреть загрузку по каждому отдельному файлу.
"Огнежук" демонстрирует график загрузки по каждому файлу. На графиках разными цветами будет отображаться время http-запроса, время получения данных, время ожидания данных.
Для каждой загрузки можно посмотреть http-заголовок, кликнув на крестик рядом с каждым запросом.
Отладчик JavaScript. Firebug - это мощный отладчик для сценариев JavaScript. Для этой отладки существует специальный отдельный режим "Сценарии". Здесь имеется возможность устанавливать брейкпоинты одним кликом на номере строки кода. Причём брейкпоинты могут быть условные, то есть, например, срабатывать только при нажатии кнопки на странице.
При отладке во время точек останова в дополнительном окне будет демонстрироваться стек вызовов функций, что ждут возврата. А во вкладке "Наблюдения" дополнительного окна отобразятся значения объектов DOM.
Консоль. Очень классная вещь. Консоль Fireburg - это практически как bash в Linux. Представляет собой командную строку. Здесь можно набирать и выполнять команды JavaScript как по отдельности, так и целыми сценариями.
Причём консоль Firebug имеет собственные специальные команды. Например, имеется команда console.log, что похожа на printf в "си":
>>> console.log("Hello, world!") Hello, world!В консоли есть очень важная функция - профилировщик. Этот инструмент помогает измерить производительность сценария. В режиме консоли нужно просто кликнуть на соответствующей кнопке, и, перезагрузив страницу, кликнуть на кнопке "Профилировать" ещё раз. В результате будет выведен детальный отчёт о времени работы каждой функции вашего js-сценария.
Режим DOM (Document Object Model). Объектная модель документа - это то, во что браузер внутри себя превращает загруженную веб-страницу. DOM - это программный интерфейс, позволяющий сценариям JavaScript производить изменения в видимом окне браузера. Окно этого режима Firebug содержит иерархию объектов веб-страницы и позволяет ими манипулировать в реальном времени на лету, не прибегая к услугам той же консоли.
И ещё одной главной фишкой Firebug являются расширения, которым стоит посвятить отдельную статью. Как и сам браузер Firefox, "Огненный жук" может увеличивать свои возможности за счёт дополнительных расширений, начиная с подсветки синтаксиса и заканчивая встроенным справочником HTML. Эта возможность расширений и делает на текущий момент Firebug беспрекословным лидером, по сравнению с другими браузерами.
Альтернатива
Конечно же, конкуренты Firefox тоже не сидят сложа руки, активно работают в этом направлении и предлагают в своих браузерах аналогичную Firebug функциональность. Эта функциональность постоянно совершенствуется, так что приведённые ниже описания, возможно, уже устареют даже на момент выхода этого номера газеты. Поэтому буду краток и обойдёмся без холиварных сравнений.
MS Internet Explorer 8. Аналог Firebug в IE 8 по своему функционалу повторяет большую часть режимов расширения Firefox. Имеется режим HTML с фолдингом и CSS, позволяющий одним кликом выбрать нужный для редактирования элемент на странице, а также наблюдать за изменениями в реальном времени. Имеется дополнительная раскладка - аналог вкладки "Макет". Однако "юниксовые" клавиши tab "вверх-вниз" не задействованы.
Для отладки JavaScript есть соответствующие режимы "Сценарий" и "Профиль". Консоль тоже присутствует скромненько в дополнительной вкладочке. Однако команды console.log не поддерживаются. Возможно, пока не поддерживаются. И весьма досадно, нет режима "Сеть", позволяющего оценить скорость загрузки веб-страницы. Также нет удобного инструмента для инспекции DOM.
Однако есть в средстве разработки IE 8 переключение режимов обозревателя между движком IE 7 и IE 8. Для многих веб-дизайнеров это важная функция.
Apple Safari. Браузер Safari также может похвастать средством, аналогичным Firebug, причём более стильным по дизайну, чем неказистый IE 8. Имеется просмотр HTML, CSS, "Макета элементов". Но навигация и поиск нужного элемента исключительно внутри html-кода. Редактирование атрибутов найденного элемента тоже весьма примитивное без клавиш tab "вверх-вниз". Но имеется при этом просмотр и изменения свойств DOM элемента.
Режим "Сеть" присутствует. Присутствует отладка и профилирование JavaScript. И имеет место быть продвинутая консоль с автодополнением, а также командой console.log.
Google Chrome. Средство разработки в "Хромом" практически аналогично по внешнему виду аналогу из Apple Safari. В третьей версии "гуглобраузера" данная функциональность сильно урезана. Есть только просмотр кода, режим "Сеть" и консоль. Но можно сказать, что средства отладки Google Chrome и Apple Safari будут полностью идентичны и внешне, и внутренне, так как используют один и тот же движок WebKit.
Opera Dragonfly. "Стрекозоид" браузера Opera практически повторяет интерфейс "Огненного жука" с главным и дополнительным окном. Просмотр html-кода и стилей осуществляется в единой закладке DOM. Присутствует "фолдинг" кода. При этом в дополнительном окне присутствует и функциональность, обеспечиваемая клавишами tab и "вверх-вниз", как и в Firebug. Вкладка "Контейнер" носит только информационный характер.
Консоль присутствует и содержит командную строку, что позволяет выполнять сценарии JavaScript в интерактивном режиме. Имеется отладчик и логирование выполнения сценария. Однако отсутствует фича console.log.
В режиме "Сеть" графики загрузки отдельных файлов веб-страницы содержат только время непосредственной загрузки и ожидания - что, в принципе, для большинства случаев достаточно.
Таким образом, альтернативы уступают в функциональности и удобстве Firefbug, но, как говорится в таких случаях, вполне сойдут для сельской местности. Первое же знакомство со встроенными в браузеры средствами отладки стоит однозначно на данный момент начинать с Firebug для Firefox.
Михаил АСТАПЧИК
www.kv.by
15 расширений для Google Chrome, полезных для разработчиков сайтов
Перевод: Редакция Optimization, Сентябрь 19, 2012
Версия для печати
Браузер Google Chrome – отличный выбор для дизайнеров и веб-девелоперов. С помощью расширений для GoogleChrome, вы можете добавить больше функций, которые могут помочь в дизайне, поиске ошибок и остальных работах с сайтом. Здесь мы представляем лучшие расширения для Chrome, предназначенные для дизайнеров и разработчиков.
1. Firebug Lite (для Google Chrome)
Firebug Lite (для Google Chrome) – расширение, встраивающее Firebug Lite в браузер. Хотя встроенный инструмент Developer Tools в Chrome предоставляет вам примерно те же функции, что и Firebug (и даже больше), старые фаны Firebug будут рады этому расширению, поскольку оно облегчает поиск багов и тестирование при работе в Chrome.
2. Web Developer
Панель инструментов Криса Педерика (Сhris Pederick) Web Developer – давний фаворит веб-дизайнеров и девелоперов. Он был изначально разработан под Firefox, а затем перемещен в Chrome со слегка приглаженным интерфейсом.
Панель содержит море опций для изучения строения вебсайтов. В частности, она отображает порядок расположения блок-элементов, информацию о стилях CSS для определенных элементов, контролирует кэш браузера, и тому подобное. Для более подробного описания особенностей работы с панелью инструментов Web Developer, смотри посты ниже:
3. Resolution Test
Resolution Test – это расширение предназначено для проверки веб – страниц при различных разрешениях экрана, при этом вы можете задать собственные параметры разрешения. Этот инструмент очень удобен для того, чтобы проверить как ваш дизайн смотрится на мониторах разного размера.
4. Pendule
Pendule расширяет функции встроенных в Google Chrome инструментов. Благодаря данному расширению пользователи располагают множеством дополнительных возможностей, таких как: оценка ограничительных тегов с использованием автоматических веб-сервисов W3C, скрытие изображений на странице, просмотр скриптов, встроенных в страницу, а также многих других.
5. Plain Clothes
Plain Clothes делает хорошо только одну вещь – она удаляет все CSS на странице. Одним из излюбленных способов оценки доступности веб страницы является удаление стилей CSS и сопоставление читабельности страницы со стилями и без них. Такой подход симулирует ситуацию, при которой у пользователя на экране страница отображается лишь частично и они могут полагаться только на теги страницы для того, чтобы получить доступ к контенту.Хотя эта программа была изначально создана для тестирования веб — страниц, вы можете использовать ее для просмотра любимых стилей в «нестилизованном» виде (так что ваш босс не поймает вас за просмотром Digg в тот момент, когда вам надо заканчивать функцию на JavaScript).
6. Image Cropper
Если вы хотите вырезать определенные части веб — страницы, Image Cropper – ваш очевидный выбор. Эта программа проста как палка и не имеет финтифлюшек. Просто укажите область, которую хотите вырезать, и приложение ее заберет. Нужна точность вплоть до пикселя? Расширение отображает размеры и расположение вырезанных вами фрагментов, так что вы можете подобрать необходимый размер.
7. Lorem Ipsum Generator
Это расширение может гордиться своей минималистичностью и простотой – и это хорошо, потому что нет никаких причин усложнять создание текстов Lorem Ipsum. Lorem Ipsum generator позволяет вам заполнять текстом рамки при дизайне вашего сайта для презентаций.
8. IE Tab (для Windows)
Выявление багов в рамках движка Internet Explorer Trident – совсем невеселое занятие. Используя IE Tab, вы как минимум можете сэкономить немного времени и не использовать Internet Explorer (не говоря уже о том, что у него маловато расширений) для поиска проблем с рендерингом.
9. jQuery Shell
jQuery Shell позволяет вам прогонять команды JavaScript и jQuery в контексте открытой веб страницы. Очень полезное расширение для изучения и экспериментирования с jQuery.
10. Color Picker
Это приложение – мастер одного трюка. Трюк состоит в том, что программа позволяет быстро получать значения Hex и RGB любого цвета на любой веб странице. Эта функция может вам пригодиться в том случае, если нужно определить, какие цвета использует ваш любимый вебсайт без использования фотошопа и его инструмента Eyedropper.
11. WebEdit
При помощи функции WebEdit, вы можете сделать любую страницу доступной для редактирования (при этом внесенные вами изменения, разумеется, сохранены не будут). Ну и зачем вам тогда это? А вот зачем: если вы создаете веб — сайт и хотите поиграться с элементами без существенных изменений кода, это приложение вам очень пригодится.
12. Chrome Sniffer
Вам никогда не хотелось узнать, какие технологии, структуры и приложения с открытым кодом использует конкретный вебсайт? Опытные разработчики могут ответить на эти вопросы, изучая исходный код, но если вам бы хотелось получить ответ быстрее и легче, то испытайте Chrome Sniffer. Chrome Sniffer перечисляет все известные структуры/библиотеки JavaScript (jQuery, MooTools, etc.) и CMS (Drupal, WordPress, etc.), которые используются вебсайтом.
13. Webpage Screenshot
Веб — дизайнерам часто приходится делать скриншоты страниц. При помощи Webpage Screenshot, вы можете захватить всю страницу, даже если она выходит за рамки окна браузера. Эта программа позволяет также изменить размер окна до того, как страница будет «сфотографирована» и сохраняет полученное изображение в виде файла с расширением PNG.
14. Eye Dropper
Eye Dropper – расширение для Google Chrome, которое позволяет определять цвет на любой веб-странице. Более того, программа выдает цветовое «колесико» и образцы цветов (которые можно найти в любой графической программе), так что вы может экспериментировать и манипулировать с цветами для выбора нужного.
15. SEO Site Tools
Правильно построенная веб-страница с хорошей разметкой в конечном итоге приводит к тому, что у странички будут впечатляющие результаты в поисковиках. Однако, если вы бы хотели оценить ваш вебсайт с точки зрения известных параметров оптимизации для поисковых серверов, то вам стоит попробовать SEO Site Tools – расширение, которое предлагает вам огромный спектр полезных инструментов и функций для оценки SEO. Оно может считать массу параметров на странице и вне ее, получить информацию из социальных СМИ и все такое прочее.
Оригинал статьи: sixrevisions.com
www.optimization.com.ua
10+ классных расширений для браузера Google Chrome
Всем привет. Я давно уже перешел с Мазилы на Google Chrome, поэтому, думаю, будет очень хорошим знаком периодически писать о разных приложениях для Хрома. Конечно, многие вебмастера сегодня все еще используюсь по привычке Mozilla Firefox. А еще используют по той причине, что в Хроме не могут найти замену некоторым приложениям. Я тоже так думал в свое время, но должен сказать, что это ошибочное мнение. На самом деле есть замена всем приложениям, можете не сомневаться. Я здесь их все, конечно, не смогу описать, но кто его знает, быть может, среди того что я опишу сегодня, и буду описывать в будущем, вы найдете те плагины, которые вам понадобятся.
Здесь в статье я уже не ставил прямые ссылки на эти расширения, но вы их легко найдете через поиск Web Store Google. Так что с этим проблем нет.
Для Верстальщика
Pendule
Если вы не верстальщик, то вам, может, и не особо пригодится это приложение. Но если все-таки вы – верстальщик, то для вас это будет просто незаменимое приложение. Что можно делать при помощи Pendule:
-
Можно посмотреть полностью весь CSS код сайта. Бывает, что код сжат, поэтому можно преобразовать его в читаемый вид
-
Можно посмотреть коды всех цветов, которые используются на сайте. При желании можно определить цвет в отдельно взятой точке
-
Удобная работа с формами ввода на сайте. Сюда можно отнести отключение, включение кнопок и т.д.
-
Менять разрешение экрана. Это нужно для того чтобы проверить верстку под разные размеры мониторов
Вообще данное расширение – отличный комбайн, который пригодится любому вебмастеру. Я думаю, что оно подойдет каждому вебмастеру.
IE Tab
Бывает так, что нужно просматривать веб-страницы в разных браузерах. Это расширение способно решить проблему открывания веб-страниц разными браузерами. С его помощью можно не открывать IE, а посмотреть веб-страницу именно «глазами» IE через Google Chrome. Тоже очень удобная штука.
Code Cola
При помощи данного расширения можно редактировать основные стили CSS3 прямо на сайте. Вы легко сможете менять тени, окружности бокса и т.д. Все это делается элементарно, путем перетаскивания ползунка. Причем, вы сразу же будете видеть эффект. После того как вы проделаете все эти манипуляции, то код, который получится в результате этого, можно скопировать и заменить в самом файле style.css.
Может, конечно, вы подумаете, что вам данное расширение не нужно. Но я рекомендую все равно скачать его. Гляньте сами. Его вообще сложно полностью описать. Просто посмотрите, что он умеет делать. В нем много полезных фишек.
Editor Lite
Это расширение выполняет функцию текстового редактора с возможностью вставки заготовок html и css. То есть, если нужно куда-нибудь что-нибудь вставить, то теперь не нужно набирать код в блокноте.
Firebug Lite for Google Chrome
Еще одна полезная штука. Сам ей активно пользуюсь. Только дело в том, что нужно тщательно покопаться в настройках, пока разберешься. В этом расширении немеряно функций, уж вы мне поверьте. Можно просматривать код элементов или целых веб-страниц прямо в браузере, смотреть IP, другие гео-данные и многое другое. В общем, рекомендую!
ColorZilla
У меня раньше была часто проблема, когда нужно было определить html код цвета. Скачал для этих целей себе маленькую программу. Но бывает так, что ты работаешь прямо в браузере, и цвета необходимо определять прямо с веб-страниц. Поэтому с помощью данного расширения можно подобрать коды цветов прямо в браузере. Можно просто выбирать цвета из палитры, а можно использовать пипетку, чтобы получить код элемента.
Справочники
jQuery Api Browser
Отличный справочник по jQuery в браузере. Один только минус – все на английском. Но если вы хоть немного разбираетесь в jQuery, то это расширение вам в любом случае пригодится.
PHP documentation
Справочник по PHP от всем известного сайта php.net. Пользоваться достаточно просто. Вы вписываете незнакомый класс или что-то похожее, а плагин просто сразу перенаправит вас на справку по нему на указанный выше сайт.
Для Оптимизатора
Статистика сайтов от LiveInternet.ru
В рунете вебмастера активно используют статистику сайта LiveInternet. С помощью этого расширения можно видеть статистику LiveInternet. Ну, если она, конечно, есть на сайте. Нужная штука, но ставить ее стоит если браузер сильно не загружен приложениями. Во всяком случае, я так считаю.
Rds bar
Я бы сказал, что это один из самых нужных плагинов для сеошников. Один только минус в нем. Долгое время сам проект находился в бета-тестировании, и пополнить внутренний баланс в системе было проще простого. Просто писал администрации, и они пополняли внутренний баланс. А теперь все, халява закончилась. Они вышли из бета-тестирования, и теперь за пользование плагином нужно платить. Возможностей много: ТИЦ, PR, кол-во проиндексированных страниц в поисковиках, Alexa Rank, и множество других параметров.
Yandex TYC + Google PR indicator
Отображение элементарных вещей – ТИЦ и PR сайта.
Полезное
Word Count
Данное расширение призвано решать одну простую задачу – показывать объем выделенного текста. Показывает сколько слов, и сколько символов. Подойдет всем тем, кто заказывает тексты, и, разумеется, для копирайтеров тоже.
Google Tasks
Своеобразный ToDo лист для браузера. Можно самому себе давать задания, и делать отметки о их выполнении.
Goo.gl URL Shortener extension
Кто начинал пользоваться твиттером еще на заре его становления, тот помнит, что тогда для сокращения ссылок очень активно пользовались сервисом bit.ly. Сейчас у него появилось много конкурентов. В том числе сервис сокращатель ссылок от Google – goo.gl. Данное расширения создает быстрые ссылки для любой страницы, на которой вы его запустили.
StayFocusd
Если вы любите бездельничать, а потом удивляетесь, что у вас ничего не сделано, то данный плагин для вас. С его помощью можно заблокировать сайты, которые мешают вам работать. Либо установить время, которое вы можете посещать данные сайты. Например, любите вы торчать целый день ВКонтакте. Да так любите, что в конце дня оказывается, что ничего полезного не сделали. С помощью плагина можно ограничить время доступа к ВКонтакте. Например, поставить доступ на 10 минут, после чего сайт заблокируется, и вы не сможете попасть на него в этот день. Понимаю, звучит, может, и абсурдно, но все-таки для определенной категории людей может быть достаточно полезно.
AdSense Publisher Toolbar
Подойдет всем тем, кто работает с Google AdSense. С помощью этого расширения можно смотреть информацию о заработке в этой системе не заходя в аккаунт AdSense.
В частности, с помощью плагина можно узнать:
-
Сколько заработано средств за сегодня
-
Сколько заработано за вчера
-
Сколько заработано за месяц
-
Общий не выплаченный остаток средств на аккаунте
Stats Checker for Google Analytics
С помощью плагина можно получать статистику Google Analytics прямо из панели браузера. Информация по посещаемости, среднему времени пребывания на сайте, показателю отказов. Ну вот, пожалуй, и все. Не забывайте подписываться на RSS блога, потому что впереди вас ждет еще много чего полезного.
seobid.net
