Hbuilder Webview调试+逍遥安卓模拟器

软件版本:

前言:

HBuilder : 9.0.2.201803061935

在PC端,我们调试网页一般直接打开chrome或者firefox的开发者工具就OK了,chrome也有手机模式,可以粗略地预览下移动网页,但是这都太粗糙了,PC上看到的,和移动设备上看到的页面,可能根本不是一回事,并且放入webview之后,也可能大变样,并且还会经历数不清的设备兼容性问题,我们需要能够在PC端,直接调试移动设备上的网页,甚至直接调试app中的webview

逍遥安卓:5.2.2

本人工作环境:

webview相当于一个浏览器的tab,通过在webview中修改,模拟器端会实时刷新效果。从而达到调试手机app开发的效果。一般调试的有样式和数据请求。

电脑:Mac;移动web开发工具:Hbuilder

注意调试的时候,当模拟器端切换webview的时候,要点开对应的inspect才能调试。

1. IOS中webview以及IOS中safari如何在Mac中采用safari调试

我这做了一个简单的app demo,通过mui.ajax请求某个专栏的数据,这个时候,一般要调试发送请求是否正常,以及请求的数据。

你可能需要一台mac,这会让你和ios之间的调试变得无比简单

1,首先,用adb连接上我们的安卓模拟器,有些时候,不需要通过adb连接,hbuiilder会自动识别到

  1. 在iphone中设置safari,开启web检查

图片 1

图片 2

2,成功之后,在hbuilder右侧的调试模式下,会显示设备

2. USB线连上Mac,然后打开Mac中的safari,点开开发者工具,就可以看到你的移动设备,然后可以调试其中的网页和webview

图片 3

图片 4

3,连接真机调试

就这样简单两步,就可对ios设备进行真机调试

图片 5

2. Android中webview以及chrome dev浏览器如何在Mac中采用chrome调试

4,右侧就有2个webview

android中的webview调试略显麻烦,我们一步一步来

图片 6

  1. Mac中需要装有Chrome,Android设备中装有Chrome Dev,尽量偏新版本

5,由于我的index.html这个webview是发送请求的,那么点击insepect,很容易出现 打不开,正在加载。。。。这种页面,怎么办? 重新连接

2. 需要AndroidSDK中的ADB工具,帮助移动设备和Mac间通信,个人建议,直接装一个Android Studio,会带上Android的开发环境,比较方便

本文由金沙官网线上发布于Web前端,转载请注明出处:Hbuilder Webview调试+逍遥安卓模拟器

您可能还会对下面的文章感兴趣: