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」のアノテーションを付与する必要が出てきました。

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

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」をクリック

⑥あとはWeb開発のようにChromeの開発者オプションが見れる

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