androidで超簡単にWebViewのHTMLを確認する方法

サーバから送られてくるurlでWebViewが白画面になり表示されない！
くそーhtmlどうなってんだー！

こんな時がありますね。はい。


で調べてみると大体「WebViewクラスの↓これを使ってやりましょう」と書いてあるわけです。

```
WebView#addJavascriptInterface(Object object, String name);
```

今回紹介するのは２つの方法
①addJavascriptInterfaceを使う方法
②Google Chrome のinspecterを使う方法  ←  超簡単

#addJavascriptInterfaceを使う
##addJavascriptInterfaceとは

addJavascriptInterface(Object object, String name)はjavascriptから
Android側にコールバックするためのinterfaceを追加できるメソッドです。

例えばMyClassのcallMe()メソッドをjavascript側から呼びたいときは 3 STEP

①MyClass実装

```
public class MyClass
{
    public void callMe()
    {
        // call me な感じの処理
    }
}
```


②Interfaceを追加

```
webView.addJavascriptInterface(new MyClass(),"MyClass");
```

③javascript側で実行

```
<script>
MyClass.callMe();
</script>
```

##JavascriptInterface

Android 4.2以降はaddJavascriptInterfaceに追加するメソッドに
「@ JavascriptInterface」の[アノテーション](http://qiita.com/KEN0331/items/b8f540e17ce9f6e2dedc)を付与する必要が出てきました。


↓つまりこういうことです

```
public class MyClass
{
    @JavascriptInterface
    public void callMe()
    {
        // call me な感じの処理
    }
}
```

JavascriptInterfaceアノテーション指定のメソッドを1つも持たないクラスを
追加しようとするとaddJavascriptInterfaceがビルドエラーになります。


##HTMLソース表示
ではこれらを踏まえてどうやってHTMLソースをアプリ画面に表示するか

例えば、WebView表示用の MyWebViewActivity というアクティビティの場合こんな感じ

```
public class MyWebViewActivity extends Activity {
    private Handler handler = new Handler();
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
         
        WebView web = (WebView) findViewById(R.id.webView);
        web.getSettings().setJavaScriptEnabled(true);
        web.getSettings().setBuiltInZoomControls(true);
        web.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {    // STEP3
                view.loadUrl("javascript:window.MyWebViewActivity.viewSource(document.documentElement.outerHTML);");
            }
        });
        web.addJavascriptInterface(this, "MyWebViewActivity");    // STEP1
        web.loadUrl(url);
    }
     
    @JavascriptInterface    // STEP2
    public void viewSource(final String src) {
        handler.post(new Runnable() {
            @Override
            public void run() {
                TextView text = (TextView) findViewById(R.id.textView);
                text.setText(src);    // STEP4
            }
        });
    }
}
```

###解説
①interface追加

```
web.addJavascriptInterface(this, "MyWebViewActivity");    // STEP1
```
まずはMyWebViewActivity自身をJavascriptInterfaceとして追加してます。  

  
②アノテーション指定

```
    @JavascriptInterface    // STEP2
    public void viewSource(final String src) {
        handler.post(new Runnable() {
            @Override
            public void run() {
                TextView text = (TextView) findViewById(R.id.textView);
                text.setText(src);
            }
        });
    }
```
javascript側から呼び出すメソッドにJavascriptInterfaceアノテーションを追加してます。

③Android側にHTMLソースを渡す

```
            @Override
            public void onPageFinished(WebView view, String url) {    // STEP3
                view.loadUrl("javascript:window.MyWebViewActivity.viewSource(document.documentElement.outerHTML);");
            }
```
URLが読み込まれたタイミングで、javascriptのouterHTMLで取得したHTMLソースを
Android側のMyWebViewActivity#viewSourceに渡して実行しています。

④TextViewで描画

```
    public void viewSource(final String src) {
        handler.post(new Runnable() {
            @Override
            public void run() {
                TextView text = (TextView) findViewById(R.id.textView);
                text.setText(src);    // STEP4
            }
        });
    }
```
あとは渡ってきたString型のHTMLソースをTextViewでアプリ画面に表示しているだけです。

これでやっとWebViewのHTMLソースを可視化できました。

くそめんどくさいわ！！！
ということで次はやっと本題の超簡単HTMLソース確認方法


#Google ChromeのInspect機能を使う
ここまで順番に全部読んだ人は度肝を抜かれます。
##手順
① Google Chrome を起動
②「chrome://inspect」のURLにアクセス
③ 端末をUSBデバッグ
④ アプリでWebView表示
⑤④まで行くとこんな画面が出るので「inspect」をクリック
![スクリーンショット 2016-03-07 20.09.45.png](https://qiita-image-store.s3.amazonaws.com/0/113832/f1d44315-77b0-49b1-fbc9-bf5700be3ff1.png)

⑥あとはWeb開発のようにChromeの開発者オプションが見れる
![スクリーンショット 2016-03-07 20.15.07.png](https://qiita-image-store.s3.amazonaws.com/0/113832/17f8b18d-90aa-a300-3556-ced3e880edb1.png)

これのいいところはHTMLだけじゃなくてjavascriptのエラーなんかも
コンソールで見れちゃう点ですね。
開発者オプション最高！