Falsh / Дебаггер Monster Debugger 3.02


Cодержание:

1. Введение в Monster Debugger.
2. Быстрый старт.
3. Присоединение клиентской SWC (к вашему Flash проекту).
4. Отладка Adobe Flex приложений.
5. Отладка c мобильного устройства.
6. Работа с панелью “Application”.
7. Выделяем и осматриваем объекты.
8. Работа с панелью “Properties”.
9. Работа с панелью “Methods”.
10. Работа с панелью “Traces”.
11. Панель “Memory Monitor”.
12. Точки останова (breakpoint).


1. Введение в Monster Debugger.



Рис 1.1 Monster Debugger
Monster Debugger является бесплатным, опенсорсным инструментом отладки приложений написанных под Adobe Flash, Flex или AIR. Он был разработан так, чтобы быть полезным и для новичков и для опытных разработчиков. Он призван предоставить вам пять основных возможностей, которые очень полезны при разработке вашего приложения:


1. Вывод отладочных сообщений

2. Самоанализ структуры вашего приложения

3. Тестирование методов

4. Редактирование свойств

5. Поиск проблем с производительностью
1. Вывод отладочных сообщений
2. Самоанализ структуры вашего приложения
3. Тестирование методов
4. Редактирование свойств
5. Поиск проблем с производительностью

Хотя существует много различных дебаггеров для Flash-разработчиков, мы считаем, что Monster Debugger состоит из такой комбинации элементов, которую ни один из других дебаггеров не может вам предложить. Основными преимуществами над другими (коммерческими) дебаггерами являются:
1. Наш дебаггер бесплатный и с открытым исходным кодом. Это означает, что теперь вы можете создавать, отлаживать и публиковать приложения Adobe Flash, используя только инструменты с открытым исходным кодом, такие как Adobe Flex SDK, Flash Develop и, конечно, Monster Debugger.
2. Вы можете подключиться к Monster Debugger, даже если приложение запущено на рабочем столе, веб-сервере или мобильном телефоне. Используя Monster Debugger, нет необходимости в компилировании приложения в специальном debug-режиме и запуске в debug-плеере. Мы даже поддерживаем нулевой режим конфигурации для подключения мобильного устройства к нашему дебаггеру по WIFI.
3. Он поддерживает редактирование свойств и запуск методов прямо во время выполнения приложения. Это избавляет вас от необходимости перекомпилировать приложение каждый раз, когда вы хотите изменить значение какого-то свойства или проверить работу какого-то отдельного метода.
4. У нас также есть игра, которая покажет вам, как работать с нашим удивительным дебаггером!
2. Быстрый старт.
Начать работать с Monster Debugger очень просто. Просто выполните следующие шаги и всё, дебаггер будет готов к работе:
1. Скачайте и установите среду выполнения Adobe AIR: http://get.adobe.com/air/
2. Загрузите и установите Monster Debugger.
3. Экспортируйте SWC-файл, являющийся клиентом Monster Debugger в свой собственный проект.
4. Соедините клиент с проектом (подробнее об этом в следующей главе).
5. Инициализируйте дебаггер в главном классе:
package {
 
      import com.demonsters.debugger.MonsterDebugger;
      import flash.display.Sprite;
 
      public class Main extends Sprite {
 
          public function Main() {
 
              // Инициализируем  MonsterDebugger
              MonsterDebugger.initialize(this);
              MonsterDebugger.trace("Hello World!");
          }
      }
  }
