[안드로이드] 웹뷰 디버깅 쉽게 하는 방법 - Chrome inspect 사용법 (3)

안드로이드 샘플 코드를 작성해 보겠다.

 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/webView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webviewdebugging">

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

    <application
        android:usesCleartextTraffic="true"
        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/Theme.WebViewDebugging">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

 

MainActivity.java

package com.example.webviewdebugging;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;
    String serverUrl = "http://본인IP:포트/WebViewDebugging/index.html";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = findViewById(R.id.webView);

        mWebView.clearCache(true);
        WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);


        mWebView.addJavascriptInterface(new CustomBridge(), "BRIDGE");
        mWebView.loadUrl(serverUrl);
    }
}

 

 

CustomBridge.java

package com.example.webviewdebugging;

import android.webkit.JavascriptInterface;

public class CustomBridge {

    @JavascriptInterface
    public String androidFunc(String sInput){
        String sRet = null;

        if (sInput.compareTo("helloAndroid") == 0)
            sRet = "Hello WebView";
        else
            sRet = null;

        return sRet;
    }

}

 

 

 

Chrome://inspect 사용법에 대해 정리할 것이므로 웹뷰에 대한 자세한 설명은 다음에..

 

안드로이드 앱을 Run 하면, 아래와 같은 화면이 애뮬레이터에서 동작한다.

 

 

앱에서도 웹 화면과 동일하게 뜬다.

 

 

최종 사용 방법은 다음 장에서...

다음

[안드로이드] 웹뷰 디버깅 쉽게 하는 방법 - Chrome inspect 사용법 (4)

[안드로이드] 웹뷰 디버깅 쉽게 하는 방법 - Chrome inspect 사용법 (4)