Flex - 除錯應用程式

Flex 提供了強大的 Flex 程式碼除錯功能，Flash Builder 4 擁有出色的內建偵錯程式和除錯透檢視支援。

• 在除錯模式下，Flex 應用程式執行在 Flash Builder 4 中內建的 Flash Player 偵錯程式版本上，該版本支援除錯功能。

• 因此，開發人員在 Flash Builder 中獲得了簡單易用的內建除錯配置。

在本文中，我們將演示如何使用 Flash Builder 除錯 Flex 客戶端程式碼。我們將執行以下任務：

• 在程式碼中設定斷點並在斷點瀏覽器中檢視它們。
• 在除錯期間逐行執行程式碼。
• 檢視變數的值。
• 檢查所有變數的值。
• 檢查表示式的值。
• 顯示已暫停執行緒的堆疊幀。

除錯示例

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";
         }
      ]]>
   </fx:Script>

   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用程式章節中一樣，以普通模式進行編譯。

步驟 1 - 設定斷點

在 HelloWorld.mxml 的應用程式初始化處理程式的第一行設定斷點。

步驟 2 - 除錯應用程式

現在點選除錯應用程式選單，並選擇 HelloWorld 應用程式以除錯該應用程式。

如果一切正常，應用程式將在瀏覽器中啟動，您將在 Flash Builder 控制檯中看到以下除錯日誌。

[SWF] \HelloWorld\bin-debug\HelloWorld.swf 
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1 
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2 
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3 
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4 
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5 
- 318,334 bytes after decompression

應用程式啟動後，您將看到 Flash Builder 斷點處於焦點狀態，因為我們在 application_initialize 處理程式方法的第一行設定了斷點。

您可以檢視已暫停執行緒的堆疊跟蹤。

您可以查看錶達式的值。

您可以檢視已設定的斷點列表。

現在，持續按 F6 直到到達 application_initializeHandler() 方法的最後一行。作為函式鍵的參考，F6 逐行檢查程式碼，F5 進一步深入，F8 將恢復應用程式。現在，您可以檢視 application_initializeHandler() 方法的所有變數的值列表。

現在您可以看到 Flex 程式碼可以像除錯 Java 應用程式一樣進行除錯。在任何一行放置斷點，並使用 Flex 的除錯功能。