Adobe Scout 入門

Adobe Scout 是新一代 Flash 內容探查器,廣泛適用於桌面 (Flash Player) 和移動設備 (Adobe AIR) 上運行的 Flash 內容。它能夠讓您洞悉過去無法瞭解的 Flash 內容行爲。最重要的是,Scout 入門十分容易,不包含任何複雜的安裝步驟!

Scout 問世之前,您可以使用 Flash Builder 探查器調查 ActionScript 3 代碼級的性能問題,但無法查看任何 Flash Player 內部操作。如果出現渲染問題或者 Flash API 使用錯誤,無法通過探查器指出錯誤原因,因爲您無從瞭解後臺究竟發生了哪些狀況。

Scout 通過蒐集有關 Flash Player 內部運行狀況的數據解決了這個問題。這有助於您瞭解 ActionScript 代碼與運行時的交互情況,以便您真正找到性能問題的根源。

Adobe Scout 的工作原理如何?

Scout 依靠 Flash Player 11.4 和 Adobe AIR 3.4 中引入的遙測 功能工作。這項功能將蒐集有關 Flash 運行時內部構件及 Flash 運行時執行的 ActionScript 代碼的詳細信息,然後將其全部發送到 Scout。Scout 清晰、簡潔、生動地顯示這些數據,以便您快速診斷內容存在的性能問題(參見圖 1)。

Adobe Scout 使用 Flash Player 和 Adobe AIR 提供的遙測功能。
圖 1:Adobe Scout 使用 Flash Player 和 Adobe AIR 提供的遙測功能。

Scout 不需要 Flash Player 調試程序版本。這意味着,您可以使用用戶運行的相同 SWF 和網頁在發佈環境中分析內容。最重要的是,Scout 可讓您全速分析內容,這樣您就能集中精力處理用戶體驗的實際性能問題。

在 SWF 上啓用高級遙測功能

啓用 Scout 時,您不必執行任何特殊操作。只需在 Scout 運行時運行 SWF,而後將會顯示一個新的會話,數據也將隨之出現。不過,默認情況下,SWF 僅提供基本信息。要訪問所有可用數據(如有關 ActionScript 代碼的信息和有關 DisplayList 渲染和 Stage3D 的詳細信息),您需要在 SWF 上啓用高級遙測 功能。Adobe 默認不顯示所有此類信息的原因在於,防止他人使用 Scout 輕鬆獲取有關您內容的詳細信息。不過,不用擔心,這項功能很容易啓用,這樣即可釋放 Scout 的全部能量。

用戶可以運用以下幾種不同方式啓用高級遙測功能。

使用 Flash Builder 4.7

啓用高級遙測功能的最簡便方法(也是 Adobe 推薦的一種啓用方法)是使用內置 Scout 支持的 Flash Builder 4.7 構建您的項目。

Flash Builder 4.7 提供了一個全新的 ActionScript 編譯器選項,用於啓用高級遙測功能。無論在新項目還是現有項目中,都可以使用這個選項:

  1. 打開項目屬性。
  2. 選擇 ActionScript Compiler。
  3. 選中 Enable Detailed Telemetry(參見圖 2)。
在 Flash Builder 4.7 中啓用高級遙測功能
圖 2:在 Flash Builder 4.7 中啓用高級遙測功能

啓用該功能後,您將能夠接收有關 ActionScript 代碼、DisplayList 渲染和 Stage3D 的數據。

使用 Flash Professional

如果您當前未使用 Flash Professional,則不會顯示用於啓用高級遙測功能的集成用戶界面。Adobe 將在即將推出的版本中添加這一選項,但在此期間,您可以從 https://github.com/adamcath/telemetry-utils 下載並使用 Python 腳本 (add-opt-in.py)。如果您尚未安裝 Python,請訪問 http://python.org 瞭解更多信息並進行下載。而後,只需在 SWF 上運行 add-opt-in.py 腳本,您便做好了充分的準備工作。

如果您需要分析現有 SWF,但無法輕鬆進行重新編譯,這種方法可能十分有效。

啓用高級遙測功能的示例內容

如果您希望利用某些現有的實際內容測試 Adobe Scout,下面幾個示例已經啓用了高級遙測功能:

只需打開 Scout,訪問上面的任意鏈接,即可開始嘗試運行。

本地分析和遠程分析

要使用 Scout,需要具備以下組件:

  • Flash Player 11.4(插件或單機)或 Adobe AIR 3.4。
  • Adobe Scout 桌面應用程序。

如果您要分析運行 Scout 的同一計算機上的桌面內容,則只需要這些組件。只需在運行 Scout 時運行您的內容,您將發現 Scout 中會顯示一個新的會話。

您還可以使用所謂的遠程分析 功能在另一臺計算機(非運行 Scout 的計算機)上分析您的內容。最常見的情形有:

  • 一臺桌面機運行內容(使用 Flash Player),另一臺計算機運行 Scout。這在調試遠程項目或者當您無法在期望運行內容的計算機上運行 Scout 時頗有成效。
  • 一臺移動設備運行內容(使用 Adobe AIR),另一臺計算機運行 Scout。這是開發移動內容時的典型場景,因爲您希望優化目標設備的性能。

遠程分析桌面內容

