Android: Chrome 调试 WEB 页面

引言

在 Mac OS 上面通过 Safari 调试 iOS 设备或者模拟器的 WEB 页面, 比较方便.

关于具体如何使用 Safari 来调试 iOS 设备, 可以参考 Safari 的开发者模式 这篇文章.

自从踏上开发的道路, 电脑上就安装了 Chrome 浏览器, 并且一直保持着更新, Chrome 以其简单设计和高效的用法吸引了大批开发者.

使用 Chrome 调试 Android 设备的 WEB 页面, 易如反掌.

Chrome 调试条件

使用这项技能的条件如下:

1.Android 设备系统最低为4.4, 也就是 android-19

2.Chrome 最好使用最新版本的, 以前的版本不支持, 最低兼容版本目前尚不清楚.

3.配置 Android WebView, 使其支持 Debug 和使能 JavaScript 功能.

4.设备和 PC 通过 USB 连接正常, 且支持 USB 调试的.

我目前使用的设备和 Chrome 版本信息如下:

Android 设备: 5.1.1版本
Chrome: Version 58.0.3029.110 (64-bit)

我们在地址栏中输入:

chrome://inspect

就可以打开设备列表界面.

可以看到我的 Android 设备已经显示出来了.

下面举个例子说明该调试工具的使用.

简单的 Android 工程示例

该工程只有一个 Activity, 使用 WebView 加载本地 HTML 文件.

1. 创建 assets 目录

工程切换到 Project Files 视图

这样就可以在 src/main 目录下新建了 assets 文件夹了.

2. 创建 HTML 文件

该 HTML 文件, 命名为 local.html, 放在 assets 目录下面.

local.html 源文件:

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<p>A function is triggered when the button is clicked.</p>
<script>
function myFunction() {
console.log('js console.');
}
</script>
</body>
</html>

3.在 Activity 中配置 WebView.

Activity.java 源文件

public class MZWebPage extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mzweb_page);
webView = (WebView) this.findViewById(R.id.ui_web_view);
// 设置 WebView 的 Debug 为可用状态
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
WebSettings settings = webView.getSettings();
// 设置 JavaScript 可以使用, 否则在 HTML 中无法调用 JavaScript 代码
settings.setJavaScriptEnabled(true);
// 本地文件
String url = "file:///android_asset/local.html";
webView.loadUrl(url);
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
return super.shouldOverrideUrlLoading(view, request);
}
});
// 设置渲染视图
webView.setWebChromeClient(new WebChromeClient());
}
}

对应的 xml 布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="demo.droidsdk.near.idreamsky.com.nearsdk.MZWebPage">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/ui_web_view">
</WebView>
</LinearLayout>

4. 运行程序

在 Chrome 中输入 chrome://inspect 打开, 可以看到正在运行的 local.html.

点击 inspect, 进入调试界面.

在调试界面, 点击页面的 Click me, 按钮, 对应的会有 log 输出.

5.调试出错的 HTML

修改一下 local.html 文件

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<p>A function is triggered when the button is clicked.</p>
<script>
function myFunction() {
console.log('js console.' + var_error);
}
</script>
</body>
</html>

这里可以看出 var_error 是一个不存在的变量.

重新运行, 点击 Click me, 可以看到右侧的 error:

关于 Chrome 开发者工具的更多使用, 可以参考官方文档 Chrome 开发者工具.

坚持原创技术分享,您的支持将鼓励我继续创作!