添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

你在做移动web开发的时候是不是只是在Chrome下开启移动模式,然后就啪啪啪闷头敲代码了?如果你平时只是做做宣传页,Chrome的移动模式可能就能满足你。但是现在越来越多的应用采用Hybrid的开发方式,这样的话就可能在web页面上调用webview注入的函数,那么,这个页面在Chrome上只会报错,因为我们不在webview里,根本没有注入的那些函数。

以我现在做的项目为例,要在页面里判断在客户端有没有登录,可以这样写:

var isLogin = AndroidWebview.hasLogin() ;

结果可想而知,AndroidWebview是客户端在webview里注入的方法,这里当然会报错了。

这种情况怎么开发呢?回顾一下以前的两种办法 :

真机 + Chrome inspect :Chrome 版本必须高于 32,其次你的测试机 Android 系统高于 4.4

  • 先用数据线将 Android 测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB 调试”功能。
  • 在PC的Chrome上打开Chrome://inspect即可找到你的设备
  • 手机进入一个webview页面,即可在Chrome上看到调试台了
  • 可以看到,第一个记录是手机里的浏览器的;第二个是记录是手机助手里的webview。

    真机 + weinre : 在你本地创建一个监听服务器,并提供一个JS脚本,需要在需要测试的页面中加载这段 JS,就可以被 Weinre 监听到,在 Inspect 面板中调试你这个页面。

  • 安装 weinre npm install -g weinre
  • 开启 weinre weinre --httpPort 8888 --boundHost -all-
  • 浏览器打开 localhost:8888 :
  • 将 "2" 这段脚本加载到调试的页面最后,手机进入页面,然后进入 "1" ,就可以看到控制台了

    然后你的手不停地在键盘和手机之间切换,多么痛苦。后来,我遇到了Genymotion

    Genymotion

    这是一款安卓模拟器,有了它我们可以在电脑上开启一个安卓机。具体使用我就不细说了,很简单请自行搜索。

    这是我在模拟器上安装的手机助手:

    而且使用 Chrome inspect 是直接可以调试模拟器中的webview的:

    这样,我们就可以不用手忙脚乱地写代码、看手机了,一切都在PC上调试。但是我们在模拟器上看到的是线上代码,我们加一个新功能还要发布代码才能看到效果?

    Charles / Fiddler

    幸好有Charles这样的工具(Windows下请使用Fiddler),Charles会在本地开启一个代理服务,默认接口8888。通过这个代理,模拟器上的请求会被转移到电脑上,我们可以任意地去替换请求文件让我们更加方便地调试页面。

    设置监听端口

    Proxy Settings - HTTP Proxy - Proxies - HTTP Proxy 中设置

    监听Chrome

    因为 Charles 只会监听全局和Firefox,为了能监听Chrome,使用Proxy SwitchyOmega插件,增加一个情景模式:

    在这个情景模式下,我们就可以抓到在Chrome里的数据了:

    注意:Charles默认是不支持https的,我们选择 设置 - Proxy Settings - SSL ,选中 Enable SSL Proxying 。然后在 Locations 里填写要抓包的域名和端口,点击 AddHost填写域名,如 www.baidu.comport443 。具体参考最后的文章。

    监听Genymotion

    别忘了,使用Charles的初衷是让我们可以用本地的文件替换线上文件,不用每次修改都要发布。

    在Genymotion中,Settins - Network (port选9999是因为我之前在Charles中设置的是9999) :

    在开启的模拟器中,设置 - WLAN - 长按2秒 - 修改网络代理设置改为手动,主机名为10.0.3.2,端口为9999,和上面一致。

    然后在模拟器中打开webview页面就可以看到所有请求了

    右键保存源文件到本地,然后添加一行alert代码 。

    这样,我们利用模拟器+Chrome+Charles就可以完美开始、调试webview页面了,模拟器当做手机,Chrome insepct 调样式、接口、查看数据,利用Charles映射本地文件直接查看效果。

    至于iOS上的webview调试,模拟器+Safari+Charles应该也是一样的。我没有试过,试过的人请告知。

  • 浅谈Hybrid技术的设计与实现
  • 移动前端调试页面–weinre
  • Mac下HTTP/HTTPS抓包工具Charles
  • 前端开发调试线上代码的两款工具
  • 在 iOS 模拟器中调试 Web 页面
  • 向我捐助 | 关于我 | 工作机会

    监听Genymotion这一节第二条:ip地址是不是应该是10.0.2.2

    // 我发现你比我认识的公司的前端都刁啊,今天碰到一个问题,js只要一上线;就被压缩了;只要报错都是第一行,无法定位;然后这个js跨域访问了别的资源,直接放到别的服务器,改掉host又存在问题;它们搞了半天没搞定,然后我想起你这个用charles map local搞定了。

    特来膜拜。

    了解了 ,Genymotion用的10.0.3.2;如果是Android自带的模拟器,那就是10.0.2.2;
    这个地址指的是模拟器的localhost;不能直接用127.0.0.1因为,这个指向你的电脑了;

    我认识月影啊。😏

    最后啊,有个地方是null。主要是定位到哪里是null比较困难。

    安装genymotion真是挑战人类的极限!😢!

    注册个账号下载下来需要登录获取设备列表 , 谁知道登录不上去,最后google说在官网重新登出再登陆一次,或者修改密码就能行了,ok,照做可以上了

    终于看到设备列表了,选择了一个准备尝鲜,谁知这个时候跳出来信息说下载不了,http返回code 0,再google, 在众多无效答案中吐血,最后在一个不起眼的角落里看到有人说把network里面的
    set HTTP Proxy 1.234.45.50 set Port 3128

    目前还没下载完,等着下载完看看有啥坑没有,这里占个地先记录一下

    实在是很费解,我按照LZ的方法一步一步地走下来,就是不对, 我的Genymothion版本是2.8.0,AVD是Google Nexus 7 2013-6.0.0-API23,有几点我不明白:

  • 这个charles怎么把Genymotion里面app的请求导入到本机上的,本机上是需要运行webserver吗?
  • 这里的10.0.3.2这个ip是什么意思?
  • 我按照LZ的一步一步地设置下来,然后app里面的webview请求就始终是错误的。。。!始终是请求不到页面。。

    搞定了,原来这里的AVD里面的那个wifi高级选项里面填写的那个服务器ip地址要写成主机的ip地址.比如我是Mac就通命令ifconfig来获得本机的地址,然后填写进去即可,然后chares会跳出要求访问的提示,去
    Proxy -> Access Control Settings添加0.0.0.0/0即可