Блог web-мастера

Мы не можем знать, каким браузером пользуется очередной посетитель нашего сайта, а различия в обработке HTML/CSS кода столь велики, чтобы нельзя просто игнорировать их. Практически невозможно помнить обо всех возможных проблемах: детальное тестирование в различных браузерах — это единственный способ обеспечить нормальное функционирование сайта. Если у вас нет нужного браузера, то вы можете найти практически любой на сайте browsers.evolt.org.

В Windows предусмотрена возможность установки только одной версии Internet Explorer, но, чтобы гарантировать правильное отображение сайта в наиболее популярных браузерах, нам нужно как минимум IE6 и IE7. Microsoft предлагает использовать Virtual PC, чтобы запускать браузеры одновременно, но есть и более простое решение: multiple versions of IE от TredoSoft позволяет установить на компьютер несколько версий IE.

Браузеры установленные таким образом работают не очень устойчиво и иногда падают без видимых причин, но, несмотря на это, свои задачи пакет выполняет в полном объеме. Установщик работает в Windows XP, пользователям Windows Vista придется использовать Virtual PC.

Есть ещё один инструмент: IETester — бесплатный браузер, который позволяет тестировать страницы в IE8 beta 2, IE7, IE6 и IE5.5 на Vista и XP.

Для тестирования также можно использовать специальные онлайновые сервисы, показывающие скриншот вашего сайта в разных браузерах.

Всё больше и больше web-разработчиков отдают предпочтение FireFox в качестве основного браузера. Поскольку я тоже пользуюсь Firefox, расскажу о нескольких удобных расширениях к браузеру.

Web Developer

Плагин Web Developer позволяет выполнять следующие действия:

• включать и отключать cookies;
• включать и отключать выполнение скриптов JavaScript;
• просматривать и редактировать таблицы стилей CSS и исходный код страницы;
• отображать подробную информацию об элементах страницы: формах, рисунках, таблицах, гиперссылках, заголовках и т. д.;
• выделять элементы страницы заданного типа: формы, ячейки таблиц, рисунки и т. д.;
• отображать подробную информацию о выбранном элементе страницы;
• просматривать дизайн сайта в различных разрешениях экрана;
• проверить код HTML и CSS на соответствие стандартам W3C;
• получить информацию о размере страницы и отдельных типов ее содержимого, а также информацию о времени загрузки страницы с учетом типа используемого соединения;
• и многое другое.

DOM Inspector

В третьей версии Firefox инспектор DOM был удалён из сборки, но может быть установлен как дополнение.

Инспектор DOM позволяет просмотреть структуру документа в виде дерева с подробной информацией по каждому элементу.

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

Firebug

Прекрасной альтернативой (или дополнением) к плагину Web Developer служит расширение Firebug. Плагин обладает примерно теми же возможностями, что и Web Developer, но есть и приятные мелочи, например отладчик скриптов JavaScript.

Откроем рабочее окно расширения Firebug (пункт меню “Инструменты – Firebug – Open Firebug”). В левой части окна плагина расположен набор вкладок, реализующих его основные возможности:

• консоль JavaScript (Console);
• редактор исходного кода (HTML);
• редактор таблицы стилей CSS;
• отладчик скриптов JavaScript (Script);
• инспектор DOM;
• вкладка со статистикой загрузки отдельных элементов страницы (Net).

PageDiff

Плагин Page Diff позволяет сравнить код двух веб-страниц, например локальной копии страницы и ее серверной копии. После установки плагина в контекстном меню браузера появятся пункты Start DIFF и Show DIFF. Чтобы сравнить код двух веб-страниц, нужно выбрать пункт Start DIFF на одной из них и Show DIFF - на другой. После этого откроется окошко с результатами сравнения.

Консоль ошибок

Еще один инструмент для веб-разработки уже есть в базовой конфигурации браузера - консоль ошибок JavaScript.

В окне консоли ошибок отображаются предупреждения JavaScript, а также ошибки и предупреждения CSS с указанием номеров строк кода. Эта информация незаменима при отладке скриптов JavaScript, а также дает некоторое представление о соответствии кода стандартам W3C.

PHP Expert Editor

PHP Expert Editor - удобный редактор для PHP, Perl, Python, HTML, Java Script и других файлов с поддержкой UTF-8. Программа разработана специально для PHP мастеров и имеет встроенный отладчик PHP. PHP Expert Editor имеет встроенный HTTP сервер и позволяет запускать PHP, Perl, Python, скрипты. Вы также можете использовать любой внешний HTTP сервер. Проверка синтаксиса PHP, встроенный браузер, FTP клиент с поддержкой SFTP, Кодовый и файл эксплорер, поддержка проектов, настраиваемые шаблоны кода, настраиваемая подсветка кода, и многие другие функции значительно облегчают работу разработчика.

Свойства программы

• Поддержка UTF-8
• Настраиваемая подсветка кода
• Свертывание кода
• Встроенный браузер
• Встроенный FTP-клиент с поддержкой SFTP
• Code Explorer
• File Explorer с Избранными папками
• Project Explorer
• Library Explorer
• Настраиваемые горячие клавиши и клавиши работы в редакторе
• Клавиатурные макросы
• PHP макросы
• Авто сохранение
• Проверка синтаксиса PHP
• Запуск скриптов и просмотр результата во встроенном или внешнем браузере
• Отладчик
• Для запуска и отладки PHP скриптов Вы можете использовать встроенный или любой внешний HTTP-сервер
• Поддержка всех известных Content-Type. Вы можете отлаживать скрипты, которые генерируют различный контент, например, картинки
• Быстрая вставка всех функций PHP с подсказкой параметров
• Быстрая навигация в коде с помощью горячих клавиш и мыши
• Подсветка парных скобок
• Настраиваемые Шаблоны Кода для быстрой вставки часто употребляемых фрагментов
• Экспорт исходного текста в HTML и RTF с подсветкой синтаксиса
• Закладки
• Два стиля интерфейса - Classic и Office XP
• Поддержка справки PHP с возможностью поиска по ключевому слову в текущей позиции
• Keymaping (Default, Classic, Brief, Epsilon, Visual Studio)
• Поддержка форматов файлов Windows, Unix, Mac
• Поддержка Perl, Python, Ruby, Tcl. Есть возможность использовать несколько интерпретаторов, не только PHP.

Notepad++

Notepad++ это бесплатный редактор текстовых файлов (замена стандартного Блокнота) с поддержкой синтаксиса большого количества языков программирования, ориентирован для работы в операционной системе MS Windows.

Этот проект базируется на компоненте Scintilla (очень мощном компоненте для редактирования) написанном на C++ с использованием только Win32 API и STL (что гарантирует максимальную скорость выполнения при минимальном размере программы), распространяется под лицензией GPL.

Основные особенности Notepad++ :

• Подсветка текста и возможность сворачивания блоков, согласно синтаксису языка программирования
• WYSIWYG (печатаешь и получаешь то, что видишь на экране)
• Настраиваемый пользователем режим подсветки синтаксиса
• Авто-завершение набираемого слова
• Одновременная работа с множеством документов
• Одновременный просмотр нескольких документов
• Поддержка регулярных выражений Поиска/Замены
• Полная поддержка перетягивания фрагментов текста
• Динамическое изменение окон просмотра
• Автоматическое определение состояния файла
• Увеличение и уменьшение
• Поддержка большого количества языков
• Заметки
• Выделение скобок при редактировании текста
• Запись макроса и его выполнение