[Android] WebView に読み込んだ JavaScript アプリケーションを Chrome Developer Tools でデバッグする


例として、適当な WebView にコンテンツを表示する、最小構成の Android アプリケーションを作成してみます。

```java:MainActivity.java
package io.github.hkusu.sampleapp;

import android.os.Build;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // ActionBar を隠す
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }

        mWebView = new WebView(this);

        // WebView の JavaScript を有効化
        mWebView.getSettings().setJavaScriptEnabled(true);

        // WebViewClient の設定
        mWebView.setWebViewClient(new WebViewClient() {
            // HTML リンクで遷移する際、外部ブラウザで開かないようにする
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return false;
            }
            // エラーが発生した場合
            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(MainActivity.this, "エラーが発生しました。", Toast.LENGTH_SHORT).show();
            }
        });

        setContentView(mWebView);

        // WebView にコンテンツをロード
        mWebView.loadUrl("http://hkusu.github.io/qiita-newpost-reader/dist/#/");
    }

    // 端末のバックキーが押下された際、WebView もブラウザバックする
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        // このアプリケーションでは WebView 以外のバックは無効
        //return super.onKeyDown(keyCode, event);
        return true;
    }
}
```

> `AndroidManifest.xml` で通信のパーミッションを設定してください。 

> WebView で、以前に私が作成したオレオレQiitaリーダーを読み込んでいます(GitHub Pages で配信しています)。
> ⇒ http://hkusu.github.io/qiita-newpost-reader/dist/#/
> AngularJS で作っています。

実行するとこんな感じ。

![device-2015-12-17-143226.png](https://qiita-image-store.s3.amazonaws.com/0/35733/2321b907-efee-e387-bfdd-eed3e8d11637.png "device-2015-12-17-143226.png")

この WebView を **Chrome Developer Tools** でデバックできるようにするには、WebView クラスの static メソッドで用意されている `.setWebContentsDebuggingEnabled(true)` をコールします。

```diff:
// ...

ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
    actionBar.hide();
}

+// Chrome の inspect を有効化
+if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+    WebView.setWebContentsDebuggingEnabled(true);
+}

mWebView = new WebView(this);

// ...
```

再度、アプリを実行し(実機でもエミュレータでも構わない)、実機の場合は Mac と USB で接続したまま & Android Studio も起動したまま？で、Mac 側の Chrome のアドレスバーに `chrome://inspect` と入力します。

![スクリーンショット 2015-12-17 14.54.39.png](https://qiita-image-store.s3.amazonaws.com/0/35733/cf103070-9c22-75dc-3623-eacb9f6d84cd.png "スクリーンショット 2015-12-17 14.54.39.png")

すると WebView が一覧に表示されるはずなので [inspect] をクリックします。

![スクリーンショット 2015-12-17 15.18.42.png](https://qiita-image-store.s3.amazonaws.com/0/35733/fa845b63-be6a-83ec-7253-2f25cbede901.png "スクリーンショット 2015-12-17 15.18.42.png")

Developer Tools で表示されました^^ Developer Tools で WebView 内のコンテンツを操作することも出来ます。

![スクリーンショット 2015-12-17 15.21.28.png](https://qiita-image-store.s3.amazonaws.com/0/35733/3aa9674b-dd02-e5b8-49ab-8eb836eff19c.png "スクリーンショット 2015-12-17 15.21.28.png")

現場からは以上です。