Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

例として、適当な 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

現場からは以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away