如果您在遠程桌面機上運行內容,則可以將 Flash 遙測數據定向到運行 Scout 的任何可訪問的計算機。爲此,您需要在運行 Flash 內容的計算機上創建一個名爲 .telemetry.cfg 的特殊文件。文件位置取決於您運行的操作系統:

  • MacOS: ~/.telemetry.cfg
  • Windows: %HOMEDRIVE%%HOMEPATH%\.telemetry.cfg

注意:如果您在 Chrome 中運行內容,請參閱本指南結尾的常見問題列表瞭解詳細信息。

設想這樣一種場景:Scout 在 IP 地址爲 192.168.1.20 的計算機的端口 7934 上運行。要連接到 Scout,您的.telemetry.cfg 文件可能如下所示:

TelemetryAddress=192.168.1.20:7934SamplerEnabled = trueCPUCapture = trueDisplayObjectCapture = falseStage3DCapture = false

最後四行分別對應 “Settings for New Sessions” 下的 Scout 選項,但此處需要重點注意的是,如果您執行的是遠程分析,則必須手動輸入這些代碼行。.telemetry.cfg 配置完畢後,只需運行您的遠程內容,它就會顯示在 Scout 中了。

在移動設備上遠程分析 AIR

Scout Companion 應用程序(iOS 和 Android 均提供這款應用程序)能夠簡化移動設備配置。安裝此應用程序後,您可以用它來定位 Scout,然後使用 Scout 配置要接收的數據。

要使用該應用程序,請執行下列操作:

  • 確保您的設備連接的 Wi-Fi 網絡與運行 Scout 的計算機連接的 Wi-Fi 網絡相同,然後啓動 Scout Companion App。它將會搜索運行 Scout 的計算機,向您顯示其找到的所有 Scout 實例列表。
  • 當顯示計算機的名稱時,單擊進行連接。
  • 在 Scout 桌面應用程序中,選擇您要蒐集的數據。您將會發現這些數據顯示在 Companion app 中。
  • 啓動您的 AIR Mobile 內容,將看到 Scout 中會顯示一個新的會話(參見圖 3)。
Adobe Scout 分析一款 AIR 移動設備遊戲
圖 3:Adobe Scout 分析一款 AIR 移動設備遊戲

在 Scout 中啓動會話

如果您運行的是本地 Flash 內容,或者按照上一節的說明配置遠程內容與 Scout 進行通信,那麼您已經做好妥善準備,可以開始執行分析操作。只需啓動您的內容(可以在瀏覽器中、通過單機版 Flash Player 啓動,也可以通過 Adobe AIR 啓動),Scout 中將會顯示一個新的會話。當您發現圖表中出現很多鮮明的色彩時,就可以確信運行正常!

Flash Player 僅會檢查 Scout 是否在加載 Flash 內容,因此如果您的內容在啓動 Scout 之前已經運行,您將必須進行重新加載。在屏幕左側,您將會看到一個打開會話列表,包括 SWF 名稱及其域名。如要阻止新數據傳入,請單擊會話旁邊的紅色方形按鈕(參見圖 4)。如果您停止運行 Flash 內容,則該會話將自動停止記錄數據,同時禁用停止按鈕。

Scout 中的活動會話及其停止按鈕
圖 4:Scout 中的活動會話及其停止按鈕

默認情況下,您加載的所有 Flash 內容均將在 Scout 中生成一個新會話。這樣,您將能夠真正輕鬆地開始執行分析,但與此同時,如果您使用該瀏覽器執行其他任務,那麼情況將會變得非常討厭;只要您加載帶有任何 Flash 內容的頁面,就會顯示新的會話。

爲了加強控制,您可以命令 Scout 篩選出不需要的會話。如果您單擊會話旁邊的篩選圖標(參見圖 5),Scout 將只會對同名 SWF 啓動新會話。這意味着,您可以瀏覽不同的網站,而不必擔心被會話所淹沒,但只要您重新加載內容,仍將顯示新會話。

篩選新會話
圖 5:篩選新會話

新會話設置

鑑於您已經能夠在 Scout 中啓動會話,下面可以開始思考要蒐集的數據類型。您會發現,在屏幕左側、會話列表的上方,有一個標有 Settings For New Sessions 字樣(參見圖 6)的區域。其中向您提供了各種類別的數據,您可以要求 Flash Player 發送這些數據。注意,某些 Scout 功能只有在您收集相關數據時纔會生效。

新會話設置
圖 6:新會話設置

啓動新會話之前,請選中您要收集的數據旁邊的方框。由於會話中途無法更改這項設置,因此事先想好要嘗試評估的事項至關重要。如果您希望評估性能,如某個 ActionScript 功能花費的時間,那麼只需收集低開銷數據。如未執行此操作,則計時數據可能不準確,因爲 Flash Player 必須額外執行操作收集和發送這些數據。

下面簡要描述一下這些數據類型:

  • Basic Telemetry 始終處於啓用狀態,旨在爲您提供 Flash Player 內部操作相關信息,並總結 CPU 和 GPU 內存的使用情況。
  • ActionScript Sampler 用於通過定期拍攝調用堆棧快照來衡量執行 ActionScript 代碼花費的時間。這種數據類型開銷極低,因爲它採用的是統計抽樣 模式。如果您抽取足夠長時間的樣本,就能夠準確界定耗時最長的功能。
  • CPU Usage 用於定期評估 Flash Player 佔用的 CPU 時間量,如操作系統報告所示。相應地,您會在 Mac OS 的 Activity Monitor 或 Windows 的 Task Manager 中看到這項數據。
  • DisplayList Rendering Details 用於詳細劃分 DisplayList 當前渲染的所有對象,並直觀地將它們映射到該屏幕。這樣,您將能夠了解哪些屏幕區域花費的渲染時間最長。
  • Stage3D Recording 用於捕獲您的內容執行的各項 Stage3D 命令,因此,您可以在 Scout 中重放並逐步執行這些命令。因爲很可能在短短几分鐘內生成千兆字節的數據,您可以選擇將記錄模式設置爲 delayed。這樣,就能夠控制 Scout 何時開始捕獲 Stage3D 數據。