6. Опубликуйте ваш проект и убедитесь, что волшебство произошло.
Эти основные настройки будут работать на всех приложениях, будь-то Adobe Flash, Flex или AIR. В следующих главах мы сосредоточимся на более конкретных вариантах использования дебаггера, познакомимся с новым Flex компонентом и отладкой мобильных приложений.
3. Присоединение клиентской SWC (к вашему Flash проекту).
Присоединение SWC-клиента Monster Debugger к вашему проекту делается очень просто и может быть выполнено всего за несколько шагов в зависимости от выбранной вами IDE. Мы включили примеры для трех популярных IDE. Отправной точкой для каждого примера является пустой проект, в папку с названием “libs” которого вы должны скопировать клиентский SWC-файл.
Adobe Flash CS5
Рис 1.2 Перейдите на вкладку с настройками проекта и нажмите на кнопку с надписью “Edit” напротив свойства “Profile”.
Рис 1.3 Вы увидите это окно. Нажмите на кнопку с надписью “Settings” напротив свойства “Script”.
Рис 1.4 Перед вами откроется окно настроек ActionScript 3.0. Перейдите на вкладку Library path чтобы увидеть текущие присоединенные к проекту файлы SWC. Теперь кликните по кнопке с красным логотипом Flash и укажите путь к файлу MonsterDebugger.swc, который вы только что экспортировали.
Рис 1.5 После этого SWC файл должен добавиться в список присоединенных файлов, как вы можете видеть на картинке выше. Все, теперь вы готовы работать с Monster Debugger.
Adobe Flash Builder 4
1.6 Если вы скопировали файл MonsterDebugger.swc в папку “libs” вашего проекта, то SWC-файл уже должен быть присоединен к проекту. Хорошая работа Adobe!
FDT 4
Рис 1.7 Так выглядит директория пустого проекта в FDT. Вы можете видеть главный класс проекта и MonsterDebugger.swc в Project Explorer.
Рис 1.8 Вы можете присоединить MonsterDebugger.swc к проекту, открыв Контекстное меню> Source Folder > Add to Classpath.
Если вы столкнетесь с какими-либо трудностями при присоединении SWC-клиента к Flash-проекту, пожалуйста, сообщите нам об этом на нашем сайте (http://getsatisfaction.com/demonsters/products/demonsters_monster_debugger_3), чтобы мы могли попытаться вам помочь.
4. Отладка Adobe Flex приложений.
Для 3 версии Monster Debugger мы создали специальный Flex-компонент, который прекрасно интегрируется в текущий Flex API. Мы рекомендуем Flex-разработчикам использовать этот компонент в своих приложениях вместо обычных AS3- классов. Заметим также, что оба эти класса могут быть использованы вместе в одном приложении, не мешая друг другу. Flex-компонент является частью SWC-клиента и его код очень прост. В следующем примере, в файле Main.mxml, показан Flex-компонент Monster Debugger в действии:
<s:application xmlns:fx="http://ns.adobe.com/mxml/2009"   
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" 
                   xmlns:debugger="com.demonsters.debugger.*" 
                                     creationcomplete="onCreationComplete()">
 
        <fx:script>
            <!--[CDATA[
 
                import mx.logging.ILogger;
                import mx.logging.Log;
 
                private function onCreationComplete():void {
 
                    // Вывод сообщения с помощью Monster Debugger
                    monsterDebugger.trace("Hello World!");
 
                    // Вывод сообщения с помощью Flex
                    var logger:ILogger = Log.getLogger("Main.mxml");
                    logger.error("Hello World!");
                }
            ]]-->
        </fx:script>
 
        <debugger:monsterdebuggerflex id="monsterDebugger">
    </debugger:monsterdebuggerflex></s:application>
5. Отладка c мобильного устройства.
Начиная с 3 версии Monster Debugger и выше, вы также можете подключить Monster Debugger к приложению Adobe AIR, которое запущено на вашем мобильном устройстве. Monster Debugger использует нулевые настройки конфигурации, так что вы сможете подключить мобильное устройство к отладчику без каких-либо проблем. Правда, вам будут необходимы две вещи:
1. Wi-Fi соединение между мобильным устройством и компьютером.
2. Мобильный SWC-клиент Monster Debugger. Вы можете экспортировать этот SWC-файл через меню “File” дебаггера или же через вкладку “Home”.
Настройка WiFI

Рис 1.9 Используя MonsterDebuggerMobile.swc приложение будет подключено к MonsterDebugger, пока они будут использовать один и тот же Wi-Fi.
Рис 1.10 Соединение будет работать не только при прямой Wi-Fi связи, но также и при использовании беспроводного маршрутизатора. Заметьте, некоторые брандмауэры могут блокировать соединение.
Мобильный SWC-клиент присоединяется к вашему проекту, также как и обычный SWC-клиент и имеет те же возможности, что и обычный клиент. Единственное отличие заключается в том, что используется P2P NetGroup для того чтобы найти Monster Debugger в вашей сети. Из-за того что используется стандартное соединение, вы можете использовать один и тот же клиент для того чтобы протестировать ваше приложение и в Adobe AIR Debug Launcher (ADL), и в Android Emulator и когда оно находится на вашем мобильном устройстве без необходимости изменения конфигурации.
Если вы столкнетесь с какими-либо трудностями при присоединении мобильного SWC-клиента к Flash-проекту, пожалуйста, сообщите нам об этом на нашем сайте (http://getsatisfaction.com/demonsters/products/demonsters_monster_debugger_3), чтобы мы могли попытаться вам помочь.
6. Работа с панелью “Application”.

Рис 1.11 Панель “Application”
В панели “Application” отображаются все публичные свойства и экземпляры класса DisplayObject присутствующие в вашем приложении. Они организованны в аккуратную древовидную структуру. Дерево организовано таким образом, чтобы показывать экземпляры класса DisplayObject в самом верху, а затем в алфавитном порядке список публичных свойств и экземпляры других классов. Вы можете открывать папки, чтобы увидеть их содержимое и просматривать структуру приложения с удивительной легкостью. Мы используем различные иконки для обозначения различных типов объектов:
Объект, содержащий детей или свойства.
Свойство доступное для чтения/записи.
Свойство доступное только для чтения.
Нечитаемый или неопознанный объект.
Если вы выберите папку в дереве, то свойства которые она содержит будут загружены в панель “Properties”. Вы можете редактировать эти свойства прямо в Monster Debugger. Мы разберем подробно панель “Properties” в следующей главе.
По умолчанию, дерево строится начиная с того места, где вы инициализировали Monster Debugger. В первой главе мы инициализировали Monster Debugger с помощью следующих строчек кода:
package {
 
      import com.demonsters.debugger.MonsterDebugger;
      import flash.display.Sprite;
 
      public class Main extends Sprite {
 
          public function Main() {
 
              // Инициализируем  MonsterDebugger
              MonsterDebugger.initialize(this);
              MonsterDebugger.trace("Hello World!");
          }
      }
  }
При запуске этого примера вы увидите, что дерево строиться, начиная с главного класса. Однако вы можете изменить начальную цель дерева с помощью функции inspect:
var foo:Bar = new Bar();
MonsterDebugger.inspect(foo);
Функция inspect определяет место, с которого начинает строиться дерево. Эта возможность очень полезна для переключения областей просмотра или в случае, когда вы хотите проверить динамически загружаемый SWF-файл.
7. Выделяем и осматриваем объекты.
Еще одной новой возможностью, которая была введена в 3 версии Monster Debugger, является режим выделения объектов, находящихся на stage. Хотя вы можете найти практически каждый объект вашего приложения в дереве, иногда может быть затруднительно, найти какой-то конкретный объект, даже если вы можете легко определить, где он находится на экране. В этом случае функция выделения объектов будет как нельзя кстати:
Рис 1.12 Highlight & Inspect
Кликая по флажку “Highlight & Inspect” в Monster Debugger, вы можете включать/выключать эту возможность в своем приложении. При наведении курсора мыши на какой-либо экземпляр класса DisplayObject находящийся на сцене, Monster Debugger будет выделять его. При клике по этому объекту, вы сфокусируете Monster Debuggr на нем.
8. Работа с панелью “Properties”.
Если вы кликните по папке в панели “Application”, все свойства этого объекты будут показаны в панели “Properties”. Это могут быть как основные свойства, такие как x, y и z, так и пользовательские свойства, перечисленные здесь. Если свойство открыто для записи вы можете изменять его прямо из Monster Debugger и видеть произошедшие изменения в режиме реального времени. Эта возможность может сэкономить кучу времени, например, если у вас возникли проблемы с позиционированием объектов на сцене относительно друг друга. Мы используем следующие значки, чтобы показать различие между различными типами свойств.
Объект, содержащий детей или свойства.
Свойство доступное для чтения/записи.
Рис 1.13 Панель “Properties”
Если выбранный объект является экземпляром класса DisplayObject, таким как, например, Sprite, TextField, MovieClip, и т.д., то Monster Debugger покажет небольшой предварительный просмотр этого объекта над списком свойств и выделит его на сцене вашего приложения.
9. Работа с панелью “Methods”.
Многие объекты в вашем приложении имеют методы. В панели “Methods” вы можете видеть публичные методы выбранного объекта. Эти публичные методы могут быть выполнены прямо из Monster Debugger, для этого вам просто нужно дважды кликнуть по какому-либо из них. К сожалению, вы не можете выполнить абсолютно все методы из Monster Debugger, потому что некоторые методы требуют ввод некоторых специфических значений, которые мы не можем предоставить ввести вам из Monster Debugger. Методы, которые могут быть выполнены, выделены вот этим значком:
Метод, который может быть запущен.
В то время как Monster Debugger не может показать вам хоть какие-либо комментарии из ваших файлов, но зато он может сказать вам, какие аргументы вы можете передать в метод. Эта возможность может быть очень полезной, если вы хотите протестировать метод, но не хотите писать дополнительный код в вашем приложении, чтобы его выполнить. Если метод возвращает какие-либо данные, то Monster Debugger покажет вам их в правой части интерфейса.
Рис 1.14 Панель “Methods”
10. Работа с панелью “Traces”.
Когда De Monsters разработали самую-самую первую версию Monster Debugger (0.9), в ней была всего одна возможность: панель “Traces”. Эта панель является наиболее часто используемой функцией Monster Debugger. Она показывает сообщения (так называемые трейсы) отправленные из вашего кода и позволяет просматривать вам, ваши данные. Панель “Traces” показывает всё: строки, числа, массивы, XML, объекты, векторы и даже все ваши пользовательские классы.
Обычно используются сценарии, включающие в себя отслеживание XML-данных отправленных с сервера, чтобы увидеть их структуру, вывод ответов от плохо документированных методов API какой-либо социальной сети или просто вывод сообщений, чтобы увидеть, правильно ли вызывается какая-либо функция.
Рис 1.15 Панель “Traces”
Вывод простого сообщения
MonsterDebugger.trace(this, "Hello World!");
Рис 1.16 Вывод простого сообщения
Вывод массива
var fruit:Array = ["apple", "orange", "banana"];
MonsterDebugger.trace(this, fruit);
Рис 1.17 Вывод массива
Вывод объекта
var person:Object = {name:"Mike", age:25, gender:"Male"};
MonsterDebugger.trace(this, person);
Рис 1.18 Вывод объекта
Вывод пользовательского класса
var foo:Bar = new Bar();
MonsterDebugger.trace(this, foo);
Рис 1.19 Вывод пользовательского класса
Каждому сообщению может быть назначена метка или цвет. Это может быть полезно для разделения различных типов сообщений на группы или при работе в команде разработчиков. В следующих примерах показано, как можно работать с цветом и метками сообщений:
Вывод сообщения с меткой или с именем разработчика
MonsterDebugger.trace(this, "Message by Mike", "mike", "label");
MonsterDebugger.trace(this, "Message by Joe", "joe", "label");
Вывод сообщения об ошибке
MonsterDebugger.trace(this, "ERROR!", "", "", 0xFF0000;
11. Панель “Memory Monitor”.

Рис 1.20 Панель “Memory Monitor”
Панель “Memory Monitor” показывает частоту кадров приложения (белым) и объем памяти, используемой Adobe Flash Player или Adobe AIR (желтым). Примечание: эта возможность немного не корректна, это связано с тем, что Monster Debugger использует свойство System.totalMemory на стороне клиента. Это свойство возвращает общий объем памяти, который используется всеми Adobe Flash Player в вашей системе.
12. Точки останова (breakpoint).
Начиная с 3 версии Monster Debugger, присутствует поддержка точек останова. Для того чтобы использовать их, вам необходимо запускать приложение только или в Flash Debug Player, или в Adobe Debug Launcher (ADL). Если у вас есть дебаговый плеер, то вы можете легко добавлять точки останова в код, используя следующую функцию:
MonsterDebugger.breakpoint(this);
Рис 1.21 Точки останова (breakpoint)
Когда вы запустите ваше приложение, вы увидите, что Monster Debugger приостановит выполнение кода, как только он достигнет точки останова и покажет уведомление вам о наступлении этого события в окне “Application”.
У вас есть несколько вариантов как действовать дальше, после того как выполнение кода приложения остановится на точке останова. Вы можете нажать кнопку “Play”, и ваше приложение продолжит работу до следующей точки останова, или же можете просмотреть вывод стека, или вы можете открыть ActionScript или MXML файл в нашем вьювере и просмотреть его.

Рис 1.22 Просмотр стека
Вьювер осуществляет навигацию по вашему файлу и выделяет номер строчки, где был найдена точка останова, это будет выглядеть примерно так:

Рис 1.23 Вьювер Monster Debugger
Нажав на кнопку “Pause”, вы также можете приостановить выполнение приложения в любое время, правда функции просмотра стека и исходного кода не будут доступны, хоть приложение и будет стоять на паузе.

© #redefy for #redefy, 2012. |


Поделитесь интересным с друзьями:


Блог: http://romanlovetext.blogspot.com/
Ярлыки: , ,