请使用firefox,chrome等最新浏览器浏览本站。

前端开发规范-移动端真机调试

html5 阿豹 335次浏览 0个评论 扫描二维码

chrome自带的 Remote Debugging可以用来真机调试,调试的范围包括:

1.调试站点的页面
2.调试安卓原生App中的WebView
3.实时将安卓设备的屏幕图像同步显示到开发机器。

调试的要求:
1.pc端安装最新版chrome浏览器
2.一条USB数据线,连接电脑与移动设备,pc端安装相应安卓机型的USB驱动。
驱动程序下载地址:http://developer.android.com/tools/extras/oem-usb.html
如果电脑上安装有百度手机助手、360手机助手这类软件,一般连接后可以自动安装相应的USB驱动程序。
3.如果是调试安卓APP webview ,需要系统为Android 4.4+ 并且原生应用内的Webview须进行相应的调试声明配置。
配置方式如下:
在你的APP内配置相应的代码,在WebView类中调用静态方法setWebContentsDebuggingEnabled,如下:

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

以上配置方法适用于安卓应用内所有的WebView情形。

安卓WebView是否可调试并不取决于应用中manifest的标志变量debuggable,如果你想只在debuggable为true时候允许WebView远程调试,请使用以下代码段:

if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {  
    if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE))  
    { WebView.setWebContentsDebuggingEnabled(true);}  
}  

使用步骤:
1.在安卓设备点击 设置->开发者选项->在use调试处打钩
2.用USB数据线连接设备, 驱动装好连接成功后,在弹出的请求允许使用这台计算机通过usb调试处点击确定。
3.在pc的chrome浏览器中输入 chrome://inspect,会看到如下图显示, 在 Discover USB devices处打钩。
QQ截图20160629102739

如果USB连接成功,会看到如下图所示
QQ截图20160629103550
这时候我们可以看到移动设备的型号和设备上运行的页面和允许调试的WebView列表。找到需要调试的目标页面,点击inspect即可打开DevTools,点击reload可重新加载当前的调试页面,点击focus tab可将标签页置顶,close为关闭当前页面。更可以通过在输入框中键入网址新开一个页面。

点击inspect打开DevTools如下图所示:
QQ截图20160629103752
这时候我们就可以像使用chrome开发者工具调试pc页面一样进行真机调试android手机了。


喜欢 (11)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到