請記住,無論打開除 Basic Telemetry 以外的任何類別,您的內容都必須啓用高級遙測功能。

使用 Scout 執行分析

Scout 用戶界面設計簡潔,便於使用且效率極高。其中包含大量可視化功能,有助於您瞭解數據及篩選出不必要的信息,從而快速找出性能問題根源。該用戶界面包含許多不同的面板(參見圖 7),起初看起來似乎有些應接不暇,但隨着您詳細瞭解各個部分,將能夠了解它們的組合方式。

Scout 用戶界面
圖 7:Scout 用戶界面

您可以調整面板位置,只需拖動標籤,然後將面板移動到您希望它顯示的位置。如果您關閉某個面板,則可以隨時從 Window 菜單中再次打開它。特定的面板佈局形式稱作工作區。您可以從 Window 菜單保存工作區並在不同的工作區之間切換。

您可以隱藏左側的側邊欄,然後通過單擊其摺疊按鈕即可顯示打開會話列表和新會話的配置選項(參見圖 8)。

摺疊側邊欄
圖 8:摺疊側邊欄

本節的剩餘部分將按照使用 Scout 時通常經歷的步驟順序介紹這些面板。最重要的面板是 Frame Timeline,它位於中央位置,並且包含很多圖表。它會向您顯示每幀 SWF 花費的時間明細,同時還會提供一些有關內存使用情況和事件的其他圖表。

爲使會話內部導航更加輕鬆,屏幕頂部還會顯示 Frame Timeline 的縮小視圖。這就是所謂的 Session Summary,因爲您可以通過它簡要查看整個會話活動峯值出現的位置。

Session Summary

如果您要跳轉到會話中的某個時間或事件(例如活動出現大峯值的位置),只需單擊您要查看的 Session Summary 部分。默認情況下,您會看到一個圖表,顯示每幀花費的時間,您還可以右鍵單擊它(參見圖 9)以顯示一些額外的圖表(參見圖 10)。

Session Summary 選項
圖 9:Session Summary 選項
Session Summary,顯示 Frame Time、CPU Load、Memory 和 Events
圖 10:Session Summary,顯示 Frame Time、CPU Load、Memory 和 Events

這些圖表對應於 Frame Timeline 中提供的圖標,您可以從中選擇任意圖表,從整個會話的角度整體瞭解該圖表。這在持續監控內存使用情況方面尤其有效。例如,如果您在足夠長的時間內運行內容,就會清楚地看到 Session Summary 中發生的緩慢內存泄露。

Frame Timeline

用於定位性能問題的 Scout 主面板就是 Frame Timeline。此面板頂部的圖表顯示的就是 Frame Time,它將會話分解爲多個獨立幀,並向您顯示 Flash Player 在每幀中花費的時間量(參見圖 11)。

Frame Timeline 面板
圖 11:Frame Timeline 面板

最值得注意的是紅線。它代表預算 時間,如果要滿足希望實現的幀速率,則每幀都必須低於此時間。例如,在運行速率爲每秒 30 幀 (fps) 的 SWF 上,預算爲每幀 33 毫秒(1000毫秒/30 幀)。換句話說,如果每幀花費的時間超過 33 毫秒,您的應用程序將開始出現停滯並跳幀,您一定不希望發生這種狀況!

圖 11 清晰地展示了哪些幀超出預算,需要小心留意。您可能會好奇爲什麼紅色預算線各有不同;這是因爲您可以動態更改 SWF 的幀速率,這個特定內容就是這種情況。

接下來,在 Frame Time 圖表中需要注意的是每一欄的顏色變化。每種顏色代表 Flash Player 執行的一種不同活動,因此,您可以查看各幀花最多時間執行哪項活動:

  • 藍色             執行 ActionScript
  • 綠色             DisplayList 渲染
  • 黃色             網絡和視頻
  • 橙色             其他(活動,如垃圾收集、事件處理等)

不要擔心記不住這類顏色編碼。Summary 面板(接下來我們將會進行介紹)會顯示每種顏色的含義。您還可以將鼠標懸停到圖表的特定部分,此時將會顯示工具提示,告知您這種顏色的確切含義(參見圖 12)。

Frame Timeline 面板中的工具提示
圖 12:Frame Timeline 面板中的工具提示

Frame Timeline 面板中還包含一些其他圖表。CPU Usage,顧名思義,一目瞭然,但要注意,如果您的計算機具有多個核心,CPU 使用率可能會超過 100%。此外,還有一個 Memory 細分圖表,圖表中的顏色對應於不同類型的內存(再次重申,Summary 面板中已經對這些顏色進行了闡釋)。

您可以通過切換 Frame Timeline 面板頂部的按鈕選擇要查看哪些圖表。圖 11 中只顯示了 Frame Time、CPU Usage 和 Memory 圖表。如果您單擊 Events,將會看到 Memory 圖表下彈出事件軌跡(參見圖 13)。每條水平軌跡代表一個特定類型的事件,藍色條帶的密集度用於表示每幀發生的每種類型的事件數量。

