2009-09-17

GWT 的 Debug Panel (3rd party lib) 介紹

原文網址:http://googlewebtoolkit.blogspot.com/2009/07/introducing-debug-panel-for-gwt.html

Debug Panel 最主要的用途,是提供開發人員在 debug client 端程式碼時,一些關於 application 的效能資料。用 GWT 建立的 web application,大部分在 client 端的環境運作,這是開發人員不太能控制或存取的。Debug Panel 提供開發人員一個工具,除去 client 環境的阻礙以便於診斷問題所在、調整或加強效能以助於 application 測試。

就像所有的 application,測試及品質保證(QA)對於 GWT application 也是很重要的。也因為 GWT application 是使用者介面,所以效能測試是非常重要的。但是,在 browser 上運作的 application,要測量它的效能不是件容易的事情。那些在 client 端才變動的部份(例如 RPC, DOM 的更新)、以及 GWT 讓你不再自己撰寫 JavaScript 的狀況下,要找出效能瓶頸就有點困難了。要自動化效能測試、以及取得 RPC 精確的反應時間,就更加困難。此刻就是 Debug Panel 登場的時候啦!這是一個外掛的 library,可以輕鬆地加到 GWT application 當中。它提供你效能面的數據、理解表面之下的運作,並且將這一切自動化!

下面是 Debug Panel 的真相:

Debug Panel 展示了調用 EchoService 的統計資料、以及起始時間。很明顯的,RPC 非常快就做完了。其中最慢的部份是在等待 server 的回應,花了 121ms;serialize request 跟 deserialize response 都花了 19ms;更新 server 回傳的資料到 UI 上頭花了 2ms。這些事你會想要看到的數據。

下面是 Debug Panel 的另一個真相:

這次有點不一樣,這個 application 在 Hosted 模式下運行時,在 RPC 的過程中炸了一個 exception。當你把 application 轉譯成 JavaScript 時,stack trace 很理所當然地會是 JavaScript 的 stack trace。exception panel 是 Debug Panel 裡頭的一個延伸。GWT 的開發者可以針對自己的需求,把客制化的 panel 加到 Debug Panel。Debug Panel 提供一個 framework,讓你可以用一個輕量級的元件加到你的 application 以顯示相關的 debug 資料,並且可以傳遞相關資料給 Debug Panel,還不太會影響到執行效率。

事實上,你可以在不改任何程式碼的情況下,把 Debug Panel 掛到一個已經存在的 application。這也表示在 compile JavaScript 時不用作啥改變。你可以讓 GWT application 在處理內部 IP 時讓 Debug Panel 起作用,其他狀況下則關掉。

試試看 Debug Panel 的線上範例、也看一下 source code,你就會發現使用起來有多簡單啦。到我們在 Google Code 的主頁也可以得到更多的資訊。