【第八篇】谷歌调试窗口：手机web调试

【第八篇】谷歌调试窗口：手机web调试

 

一. 调试手机web浏览器网站

介绍：

从Windows，Mac或Linux计算机远程调试Android设备上的实时内容。本教程将向您展示如何：

• 设置您的Android设备进行远程调试，并从开发计算机上发现设备。
• 从您的开发计算机检查和调试Android设备上的实时内容。
• 将Android设备上的内容抓屏到您的开发计算机上的DevTools实例中。

1.  打开谷歌浏览器访问需要调试网站

2. 使用usb连接电脑

3. 使用电脑的谷歌浏览器进行调试

 

 

二. 手机访问电脑本地服务器调试

偏方：电脑开启本地web服务后，手机和电脑同一局域网可以通过电脑ip地址进行访问，然后利用方法一就可以在手机调试电脑本地web项目了

介绍：

在开发计算机网络服务器上托管网站，然后从Android设备访问内容。

使用USB电缆和Chrome DevTools，您可以从开发计算机运行网站，然后在Android设备上查看网站。 

• 利用端口转发，您可以在Android设备上查看开发计算机网络服务器中的内容。
• 如果您的网络服务器正在使用自定义域名，您可以将Android设备设置为访问置于具有自定义域名映射的网域中的内容。

 

（1）设置端口转发

1. 在您的开发计算机与Android设备之间设置谷歌调试连接usb。完成后，您应在检查设备上的垂直菜单中看到Android设备

2.在DevTools的检查设备中间，启用端口转发。

3.点击添加规则。设置需要转发的端口和允许端口转发

4. 此时在手机谷歌浏览器可以打开此设置的地址跟电脑服务同步显示

 

 

三. 调试手机webview

介绍：

使用Chrome开发者工具在您的原生Android应用中调试WebView。

在Android 4.4（KitKat）或更高版本中，使用DevTools可以在原生Android应用中调试WebView内容。

• 在您的原生Android应用中启用WebView调试；在Chrome DevTools中调试WebView。
• 通过chrome：// inspect访问已启用调试的WebView列表。
• 调试WebView与通过远程调试调试网页相同。

1.配置WebViews进行调试

必须从您的应用中启用WebView调试。要启用WebView调试，请在WebView类上调用静态方法setWebContentsDebuggingEnabled。此设置适用于应用的所有WebView。

判断当前手机版本大于19才可以使用此API

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

 

2. 在DevTools中打开WebView

chrome：// inspect页面将显示您的设备上已启用调试的WebView列表。

要开始调试，请点击您想要调试的WebView下方的检查。像使用远程浏览器标签一样使用DevTools。