Перейти к содержимому

Реферальная программа Мегаплана


Разбор основных инструментов для разработчика сайтов

#1 EPashkov

EPashkov
  • Пользователь
  • 8 сообщений
  • Репутация: 2
0

Отправлено 22 Октябрь 2012 - 05:23

Разработка сайта - достаточно трудоемкий процесс не зависимо от того, какую систему управления контентом вы используете. Однако, существует множество инструментов, способных значительно облегчить процесс разработки. Для удобства я разделил эти инструменты на несколько категорий:
  • Браузер и дополнения к нему;
  • Утилиты (текстовые редакторы, FTP-клиенты и т.д.);
  • Среды разработки;
  • Веб-сервер Apache и модули;
  • Приложения для администрирования баз данных;
  • Онлайн-сервисы и др.
В этой статье речь пойдет о дополнениях Firefox для разработчиков. Прочитав статью, вы узнаете о средствах разработки, которые позволят ускорить процесс верстки страниц, отладить скрипты, проанализировать сетевой трафик и т.д.

Браузер
Прежде чем перейти к обзору дополнений, хочу обратить внимание читателей на один из главнейших инструментов разработчика — браузер. Выбор браузера для разработки обоснован. Его основное преимущество в том, что вы можете получить любую дополнительную функциональность путем установки соответствующего дополнения. На официальном сайте Mozilla. доступны дополнения практически для любых нужд.

Firebug

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

Начну свой обзор с незаменимого для разработки дополнения Firebug. По функциональности Firebug во много раз превосходит все встроенные средства разработки, имеющиеся сегодня практически в любом браузере.

После установки дополнения, главную панель Firebug можно открыть нажав клавишу F12, либо через меню Инструменты — Веб-разработка — Firebug — Открыть Firebug.

Инспектирование HTML кода

Просмотр
В каждом браузере можно открыть исходник страницы, но только в Firebug можно просматривать живой код, т.е. динамический код, сгенерированный с помощью JavaScript. Вдобавок ко всему код показывается в структурированном виде и с подсветкой синтаксиса, что позволяет быстро находить нужные элементы.

Изображение

Для просмотра CSS свойств, скомпилированных стилей (стилей, которые браузер применил к конкретному элементу), а также HTML разметки достаточно выбрать нужный элемент в коде, и вся необходимая информация будет доступна на правой панели Firebug в соответствующей вкладке.

Изображение

Все изменения желтым
Firebug также незаменим при разработке интерактивных страниц с использованием JavaScript. Если скрипт меняет свойства каких-либо элементов, вставляет новые элементы или удаляет существующие, Firebug покажет все изменения, которые происходят в коде желтым цветом.

Изображение

Редактирование кода
Вы можете редактировать код, изменять HTML элементы, удалять или добавлять новые прямо в Firebug. Результат будет виден сразу же. Это очень удобно, когда нужно, например, подогнать размеры блоков, выбрать цвет ссылок или шрифт для заголовков.

Изображение

Поиск нужного элемента в два клика
Не менее полезная функция, которая позволяет в разы увеличить скорость работы с HTML кодом — выбор нужного элемента мышкой. Просто выберите соответствующий инструмент на панели Firebug, а затем щелкните на элементе страницы для анализа.

Изображение

Копирование кода
Firebug позволяет быстро скопировать исходный код отдельного элемента, CSS путь или Xpath.

Обзор макета
С Firebug заниматься версткой — одно удовольствие. Достаточно выделить элемент и перейти на вкладку Макет на правой панели Firebug, и вы увидите все значения ширины и высоты блока, значения свойств margin, padding, z-index и border.

Изображение

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

ИзображениеИзображение

Анализ сетевого трафика
В Firebug есть встроенный анализатор сетевого трафика. Если нужно проанализировать скорость загрузки страницы, файлов стилей или скриптов, перейдите на вкладку Сеть на главной панели FireBug. Firebug_10. На шкале времени наглядно показано время, затраченное на загрузку конкретного файла или выполнение асинхронного запроса. Поэтому, если ваши пользователи жалуются, что ваш сайт медленно грузится, первым делом стоит заглянуть сюда. Быть может, удастся хотя бы временно решить проблему путем уменьшения количества загружаемых файлов, оптимизации изображений, оптимизации работы кэша браузера, сжатия CSS и JavaScript файлов.

Изображение