Frame Timeline 面板中的 Events
圖 13:Frame Timeline 面板中的 Events

事件軌跡如下所示:

  • Mouse 是否調度了任何 mouse 事件?
  • Keyboard 是否調度了任何 keyboard 事件?
  • Network 是否發生任何 I/O 操作??
  • Timer 是否使用 Timer 類?
  • Rendering 是否發生任何渲染?
  • Trace Events ActionScript  代碼中是否調用了任何 trace() 調用函數?

您可以看到,Frame Timeline 面板可讓您在應用程序中快速查找熱點,識別花費過多時間的位置,並確定相應的原因。

摘要

Summary 面板介紹了 Frame Timeline 面板的各圖表的顏色編碼,但這不止是一個文字說明而已。您可以在 Frame Timeline 中單擊拖動選擇幀範圍。Summary 面板隨後會對選定幀的數據進行總結,以便您查看這些幀的平均水平。

圖 14 顯示的 Summary 面板選擇了兩個幀。首先要注意的是,左上角的幀速率數值。此幀速率僅爲 1.8 fps,而目標幀速率爲 24.0 fps,因此幀速率超出預算 248%。內容運行不暢,您可能希望瞭解導致這種狀況的原因!

仔細觀察一下時間詳情,您可以看到,絕大部分時間花在執行 ActionScript 代碼方面。這意味着,您可能希望調查這些代碼的用途,然後嘗試進行優化。Scout 中還包含其他一些面板可以幫助您執行此操作,您將會在稍後進行仔細瞭解。請注意,如果您單擊右側的小齒輪圖標,就能切換顯示選項總時間(參見圖 14)與每幀平均時間。

Summary 面板
圖 14:Summary 面板

在這種情況下,由於 ActionScript 代碼顯然存在問題,您可能希望篩選出其他類別,以便集中精力執行 ActionScript。Scout 中包含很多不同的顏色,這可能會分散用戶的注意力,花點時間篩選出您不想看到的顏色。

單擊 ActionScript 類別,您將會看到其他類別變灰(參見圖 15)。更重要的是,Frame Timeline 也會被篩選出來,您可以看到,每個幀中均僅執行 ActionScript 代碼(參見圖 16)。事實上,Scout 中的所有顏色都會被篩選,從而便於您僅專注於您感興趣的數據。

在 Summary 面板中進行篩選
圖 15:在 Summary 面板中進行篩選
經過 Summary 面板篩選的 Frame Timeline
圖 16:經過 Summary 面板篩選的 Frame Timeline

除單擊某個類別進行篩選外,還可以展開一些類別以顯示更加詳細的信息。圖 17 顯示 Bitmap Memory 可以展開爲更詳細的分類。Frame Timeline 中顯示新顏色,因此您可以查看它們的演變過程。

在 Summary 面板中展開 Bitmap 內存
圖 17:在 Summary 面板中展開 Bitmap 內存

Top Activities

Top Activities 面板用於顯示 Flash Player 內部活動相關信息,並且比 Summary 面板更加詳細。它並未將時間分解爲多個高級類別(如 ActionScript),而是顯示詳細的活動細分類別,如處理特定事件(參見圖 18)。

Top Activities 面板
圖 18:Top Activities 面板

右側一列中的數值反映了每項活動花費的時間量,以及 Flash Player 在執行該活動方面耗費的時間比例。在這個示例中,大部分時間(54% 或 2,279 毫秒)均花在 enterFrame event 事件處理器上,因此優化這個處理器是一個不錯的主意。稍後在講解 ActionScript 面板時,我們還會返回這裏進行介紹。

Activity Sequence

Top Activities 面板顯示哪些活動花費的時間最多,但往往對於查看各項活動的精確序列十分有用。這是 Activity Sequence 面板的目的。與 Top Activities 面板(該面板會聚合多個幀的數據)不同,Activity Sequence 面板(參見圖 19)僅會向您顯示一個幀的信息(否則,數據太多無法顯示)。

Activity Sequence 面板
圖 19:Activity Sequence 面板

Activity Sequence 面板顯示一個幀內的活動的確切順序和嵌套關係。例如,在圖 19 中,您可以看到,92% 的時間用於處理 enterFrame event,這反過來導致 gameObjectDie 事件佔用 61% 的時間。您還可以發現,事件處理期間收集了大量垃圾,且文本佈局已經更新。

默認情況下,系統會從 Activity Sequence 和 Top Activities 面板中篩選出佔用時間不足 0.5 毫秒的活動,以便您集中精力處理最耗時的操作。您可以通過取消選中左上角的篩選按鈕來禁用這項功能。

請注意,此處的色彩方案與 Summary 面板保持一致,這樣您就可以輕鬆將不同面板中的數據關聯在一起。在 Summary 面板中篩選某個類別會將除您感興趣的類別以外的所有活動呈現爲灰色,這樣,您便可以專心處理自身要查找的信息。

ActionScript

迄今爲止,您已經瞭解了 Flash Player 的內部活動,但您最感興趣的方面或許是 ActionScript 3 代碼的用途。這部分信息將顯示在 ActionScript 面板中(參見圖 20)。

ActionScript 面板
圖 20:ActionScript 面板

