最新消息:欢迎光临!

weinre电脑调试移动设备上webview

css3/html5 findever 2141浏览 0评论

由于android的webview使用的是自带的android浏览器内核,与chrome差别还是非常的大,所以并不能用chrome的远程调试来判断最终手机app中的webview效果,这给调试带来了非常大的困难,一直以来,都是对着最终的webview效果,然后靠猜,修改页面刷新webview。。

毫无疑问,这样的开发效率是及其的低下的,完全是两眼一抹黑式的开发,于是放狗使劲搜,找了无数日子,终于发现weinre这个神器,支持webview的调试 !! BUT !! 刚进官网直接傻眼了,最后更新时间2011年。。

难道是老天要绝我?不甘心,下载下来安装上,跑一个试试..

天啦奴,竟然能用,so happy,麻麻再也不用担心我踩坑了。。

安装

1. 首先保证你安装了nodejs环境,如果没有,先去 官网 下载安装。

2. 可以直接使用npm安装,在cmd中敲:npm install weinre -g。

3. 安装完成后,你会在目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下看到weinre,这便是它的主目录了。

4. 在cmd中运行weinre –httpPort 8080 –boundHost -all-,然后打开浏览器访问127.0.0.1:8080,如果访问成功,就说明安装成功了。。

使用

在使用之前我们需要明白weinre中都有哪些角色:

目标页面—— 我们真正要调试的页面,也就是要运行在移动设备上的页面

调试端 ——我们的本地浏览器,在这里对目标页面进行调试

服务器—— 监控目标页面和调试端的动作,向两端推送消息

首先,weinre已经包含了一个http服务器,它的根目录就是C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web。该目录下放置目标页面和调试端页面。

为了组织好你的目标页面,可以在当前目录下新建一个文件夹,如www(不支持快捷方式,非常不人性化)。

该目录下client即为调试端。

使用weinre命令可以启动服务器,具体的选项可以参考官网http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html ,挺简单,一般使用weinre –httpPort 8080 –boundHost -all- 就可以了。

服务器启动后,在本地浏览器地址栏访问http://127.0.0.1:8080/client/即可打开调试端,界面相信你不会陌生~ Targets即显示当前映射的远程页面,下面该把远程端运行起来了。

在用移动设备访问你的目标页面前,还有一件事要做。在web/target下,有一个target-script-min.js文件,讲它引入你的目标页面头部,像这样:

<script src="../target/target-script-min.js" /></script>

好了,可以用你的手机来访问目标页面了,当连接到服务器之后,你会看到调试端有变化了:

Targets下显示出了映射到的页面,绿绿的。然后可以点击你熟悉的标签来进行调试了~

注:修改文件后,手机端直接刷新页面可能不会加载新的代码,可以在电脑端也开一个同样的页面,每次修改后先在电脑端刷新一下,然后再刷新手机端浏览器,这样就会加载新的代码了,如果还不行,电脑端就用ctrl+f5刷新

遗憾的是,调试的时候还不支持js的调试,看着官网的更新时间,以及各大网站的源码托管地址都关闭了,估计支持js调试是没有指望了。。

转载请注明:Findever » weinre电脑调试移动设备上webview

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址