Для анализа скорости загрузки страницы также рекомендую посмотреть дополнение для Firebug Yslow (http://yslow.org/). Анализировать скорость загрузки страницы — основная задача YSlow, поэтому, возможно, с ней он справится лучше, чем базовое решение от Firebug.

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

Отладчик JavaScript
Полноценный JavaScript-отладчик позволяет ставить точки останова сценария и задавать условия останова. Во время паузы можно быстро проинспектировать текущие значения переменных в скрипте.

Изображение

Также есть возможность запустить пошаговое выполнение скрипта, профилировать код, сохранить лог вызова JavaScript-функций. Одним словом, в этом отладчике есть все, что должно быть в любом нормальном отладчике, и даже больше.

Console API
В дополнение к отладчику Firebug добавляет глобальную переменную «console» во все страницы, загруженные в Firefox. Этот объект содержит методы, которые позволяют выводить информацию в консоль FireBug. Очень удобно выводить отладочную информацию с помощью методов console.log() и console.debug().

Примеры вызова методов в скрипте:
console.log("Total page count", count); /* Вывод переменной count */
console.debug(user); /* Вывод переменной user */

Полное описание Console API есть на Wiki-сайте Firebug. Если вы работаете с консолью при разработке скриптов, не забудьте удалить или закомментировать все вызовы методов этого объекта в production-версии. Дело в том, что не все браузеры могут работать с консолью так же как, Firefox, да и пользователям этот вывод тоже не нужен.

FireCookie
Был такой замечательный плагин для анализа куков, но начиная с версии Firebug 1.0, FireCookie интегрирован в Firebug, и его не нужно устанавливать отдельно. Анализатор куков доступен в Firebug на вкладке Cookies. Возможности остались прежними: создание, удаление и просмотр куков сайта.

Firebug, уже вместил в себя столько возможностей, что может заменить десяток отдельных плагинов для разработки. Firebug доступен только для Firefox. Загрузить его можно на странице https://addons.mozil...x/addon/firebug. Кстати, теперь Firebug устанавливается без перезагрузки браузера.

Web Developer
Дополнение представляет собой отдельную панель под адресной строкой браузера.

Изображение

Первая вкладка Disable позволяет в два клика отключить кэш а также поставить себя на место пользователей, у которых отключен JavaScript.

Кнопка CSS позволяет отключать и подключать стили: можно отключить сразу все, можно только некоторые. Web Developer может отключить встроенные стили браузера, а, поскольку у разных браузеров встроенные стили могут отличаться, то эта функция поможет сверстать страницу так, чтобы она выглядела одинаково во всех браузерах.

Стоит обратить внимание на вкладку Forms: здесь доступны различные операции с полями. Может пригодиться при работе с большими формами, например для быстрого просмотра атрибутов полей, заполнения полей тестовой информацией или других манипуляций с полями формы.

С помощью вкладки Resize можно посмотреть, как будет выглядеть ваш сайт при другом разрешении экрана монитора. Нужный эффект достигается путем автоматического изменения размеров окна браузера.

Быстро проверить валидность написанного кода можно с помощью меню Tools. Конечно, плагин не проверяет код, он просто перенаправляет вас на страницу сайта w3c.org с результатами проверки. В общем, ничего особенного, просто быстрые ссылки.

Загрузить дополнение можно на странице https://addons.mozil...n/web-developer.

FireFTP
С помощью этого дополнения можно сделать из браузера простой FTP-клиент. Дополнение запускается из меню Инструменты — Веб-разработка — FireFTP. FireFTP имеет стандартный для файловых менеджеров интерфейс — две панели: в первой панели отображаются файлы на локальном компьютере, во второй — файлы с удаленного сервера.

Изображение

Дополнение интересное, но почему-то когда я его последний раз использовал, Firefox два раза упал по непонятным причинам. Может из-за FireFTP, а может, и нет.

На мой взгляд, решение интересное, но для серьезного проекта не тянет. Для рабочих проектов рекомендую использовать полноценный FTP-клиент, например FileZilla. Загрузить дополнение можно на странице https://addons.mozil...x/addon/fireftp.

ColorZilla
После установки дополнение представляет кнопку справа от адресной строки и позволяет получить HTML код цвета любого элемента страницы или цвета из палитры (web-пипетка). В меню плагина есть ссылка на сервис — генератор CSS градиентов.

Изображение

Загрузить дополнение ColorZilla можно на странице https://addons.mozil...ddon/colorzilla.


В завершение статьи привожу ссылку на коллекцию дополнений Firefox для разработчиков на сайте Mozilla. Некоторые из них я уже упомянул в своей статье.

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

  • 0

#2 doragon

doragon
  • Пользователь
  • 6 сообщений
  • Репутация: 2

Отправлено 22 Октябрь 2012 - 10:13

Firebug доступен только для Firefox

Это неверное утверждение. Firebug доступен и для Google Chrome : https://getfirebug.c...es/lite/chrome/
  • 1

#3 EPashkov

EPashkov
    Topic Starter
  • Пользователь
  • 8 сообщений
  • Репутация: 2

Отправлено 22 Октябрь 2012 - 10:49

Но это Firebug Lite, а не Firebug. Это не одно и то же. В Firebug Lite есть только консоль и инспектирование, нативные инструменты разработки любого браузера в сто раз круче чем Firebug Lite.

Кстатаи, на странице, которую Вы указали, в самой первой строке сказано:

Firebug Lite for Google Chrome is not a substitute for Firebug, or Chrome Developer Tools.

Умеете переводчиком пользоваться?
  • 0

#4 doragon

doragon
  • Пользователь
  • 6 сообщений
  • Репутация: 2

Отправлено 22 Октябрь 2012 - 14:27

Еще раз концентрирую ваше внимание на

Firebug доступен и для Google Chrome

Урезанный или нет - это тема отдельного разговора.

Да. И как-то странно в инструментах разработчика видеть браузер + дополнения к нему. И не наблюдать всего остального :) Редакторы, ftp-клиенты как минимум, и даже wamp-платформы.
Или это уже не инструменты?
  • 0


Оформление форума – IPBSkins.ru