首次查看 ActionScript 面板時,您將會看到一系列頂級函數調用,Flash Player 會在您的 ActionScript 代碼中調用這些函數。要展開查看整個調用堆棧,只需單擊 Top-Down 設置右側的 Expand All 按鈕(參見圖 21)。您還可以按住 Alt,然後單擊其中一個三角形完全展開它。

選擇 Expand All 後的 ActionScript 面板
圖 21:選擇 Expand All 後的 ActionScript 面板

您可以向下滾動調用堆棧,查找哪些本機調用佔用的時間最多。在圖 22 中,您可以看到,Context3D.present 調用最爲耗時,佔用 35% 的時間。

ActionScript 面板,用於顯示 Context3D.present 花費的時間
圖 22:ActionScript 面板,用於顯示 Context3D.present 花費的時間

默認情況下,ActionScript 面板會自上而下地顯示調用堆棧視圖,其中入口點位於頂部,本機調用位於堆棧底部。顛倒此視圖查看各函數耗費的時間量往往十分有效。只需從面板頂部選擇 Bottom-Up。

您還可以在 Summary 面板中展開 ActionScript 類別,大概瞭解每個包花費的時間量。這提升了 ActionScript 面板中函數顏色編碼的優勢。本機函數呈深藍色,自定義 ActionScript 呈淺藍色,而 Stage3D 則呈碧綠色。圖 23 顯示了這些顏色所在的 Bottom-Up 視圖。

選擇 Bottom-Up 後的 ActionScript 面板
圖 23:選擇 Bottom-Up 後的 ActionScript 面板

您還可以使用 Summary 面板篩選出未包含在特定包中的所有函數,從而輕鬆地查找並集中處理自己感興趣的代碼。圖 24 顯示了集中處理 invawayders 包時的外觀狀態。

invawayders 包上篩選出的 ActionScript 面板
圖 24:invawayders 包上篩選出的 ActionScript 面板

在 Bottom-Up 視圖中,父節點是獨立函數,其中 Self Time 列是指該函數在選定幀中所花費的總體時間(不包括對其他函數可能執行的任何調用)。當展開父節點時,您會看到一個反向調用堆棧,旨在顯示哪些代碼調用了這個父函數,以及這項調用對於父函數的 Self Time 造成了哪些影響。

ActionScript 面板顯示 Frame Timeline 選定幀中執行的 ActionScript 代碼的聚合視圖。重要的是要記住,此數據通過統計抽樣獲得,這意味着抽取的樣本越多,獲得的數據越準確。如果您看到右上角顯示“哭臉”,則表明您需要選擇更多的幀!

ActionScript 面板的另一項有用功能在於,您可以使用 Top Activities 面板和 Activity Sequence 面板進行數據交互。在這兩個面板中,您都可以單擊特定的活動篩選 ActionScript 面板。舉例來說,圖 25 顯示了單擊 Top Activities 面板中的 mouseDown 事件後的 ActionScript 面板視圖。其中僅顯示在這個特定的事件處理程序中執行的 ActionScript。

根據 mouseDown 事件篩選 ActionScript 面板
圖 25:根據 mouseDown 事件篩選 ActionScript 面板

您可以篩選任何活動,而不僅僅是 ActionScript 事件處理程序。例如,圖 26 顯示按垃圾收集篩選的 ActionScript 面板。與 ActionScript 內部調用的事件不同,您可以在代碼執行期間觸發垃圾收集器。按垃圾收集篩選可讓您查看哪些函數導致垃圾收集。您可以看到它內聯到調用堆棧。如果某個特定函數造成大量垃圾收集,可能會產生過量內存分配工作。

按垃圾收集篩選 ActionScript 面板
圖 26:按垃圾收集篩選 ActionScript 面板

Trace Log

與 ActionScript 代碼採樣一樣,Scout 會收集代碼輸出的所有 trace() 語句。Frame Timeline 的事件跟蹤記錄顯示了哪些幀執行了 trace() 語句,如果您選擇某個幀,它們會顯示在 Activity Sequence 面板中。您也可以選擇任意數量的幀,並在 Trace Log 面板中查看完整的 trace() 輸出(參見圖 27)。

Trace Log 面板
圖 27:Trace Log 面板

可以看到,面板頂端的工具欄中有兩個按鈕。第一個按鈕允許您打開和關閉各 trace() 語句旁邊的時間戳的顯示。圖 27 中打開了時間戳的顯示。第二個按鈕允許縮小選定幀,僅包含 trace() 輸出與您突出顯示的內容相符的幀。例如,在圖 27 中單擊此按鈕,Scout 會將您轉到輸出爲 “SUPER DUPER :AbstractScene” 的幀,時間爲 0:07.902。

Session Info

Scout 可讓您與他人輕鬆地共享數據。例如,如果您在某些 Flash 內容中發現性能問題,可以記錄 Scout 會話,將其保存爲 FLM 文件,並將其發送給同事,從而幫助調試問題。由於所有這些數據,您很可能跟丟重要信息,如哪臺計算機上運行 Flash Player,以及使用哪個 Flash Player 版本。

Scout Session Info 面板將顯示此信息。它會劃分爲多個部分,從而爲您提供有關當時運行的 SWF、Flash 運行時、計算機操作系統和硬件,以及您要求 Scout 收集的這些類型的遙測數據的詳細信息(參見圖 28)。

Session Info 面板
圖 28:Session Info 面板

