WebView 页面调试

太过爱你忘了你带给我的痛 2022-10-27 05:16 173阅读 0赞

### WebView 页面调试 ###

##### 小记 #####

最近刚接触Android WebView 的App，记录一下。

### 1、WebView 概述 ###

Android内置webkit内核的高性能浏览器,而WebView则是在这个基础上进行封装后的一个 控件,WebView直译网页视图,我们可以简单的看作一个可以嵌套到界面上的一个浏览器控件！

### 2、WebView基本使用 ###

设置布局

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.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">
    
    	<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    
    		<WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/>
    
    	</LinearLayout>
    
    </android.support.constraint.ConstraintLayout>

加载页面

//获得控件
    WebView webView = findViewById(R.id.webView);//@+id/webView通过“webView”找到对应的视图节点
    //加载页面【页面可以是网络资源也可以是本地资源】
    //webView.loadUrl("http://www.baidu.com");//指向网络资源
    webView.loadUrl("https://android_asset/");//指向本地资源

加载网络资源需要设置网络权限

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

本地资源存放在assets文件下，可以将开发好的页面或者web项目放到这里面，可以尝试放一张html页面（index.html），通过webView.loadUrl(“https://android\_asset/index.html”)来加载。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkyOTEz_size_16_color_FFFFFF_t_70]

### 3、WebView页面调试 ###

Google提供的调试Android上WebView的步骤：  
1.开启手机上的USB调试功能并且连接计算机，同时手机端打开需要调试的app  
2.打开Chrome浏览器，地址栏输入：Chrome://inspect，回车  
3.Chrome会自动检测手机上打开的App，并列出可调试的WebView页面  
4.点击Inspect，弹出开发者工具进行调试（Android4.4开始支持，老版本Android检测不到webview）

注意：使用Chrome调试工具必须打开“Ghelper”插件，没有安装Ghelper的需要先安装，否则调试页面可能就是404.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkyOTEz_size_16_color_FFFFFF_t_70]: /images/20221024/d303e83c05ff479996e670deae9b39d4.png