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 的主頁也可以得到更多的資訊。

CodeIgniter 1.7.2 更新紀錄

1.7.2

釋出日期：2009.09.11
SVN Revision：1737

Libraries

• 新增 Cart Class
• File Uploading Class 增加 $config['file_name'] 參數，可以變更上傳檔案的檔名。
• 更改 user-agents 的清單順序，讓 Safari 可以更精準地被確定。

Database

• escape() 裡頭用 is_* method 取代 gettype()，因為未來的 PHP 版本可能會改變這個 output 內容，因為未來的 PHP 版本可能會改變這個 output 內容
• 更新所有 database driver，使 escape_str() 可以處理 array
• DB driver 增加 reconnect()，可以在一長段 idle 之後用來試著保持連線或是重新建立連線。
• 增加 escape_like_str()：在使用 like 條件的時候可以對字串作 escape 處理
• 用新的 like escape 處理機制，更新 Active Record 的部份。
• 修改 MSSQL 的 driver，使用 mssql_get_last_message() 來取得錯誤訊息

Helper

• Form helper 增加 form_multiselect()
• 修改 Form helper 的 form_hidden()，可以處理多維度的 array
• 修改 Form helper 的 form_prep()，keep track of prepped fields to avoid prep/mutation from subsequent calls which can occur when using Form Validation and form helper functions to output form fields.
• 修改 Directory helper 的 directory_map()，可以顯示隱藏檔案、讀目錄出錯會回傳 FALSE
• 讓 Smiley helper 可以在輸入多個 field 時正常運作、以及在最後游標位置插入表情符號的功能。

General

• 相容於 PHP 5.3.0
• 修改 show_error()，使之回傳 HTTP server 的 response code。
• 修改 show_404()，會送出 404 的 status code、移除 error_404.php template 中與 non-CGI 相容的 header()
• Common function 增加 is_php()，好作 PHP 版本的比對
• 增加兩張 CodeIgniter 小抄（感謝 DesignFellow.com）

Bug Fix

• 修正 user guide、example 裡頭各種 typo（#6743, #7214, #7516, #7287, #7852, #8224, #8324, #8349）。
• 修正 Form Validation 當中，多個 callback 敘述不會運作的錯誤
• doctype helper 的預設值總是缺少一個「1」
• 修正 Language class 在找不到檔案室輸出錯誤的錯誤
• 修正 Calendar class 當以短名輸出「May」的錯誤
• 修正 ORIG_PATH_INFO 允許 URI 只有一個「/」
• 修正 Oracle 跟 ODBC driver 發生的 fatal error（#6752）
• 修正 xml_from_result() 會檢查一個不存在 method 的錯誤
• 修正當送出多個 field 時，Database Forge add_column 與 modify_column 不會跑迴圈的錯誤
• 修正 File Helper 改使用 DIRECTORY_SEPARATOR 這個常數而不是「/」
• 當嘗試使用 sendmail 但是 server 卻把 PHP 的 popen() 關掉時，預防 PHP 發生錯誤
• 修正當 PHP 的資料型態不符合 XML-RPC 型態時，會導致 XML-RPC 資料當中 PHP 發生錯誤的 bug
• 修正 XML-RPC class 在 parse dateTime.iso8601 時的錯誤
• xss_clean() 的字串替換改成大小寫有別
• 修正 form_textarea() 在 form data 並沒有正確 prep 時的錯誤
• Fixed a bug in form_prep() causing it to not preserve entities in the user's original input when called back into a form element
• 修正 _protect_identifiers() 當 swap prefex（$swap_pre）還沒有被偵測到的錯誤。
• 修正當 400 status header 與「不允許的 URI 字元」一起送出時，無法與 CGI 環境整合的錯誤
• Fixed a bug in the typography class where heading tags could have paragraph tags inserted when using auto_typography().

ColorPicker (auroris) Bug Fix

技術提供：aries

「http://code.google.com/p/auroris/」這是一個 GWT 上的 3rd party library，負責提供還不錯的 color picker 元件。不過，在實際使用的時候，卻會有「某些時候」中間那條直立漸層色條出不來的 bug。經過一番血戰之後，終於抓到了... 設定顏色的時候少一個「#」

//ColorPicker.java 的片段
    public void onClick(Widget sender) {
        if (sender == rbHue) {
            // skip
        } else if (sender == rbSaturation) {
            if (colorMode != SliderMap.Saturation) {
                colorMode = SliderMap.Saturation;
                slidermap.setColorSelectMode(SliderMap.Saturation);
                sliderbar.setColorSelectMode(SliderBar.Saturation);
                slidermap.setOverlayColor("transparent");
                sliderbar.setLayerColor("#ffffff", SliderBar.BarC);
                sliderbar.setLayerOpacity(100, SliderBar.BarD);
            }

            slidermap.setOverlayOpacity(100 - saturation);
            /* ERROR
             * sliderbar.setLayerColor(tbHexColor.getText(), SliderBar.BarD);
             */
            sliderbar.setLayerColor("#" + tbHexColor.getText(), SliderBar.BarD);

            sliderbar.setSliderPosition(256 - (int) ((new Integer(saturation)
                    .floatValue() / 100) * 256));
            slidermap
                    .setSliderPosition(
                            (int) ((new Integer(hue).floatValue() / 360) * 256),
                            256 - (int) ((new Integer(brightness).floatValue() / 100) * 256));
        } else if (sender == rbBrightness) {
            // skip
        } else if (sender == rbRed) {
            // skip
        } else if (sender == rbGreen) {
            // skip
        } else if (sender == rbBlue) {
            // skip
        }

        if (colorMode == SliderMap.Red || colorMode == SliderMap.Green
                || colorMode == SliderMap.Blue) {
            // skip
        }
    }

其實造成「某些時候」才會出問題的原因不在這裡，而是 HTML 碼有沒有這個「
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">」。拿掉的話，錯誤也就不會發生，不過，不怎麼建議用這招就是了。

測試環境：

• GWT 1.7
• FireFox, Chrome（IE 不會出問題）