DisplayList Rendering

現在,您已經探討了很多面板,從而幫助您診斷 Flash Player 當前執行的操作,以及 ActionScript 代碼執行的操作。但是,如果您的問題與渲染有關,該怎麼辦?Scout 的功能重點之一是,幫助您深入探究渲染問題。

如果您使用傳統 Flash DisplayList 進行渲染,可以在新會話設置中打開 DisplayList Rendering Details,收集有關當前操作的詳細信息。當您選擇某個幀時,您可以在 DisplayList Rendering 面板中查看此數據(參見圖 29)。

Heat Map 模式下的 DisplayList Rendering 面板
圖 29:Heat Map 模式下的 DisplayList Rendering 面板

面板左側是選定幀的所有渲染通道列表,以及它們花費的時間。渲染通道並不總是與幀邊界完全一致,您可能會發現某條渲染通道始於一個幀,而止於另一個幀。如果您發現每個幀包含多個完整的渲染通道,這可能表明您的渲染操作過於頻繁。例如,您可能在不必要時調用 updateAfterEvent()

默認情況下,DisplayList Rendering 面板會在 Heat Map 模式下打開。這個顯示屏幕會表明渲染了哪些區域。最亮的區域是指花費渲染時間最長的區域,您可以單擊某個區域使其突出顯示在右側的樹中。這將讓您詳細分析該渲染通道發生的狀況,以及每個步驟持續的時間。

您可以切換到 Regions 模式獲取更加詳細的渲染通道視圖(參加圖 30)。它將屏幕區域分爲四個不同的類別,Flash Player 會將其用作渲染引擎的一部分。瞭解這些類別有助於您大幅改善渲染效果;例如,您不希望緩存在各幀上不同的內容。

Regions 模式下的 DisplayList Rendering 面板
圖 30:Regions 模式下的 DisplayList Rendering 面板

四個類別(顯示在面板頂部)均經過顏色編碼,並且每一個都可以打開和關閉:

  • Regions(紅色)是包含需要重新繪製的屏幕像素的邊界矩形。這些信息與您從調試版本的 Flash Player 中的 DisplayList Rendering 功能中獲取的信息相同。
  • Updated Surfaces(藍色)是此渲染通道中更新的平面。平面是指 Flash Player 使用濾鏡、混合模式、位圖緩存和位圖在內部創建的位圖。
  • Cached Surfaces(黃色)是運行時緩存的平面,因此可以在多個幀中進行重用。僅會顯示在此渲染通道上進行重新渲染的緩存。
  • Display Objects(綠色)是您添加到 DisplayList 的矢量內容。同樣,僅會顯示經過渲染的顯示對象。

注意,右側的活動也採用同樣的方案進行顏色編碼。您可以單擊屏幕上的任何區域突出顯示對應的活動(參見圖 31)。條目旁邊的小圓點表示區域經過重新繪製,這是因爲該區域需要更新。

在 DisplayList Rendering 面板中選擇圖形對象
圖 31:在 DisplayList Rendering 面板中選擇圖形對象

Stage3D Rendering

如果您開發的是 Flash GPU 加速內容,您需要使用新型 Stage3D API。這是一種運用與平臺無關的方式使用 GPU 加速桌面(Adobe AIR 3.0 和更高版本以及 Flash Player 11 和更高版本)和移動(Adobe AIR 3.2 和更高版本)應用程序上的渲染。您可以開發 3D 內容,也可以使用 Starling 等 2D 框架(運用 GPU 渲染 2D 內容)。

如果您在 Scout 中打開 Stage3D Recording,Flash Player 將發送您的內容對 Scout 執行的每一項 Stage3D 命令。換句話說,系統將記錄您對 Context3D 對象執行的所有調用操作。Stage3D Rendering 面板可讓您按步驟重放這些命令(參見圖 32)。

Stage 3D Rendering 面板
圖 32:Stage 3D Rendering 面板

在此面板中,您可以在選定的幀中看到一個包含所有 Stage3D 命令的列表。您可以單擊任何繪製調用 (Context3D.drawTriangles),面板左側將進行相應更新,以便在執行調用後即時向您展示後臺緩衝區的狀態。按空格鍵將跳轉到下一個繪製調用(按 Backspace 鍵可跳回前一個繪製調用),從而十分輕鬆地完成場景渲染(參見圖 33)。

通過逐步執行繪製調用創建的部分渲染場景
圖 33:通過逐步執行繪製調用創建的部分渲染場景

如果您在內容中使用渲染到紋理,則 Scout 將自動向您顯示當前選擇的渲染目標(即要渲染的紋理效果),而不是後臺緩衝區。

每項 Stage3D 命令均以緊湊的格式顯示,參數則以傳遞到該命令的順序排列。如果您忘記各參數的含義,可以右鍵單擊命令列表,然後選擇 Show Argument Names。

Stage3D Rendering 面板可以逐步完成繪製調用,因爲 Scout 包含一個內部運行的 Stage3D 引擎副本。運行時不會將位圖發送到 Scout;而是發送各 Stage3D 命令和您提供的參數,如紋理、程序和緩衝區。因此,您可以使用 Scout 運用有趣的方式調查和探索場景及調試內容。

Wireframe 模式(可以從面板(參見圖 34)頂部的工具欄中開啓)向您顯示場景預覽視圖且僅呈現三角形邊緣,以便您透視各對象的後臺信息及瞭解繪製的內容。

