задача: показать простое средство отладки флэш-приложений.

Среда Flash не балует разработчиков обилием средств отладки. Поиск ошибок в сколько-нибудь сложных приложениях — довольно утомительный процесс (особенно после того, как проект уже опубликован), учитывая что в приложениях на AS2.0 невозможно даже использовать встроенный отладчик. Эта статья показывает не самое изящное, но простое и проверенное средство для вывода отладочных данных, которое, например, можно использовать для отладки сайтов «по живому».

Обсуждение статьи у Флэш Потрошителя.

назад к списку уроков и рецептов

1. что это такое?

2. исходник отладочной панели и как его использовать

3. настройки отладочной панели

4. комментарии




1. Что это такое?

Панель показывает отладочную информацию тому, кто знает, как её открыть. В примере она открывается сразу, это сделано для демонстрации. Вообще же она открывается при нажатии сочетания клавиш, которое вы можете настроить (об этом дальше). Только тот, кто знает это сочетание, сможет увидеть ваши тесты.

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

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

2. Исходник отладочной панели и как его использовать.

Исходник: generic test board.zip (18kb)

Пользоваться очень просто: нужно открыть исходник, скопировать единственный клип, который лежит на сцене, и положить его в первый кадр главной линейки (_root) вашего основного ролика. В любом месте вашего кода вы пишете: 
_global.echo("сообщение");
// или
_global.echo("важное сообщение (ошибка?)", 1); 
// (пометить красным!)
После загрузки страницы с роликом, необходимо по крайней мере один раз кликнуть мышкой в его области. После этого нажатие шортката будет открывать и закрывать панель (по умолчанию это сочетание Ctrl+Shift+D, но вы можете поменять это).

Внимание! После загрузки страницы флэш-ролик не получит фокус ввода автоматически. Это значит, что пока вы не кликнете мышкой хотя бы один раз в области ролика, он не будет знать о нажатых на клавиатуре клавишах — эти данные к нему просто не будут поступать. Получить фокус ввода другим способом ролик не может (при помощи JavaScript'а этого тоже не сделать). Поэтому до первого клика по ролику шорткат на открывание тестовой панели работать не будет.

Настройки, с которыми вы публикуете ролик, не важны. Отладочная панель будет работать при компиляции под Flash Player 6-8 включительно, под AS1 и AS2, и вне зависимости от того, в какой кадр экспортируются классы ActionScript. Собственно, по этой причине сам код панели не отличается особым изяществом. :) В данном случае максимальная простота в использовании и применимость для любых проектов гораздо важнее, чем красота исходного кода. И по этой же причине это — не компонента, и все настройки, если потребуется, придется вносить вручную в код (о настройках дальше).

Когда проект будет отлажен, и панелька уже не будет нужна, можно просто поменять свойства слоя, в котором лежит её клип. Если слою задать тип guide (путь), то клипы, лежащие в нем, не будут включены в ролик и код в них не отработает.
   →   
Останутся только вызовы метода _global.echo(), что ни к чему плохому не приведет. Если же вас одолеет перфекционизм, можно удалить их простой автозаменой: заменить "_global.echo" на "// _global.echo". Для этого лучше везде обращаться к методу "_global.echo()", а не "echo()", чтобы ни с чем его не спутать при автозамене.

Совет: везде используйте обращение _global.echo(), так вам будет гораздо легче потом найти тестовые вызовы. Особенно это касается кода АС2.0, и особенно при использовании FDT. Если вы пишете чистый АС2 код без помарок, то единственные предупреждения от FDT, которые у вас появятся — это будут вызовы _global.echo(), и их будет легко потом найти. Вы ведь нигде больше к _global в АС2 коде обращаться не собираетесь? :)

Итого:
  • использование панельки сводится к копированию одного клипа и вызову функции _global.echo()
  • панелька работает при любых настройках публикации от 6 до 8 версии флэша
  • пользователи, которые видят ролик, который вы отлаживаете, могут вообще не знать о ваших действиях
  • вы можете попросить пользователя, который нашел ошибку, прислать вам результаты тестов
  • удалить панельку из проекта можно одним действием — сменой свойств слоя (поставить тип: guide), в котором лежит её клип.
в начало

3. Настройки отладочной панели.

Настроек мало, но без них не обошлось. Все они делаются в коде клипа, содержащего отладочные текстовые поля. Код в избытке снабжен комментариями (по которым вы и найдете строчку, которую нужно менять), так что здесь я только перечислю то, что можно настроить:
  1. Шорткат, открывающий и закрывающий панель.
    По умолчанию — Ctrl+Shift+D. Сочетание всегда выглядит так: Ctrl+Shift+Буква. Букву вы можете сменить при необходимости. Это может понадобиться, например, если в вашем броузере сочетание Ctrl+Shift+D вызывает какие-то действия, или если вы хотите, чтобы это сочитание не знали все те, кто читал эту статью. :)
  2. Максимальное число символов в отладочном окне.
    По умолчанию — 10000 символов. Управление этим параметром может помочь при больших объемах тестовой информации. Когда количество символов в отладочном текстовом поле превышает заданный предел, самые «старые» строки удаляются.
  3. Высота и ширина отладочного окна.
    По умолчанию окно растягивается в зависимости от размеров сцены. Это удобно, если вы используете настройки сцены Stage.scaleMode = "noScale" (не масштабировать содержимое ролика) и Stage.align = "TL" (точка с координатами ноль-ноль находится в верхнем левом углу экрана). При таких настройках панель выглядит так, как показано в пункте 1. Если же вы используете другой режим масштабирования и позиционирования сцены, может понадобиться задать размеры тестового окна вручную.
  4. Отображение перекрестия.
    По умолчанию — выключено. Во включенном состоянии от курсора мыши в четыре стороны расходятся лучи. Самая бесполезная на мой взгляд функция, но когда-то мне это понадобилось для того, чтобы видеть, как выровнены элементы на странице.
Повторюсь, всё это можно найти в коде клипа из исходника отладочной панели, всё это отмечено комментариями.
в начало

4. Комментарии

Знатокам этот способ отладки может показаться «дедовским» и забавным, поскольку на дворе уже флэш 9 и АС3.0... И они будут правы, потому что по сути всё свелось к хитрому выводу команд trace(), на которых большая часть отладки во флэше и происходит. :) Ничего более удобного и универсального во флэшовом быту, к сожалению, нет. Остальные инструменты отладки имеют очень ограниченную область применения и специфические требования к реализации. А вариант, предложенный в этой статье настолько прост, что ни к чему особенному разработчика не обязывает. К тому же, применить такой способ можно почти при любом уровне знаний в области флэша.

Если у вас есть свои более удобные решения — расскажите! :)
в начало

назад к списку уроков и рецептов