Chromeを使ったAndroid WebViewページのデバッグ

2017-06-02Chrome

この記事は最終更新日から1年以上が経過しています。

ChromeのDeveloper Toolsを使用して、AndroidアプリのWebViewをデバッグできることを意外と知られていないようなので、実際にサンプルアプリを利用して説明します。

環境

PC
- Windows10
- Chrome(バージョン 57.0.2987.133)
Android
- Galaxy S6 edge(404SC)
- Android(OS 6.0.1)
IDE
- Android Studio 2.3

前提条件

PCに Chrome 32 以降がインストールされていること
PC（Windowsの場合）に USB ドライバがインストールされていること
Android 4.0 以降であること
Android 端末が USBデバッグが有効になってること

1) WebViewのサンプルアプリを準備します。

AndroidManifest.xml

AndroidManifest.xmlへWeb接続を許可する設定を追加します。

が該当の部分です。

<?xml version="1.0" encoding="utf-8"?>

//省略・・・

//接続を許可

<uses-permission android:name="android.permission.INTERNET"/>

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/AppTheme" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

activity_main.xml

WebView部分の記述を activity_main.xmlへ追加した例です。
今回はサンプルなので以下簡単な追加

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.webview.app.MainActivity">

//WebView部分の記述

<WebView

android:id="@+id/webView1"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</RelativeLayout>

activity_main.java

WebViewをインポートするために、以下の2行を記述します。

import android.webkit.WebView;

import android.webkit.WebViewClient;

デバッグのための WebView の設定
この設定を有効にしないとChromeでデバッグできません。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

WebView.setWebContentsDebuggingEnabled(true);

}

表示対象URLを「loadUrl」の部分に記述
(サンプルはレコチョクサイト)

myWebView.loadUrl("https://recochoku.jp/corporate/");

まとめると以下の通り

package com.example.y_kiyosaki.webviewsample;

import android.content.pm.ApplicationInfo;

import android.os.Build;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

//WebViewをインポート

import android.webkit.WebView;

import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//WebViewデバッグを有効にする

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

WebView.setWebContentsDebuggingEnabled(true);

}

setContentView(R.layout.activity_main);

WebView myWebView = (WebView)findViewById(R.id.webView1);

//標準ブラウザをキャンセル

myWebView.setWebViewClient(new WebViewClient());

//アプリ起動時に読み込むURL

myWebView.loadUrl("https://recochoku.jp/corporate/");

}

2) Android 端末を使用してUSBデバッグを行う

サンプルアプリをビルド実行すると、アプリのWebViewへ「レコチョクサイト」が表示されました。

PCのChromeを起動して「chrome://inspect」へアクセスするとデバッグが有効なデバイスと WebView のリストが表示されます。
Windowsの場合、「F12キー」や「Ctrl+Shift+i」または右クリックの「検証＞ remote devices」からDeveloper Toolsを起動しても良いです。
デバッグするには端末のモデル名に一致する箇所の「inspect」をクリックしてDeveloper Toolsを別ウインドウ表示します。