Stage3D wireframe 模式
圖 34:Stage3D wireframe 模式

當您需要打開 Stage3D Recording 使用 Stage3D Rendering 面板時,往往會捕獲有關 GPU 內存的有用信息。有關任何 Stage3D 內容,可以參閱 Summary 面板(參見圖 35)的 GPU Memory 部分,也可以在 Session Summary 和 Frame Timeline 中打開對應的圖表。

Summary 面板中的 GPU 內存使用信息
圖 35:Summary 面板中的 GPU 內存使用信息

您可以查看每個場景的繪製調用數量及資源內存分類,通常以您上傳的紋理爲主。

Stage3D Program Editor

由於 Scout 包含有關應用程序執行的 Stage3D 命令的完整信息,您可以通過交互方式修改每項命令並瞭解特定命令會對渲染產生哪些影響。每次調用 Context3D.drawTriangles 時, 您都是在告訴 GPU 運行兩個程序:一個頂點程序(用於在屏幕上定位多個三角形)和一個 片段程序(用於爲每個三角形的各像素着色)。Scout 可讓您運用 Stage3D Program Editor 通過交互方式查看和編輯這些程序。

在 Stage3D Rendering 面板中,單擊某個繪製調用(參見圖 36),然後切換到 Stage3D Program Editor(參見圖 37),您可以從 Window 菜單中打開該編輯器。它將向您展示該繪製調用執行的頂點程序和片段程序的 AGAL 代碼。

選擇繪製調用的 Stage3D Rendering 面板
圖 36:選擇繪製調用的 Stage3D Rendering 面板
Stage3D Program Editor
圖 37:Stage3D Program Editor

您可以通過交互方式編輯各程序,然後單擊 Upload,告訴 Scout 使用修改的程序重新渲染場景。圖 38 顯示 Stage3D Rendering 面板中的場景,其中選定繪製調用的片段程序如下所示:

//fragment program (agal 1)tex ft0, v0, fs1 <2d, linear, miplinear, repeat>tex ft1, v1, fs2 <2d, linear, miplinear, repeat>mul oc, ft0, ft1

此程序的前兩行取樣自兩個不同的紋理,最後一行將各紋理彙總到一起,確定該像素的輸出顏色。第一個紋理 (fs1) 是建築物牆壁的砌磚模式,第二個紋理 (fs2) 針對陰影。

原始場景,沒有經過任何程序修改
圖 38:原始場景,沒有經過任何程序修改

要了解程序修改的工作原理,請更改最後一行,這樣無需綜合兩個紋理,即可根據第一個紋理設置顏色:

//fragment program (agal 1)tex ft0, v0, fs1 <2d, linear, miplinear, repeat>tex ft1, v1, fs2 <2d, linear, miplinear, repeat>mov oc, ft0
無陰影場景
圖 39:無陰影場景

當您單擊 Upload 時,您可以看到通過新程序渲染的場景(參見圖 39)。您將會發現,某些繪製調用變成紫色,表明已經修改了它們使用的程序。您可以在 Stage3D Program Editor 中單擊 Reset 以返回到原始程序。

接下來,您可以更新該程序,從而僅顯示第二個紋理(陰影):

//fragment program (agal 1)tex ft0, v0, fs1 <2d, linear, miplinear, repeat>tex ft1, v1, fs2 <2d, linear, miplinear, repeat>mov oc, ft1
僅顯示陰影效果的場景
圖 40:僅顯示陰影效果的場景

再次單擊 Upload 後,您可以看到僅會呈現陰影(參見圖 40)。

這種交互能力十分適用於調試,您還可以在學習如何編寫 AGAL 程序時使用它。

在 Scout 中搜索

Scout 1.1 版本提供了兩種新特性,讓您能夠更輕鬆地圍繞一個會話進行導航。該版本中包含一個全新的 Search 菜單,其中的第一項是 Go to Frame,如圖 41 所示。該選項允許您快速跳轉到會話中的特定幀。

Go to Frame
圖 41:Go to Frame

第二項也是最爲有用的特性就是 Find。該選項將在屏幕底部打開 Find 欄,您可在其中鍵入希望在當前會話中搜索的文本(如圖 42 所示)。

在 Scout 中搜索
圖 42:在 Scout 中搜索

在您鍵入時,Scout 將在所打開的全部面板中搜索您輸入的文本。它將灰顯所有不包含該文本的內容,使您能輕而易舉地將注意力集中在所查找的內容上。它還會告訴您在打開的面板中找到了多少匹配項。圖 43 展示了在 ActionScript 和 Top Activities 面板中執行的搜索,搜索包含“context”這個詞的一切內容。根據所打開的具體面板,Scout 將搜索 ActionScript 函數名稱和活動、trace 語句、顯示對象的名稱和 Stage3D 命令。

在可見面板中搜索文字
圖 43:在可見面板中搜索文字

只需單擊“>”或“<”按鈕,Scout 即可在各搜索結果中前後移動。當前結果以較大的字體顯示,便於您識別。在結果間跳轉時,Scout 將打開樹中的任意行,並通過滾動來保證結果可見。在大型應用程序中查找特定函數調用時,這項功能極爲有用。

或許最爲有用的功能就是查找不同幀內文字的能力。如果單擊“>>”按鈕,Scout 將搜索當前選定幀結尾之後的內容,直至找到包含您查找的文字的幀爲止。隨後 Scout 將跳轉到該幀,如果搜索結果未處於可見面板中,它將打開相應的面板,並滾動到結果處。“<<”按鈕的功能與上述按鈕相同,唯一的差別就是向前搜索。

