WebView 页面调试

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”)来加载。

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.