LoginSignup
31

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-12-17

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

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

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

// ...

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

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

スクリーンショット 2015-12-17 15.18.42.png

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

スクリーンショット 2015-12-17 15.21.28.png

現場からは以上です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31