常見問題解答

下面是一組常見問題,在您開始使用 Scout 時可能會有所幫助。

爲什麼我無法將 Flash Player 連接到 Scout?

如果您沒有看到任何會話顯示,請嘗試執行以下操作:

  • 確保您的 Adobe Scout 版本爲最新版本。
  • 確保您的 Flash Player 版本足夠新。
  • 對於移動項目,請確保使用最新版本的 SDK 或 Flash Builder 進行構建。
  • 對於移動項目,請確保已經連接配套的應用程序。
  • 同時,確保 .telemetry.cfg 文件位於正確的位置,並且包含適當的內容。
  • 驗證 Scout 服務器偵聽。打開 Scout,然後在 Web 瀏覽器中鍵入 localhost:7934。如果“服務器斷開連接”、“未收到數據”或者出現某種類似問題(因爲 Scout 並非 HTTP 服務器),應當迅速做出響應。Scout 應顯示錯誤消息“由於遙測數據無效,無法啓動會話”。如果瀏覽器長期停止運行,而後返回“找不到服務器”或類似消息,則套接字無法正常工作。請檢查您的防火牆和安全設置。您可以嘗試在 Preferences > Listen For New Session On Port 下更改 Scout 端口。如果您執行此操作,請記得更新 .telemetry.cfg 文件。

如果無法連接 iOS 或 Android Scout 配套應用程序,請嘗試執行以下操作:

  • 確保您的 Scout 配套應用程序爲最新版本。
  • 如果配套應用程序找不到您的計算機,請確定當您選擇 Other 並鍵入 IP 地址時是否能夠連接。
  • 確定使用另一應用程序時從設備是否能夠連接到您的應用程序。您可能希望嘗試設置計算機上的 Web 瀏覽器,然後進行連接:
    • 在 Mac OS 上,轉到 System Preferences > Sharing,然後啓用 Web Sharing。
    • 在 Windows 上,啓用 Internet Information Services (IIS)。
    • 測試您是否可以從您的計算機網站訪問其本身。
    • 現在,嘗試從您的設備中執行同樣的操作。

如何從 Chrome 執行遠程分析?

如果您在 Chrome 上使用 Flash Pepper 插件(默認情況下啓用),.telemetry.cfg 文件的位置將不那麼方便。這是因爲 Chrome 的沙盒限制了 Flash Player 可以讀取文件的位置。位置如下所示(文件格式完全相同):

Mac OS:   ~/Library/Application Support/Google/Chrome/Default/

Pepper Data/Shockwave Flash/UserHome/.telemetry.cfg

Windows:  %HOMEDRIVE%%HOMEPATH%\AppData\Local\Google\Chrome\

User Data\Default\Pepper Data\
Shockwave Flash\UserHome\.telemetry.cfg 

“等待 GPU”是什麼意思?

在 Stage3D 應用程序中,您的 CPU 和 GPU 必須彼此同步才能獲得所需的幀速率。任何一項過載都會導致幀率下降。如果花費大量時間“等待 GPU”,這意味着您的 GPU 過載。有以下幾種可能情形:

  • GPU 速度不得超過 60 fps。如果您在超過此速度的情況下更新屏幕,則操作會遭到阻止。如果您的速度剛好達到 60 fps,則不用擔心任何 GPU 等待時間。
  • 如果您的幀速率一貫很低,但要求 GPU 執行的操作過多。您將不得不優化您的 3D 代碼(或者在一款功能更加強大的設備上運行)。例如,嘗試呈現更少的三角形、使用更簡單的 AGAL 程序或者使用更小的紋理。目前,Scout 無法直接向您顯示 GPU 上的緩慢項目,因爲它無法衡量 GPU 上的時間。不過,如果您打開 Stage3D Recording 並查看 Stage3D Rendering 面板,就可以看到您究竟在執行哪些 Stage3D 命令,逐步查看並瞭解它們對於該場景造成的影響。您可以設法提高它的運行效率。
  • 如果您的幀速率不斷波動、震盪或出現鋸齒模式,您可能會遇到 Flash Player CPU 與 GPU 同步相關問題。Adobe 正在努力解決這個問題。

Scout 發生崩潰或顯示錯誤,該怎麼辦?

如果 Scout 發生崩潰,沒有時間保存會話,您可以從以下位置恢復數據,您將會在這些位置發現一個或多個 FLM 文件:

Mac OS:  /var/folders/… …/Adobe Performance Data

Windows:  %HOMEDRIVE%%HOMEPATH%\AppData\Local\Temp\Adobe Performance Data

請注意,在 Mac OS 上,實際位置可能會有所不同,因此最好的查找方法是在 Finder 中轉到 /var/folders,然後搜索 "Adobe Performance Data"。

如果您嘗試打開 FLM,Scout 再次崩潰,而後您發現一個錯誤。如果您提交 FLM,Adobe 將不勝感激,這樣我們才能解決這個問題!

如果發生錯誤,Scout 日誌中可能會提供詳細信息:

Mac OS:  ~/Library/Preferences/Adobe/Scout/1.0/logs

Windows:  %HOMEDRIVE%%HOMEPATH%\AppData\Roaming\Adobe\Scout\1.0\logs

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章