[WebView學習之五]:調試Web Apps

標籤：android   debug   webapps   webview   

       上一篇我們學習了( [WebView學習之四]:遷移到Android4.4版本的WebView),今天我們來繼續學習。

       (部落格地址:http://blog.csdn.net/developer_jiangqq),轉載請註明。

       Author:hmjiangqq

       Email:[email protected]  

    如果你正在Android4.4或者更高的版本上面測試你的Web應用程式(Application)，你可以使用Chrome開發工具進行遠端偵錯你的Web頁面，該方法同時也支援Android低版本。更多資訊請查看:RemoteDebugging on Android.

          如果你沒有Android4.4或者更高版本的裝置，那麼你可以使用控制台JavascriptAPIs在logCat中列印日誌訊息來調試Javascript。如果你熟悉使用Firebug或者Web Inspector，那麼你也可能熟悉使用控制台(console,例如:console.log())。AndroidWebkit架構同樣支援很多相同工恩呢剛的APIs。當我們調試Android瀏覽器或者我們自己的WebView的時候，我們可以從Web頁面擷取日誌訊息。本文主要講解如何使用控制台APIs來進行調試。

 

(一)在Android瀏覽器中使用控制台APIs(Using Console APIs in theAndroid Browser)

        當你調用console方法(使用DOM對象 window.console)會在logcat中列印日誌。例如：在網頁中你可以執行一下Javascript代碼:

        console.log("HelloWorld");

         然後在logCat中會列印出來一下的日誌資訊:

        Console: HelloWorldhttp://www.example.com/hello.html :82

        具體的列印出來的訊息的格式會跟著Android系統的版本走。在Android2.1以上來自Android瀏覽器的控制台資訊會帶有"browswer"。在Android1.6以下，Android瀏覽器資訊會帶有"WebCore"。

        AndroidWebKit架構沒有實現其他案頭瀏覽器所有的控制台資訊APIs功能,但是你可以使用基本的一些日誌方法:

<span style="font-size:18px;">1.console.log(String)2.console.info(String)3.console.warn(String)        4.console.error(String)</span>

     還有一些其他的控制台方法，可能和其他Web瀏覽器表現的效果不太一樣。

 

(二)在WebView中使用控制台APIs(Using Console APIs in WebView)

        上面我們介紹的控制台APIs在WebView中也通知支援調試。如果你的啟動並執行裝置在Android2.1以上版本，那麼你必須要提供WebChromeClient類並且實現onConsoleMessage()方法來列印日誌到控制台.然後你使用setWebChromeClient()方法把綁定WebChromeClient到你有的WebView中。

        例如:為了Android API 7版本,實現onConsoleMessage(String,int,String)方法:

<span style="font-size:18px;">WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebChromeClient(new WebChromeClient() {  public void onConsoleMessage(String message, int lineNumber, String sourceID) {    Log.d("MyApplication", message + " -- From line "                         + lineNumber + " of "                         + sourceID);  }});</span>

當然如果你的API的版本最低是8或者更高時，你可以實現onConsoleMessae(ConcoleMessage)方法,例如:

<span style="font-size:18px;">WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebChromeClient(new WebChromeClient() {  public boolean onConsoleMessage(ConsoleMessage cm) {    Log.d("MyApplication", cm.message() + " -- From line "                         + cm.lineNumber() + " of "                         + cm.sourceId() );    return true;  }});</span>

   ConsoleManager也提供了MessageLevel對象表示控制台上面的資訊的類型,你可以用messageLevel()方法來確定日誌訊息的緊急嚴重性，並且採取相應的措施。

    不論你使用onConsoleMessage(String,int,String)還是onConsoleMessage(ConsoleManager)，當你在Web頁面上面執行控制台方法的時候，Android會在適當的地方調用onConsoldeMessage()方法以便你可以發生錯誤。例如上面的代碼，列印的日誌如下:

               HelloWorld -- From line 82 of http://www.example.com/hello.html

[WebView學習之五]:調試Web Apps