移动端及时调试工具 - weinre使用方法

HTML5学堂:在前一篇文章当中,我们借着weinre讲解了NodeJS中的一些简单命令,也讲解了weinre的安装方法,今天我们把weinre的使用“完结”掉。移动端页面的开发过程中,weinre“即时”的调试方式,能够让我们更好更快的解决调试问题,使调试工作变得更加方便。

想要调试的文件放在哪里

首先,按照全局模式“-g”进行安装~(前面一篇文章我们已经讲过了)

之后,将我们需要调试的页面放置于如下目录当中:C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web

可以在web文件夹中放置一个www文件夹,然后将自己想要调试的每个项目放置于www当中(这样应该就很类似于我们的wamp的使用了吧~),小编这里采用的是:C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web\www\h5course。要调试的是h5course文件夹中的页面。

调试的基本流程

1 启动接口

2 桌端调试

2.1 在桌端打开链接地址

2.2 修改要调试的文件

2.3 在PC端进行访问

3 缓存一定要注意~!!!

4 移动端调试

PS:保证文件已经被修改(2.2步骤)之后

5 具体的调试范例

1 启动接口

使用NodeJS的cmd启动接口:

weinre -httpPort 8081 -boundHost -all-

此处需要注意一点,如果希望能够用手机调试这个页面,那么all是必不可少的。

2 桌端调试

2.1 在桌端打开链接地址

执行“运行” ——> “输入cmd” ——> 输入ipconfig,查找到自己本机的无线IPv4地址。小编写本篇文章时,电脑的IPv4地址为192.168.2.202,下面的例子就是基于这个地址的。

此时注意一点,在Targets当中,并没有任何的内容,只有一个none(无)。

2.2 修改要调试的文件

打开文件目录,此处我采用上面提到的目录,修改index.html文件

在文件的后面加上如下的代码:

  1. <script src="http://192.168.2.202:8081/target/target-script.js" type="text/javascript"></script>

其中,关于192.168.2.202:8081,各位在自己使用时依旧需要修改为自己的IP地址和端口号码。

关于target/target-script.js,是不需要进行任何修改的,因为,在weinre文件夹当中,本身自带了这个文件夹和相关文件。这个文件的主要作用在于获得从Debug服务端传来的信息,更改当前页面的样式;也可以运行传来的js,并返回结果。

2.3 在PC端进行访问

在浏览器url地址栏当中,输入文件路径~小编这里采用的是http://192.168.2.202:8081/www/h5course

刷新刚刚的那个weinre页面看看吧~

3 缓存~缓存~缓存!!!

targets没有变化?——此处极为重要,小心浏览器缓存惹的祸,小编在这里直接在文件的后面加上了时间戳,再刷新就不怕缓存啦~

4 移动端的调试

前提要求:调试用手机需要与被调试页面所在的设备,处于同一个局域网下。

方法1:直接扫码,然后用浏览器打开

方法2:在你的手机浏览器中输入刚刚的url地址~

在输入之后,我们的调试页面中的targets就变了模样喽~!

5 具体调试范例

调试分为HTML与CSS、JS的基本调试 —— 各位攻城狮们肯定都知道啦。weinre贴合浏览器的设计方法也让我们能够很直观的看到调试功能分类(和谷歌控制台基本一致)。

HTML与CSS调试

首先,选择要调试的target(用鼠标点中会变为绿色-也就是让这个页面处于调试被激活状态)。之后,在Elements中调试,尝试用PC端改变一下结构样式,试试吧~

JS的基本调试

PS:变化是同步的哦,无需刷新手机页面~~~

好啦,接下来,你就可以尽情“调试”啦~~!!!对了,调试结束之后,不要忘记关闭接口哦~

额外的重要注意

NodeJS的cmd(command prompt)调试窗口,在调试过程中请一直处于打开状态,不要关闭,一旦关闭,接口也会自动关闭的~

手机最好是处于非待机状态,手机一旦待机锁屏,那么打开之后并不会直接连接,需要进行页面刷新。

扯些有的没的:今天出文章很是心塞啊,所有的配置都没有任何问题的情况下,竟然单单挂在了“缓存”上,原本以为谷歌直接刷新即可,后来关闭选项卡(网页页面)又重新打开,竟然功能页面都没有变化,自己也是傻了~最后一度怀疑自己几年前的调试方法已经过时,然后搜索半天资料,发现网上的方法和自己用的没有太大差异。最后,自己给链接地址强制加上了时间戳……之后,weinre终于乖了~~~表示好心塞,心好累……

本文章共耗时4小时,责任小编:HTML5学堂-利利。

欢迎沟通交流~HTML5学堂

小编录制的小视频(将就下哈,下次我会录制的更好)

视频内容

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-02-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小白安全

渗透一个网站需要做的事情

一,开始信息收集 1,获取域名的whois信息,获取注册者邮箱姓名电话等。 2,查询服务器旁站,因为主站一般比较难,所以先看看旁站有没有通用性的cm...

3189
来自专栏PHP技术

CHROME开发者工具的小技巧

Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能...

32010
来自专栏无原型不设计

【Mockplus教程】重命名

对页面和分组的重命名可以选中单个页面,然后使用F2进入名字修改状态,改完之后鼠标随便 点击其它地方即可完成修改。 对于选中页面也可以双击页面节点进入修改状...

3024
来自专栏DeveWork

Option Framework 框架的三个自定义技巧

陆陆续续将解密一些本站几个收费主题的核心功能,分享才会更好。虽然鄙人技术不称得上牛逼,好在足够专注也能学点。Option Framework 框架免费开源,采用...

1915
来自专栏卡少编程之旅

类webpack模板的多页Vue项目模板

3376
来自专栏一个会写诗的程序员的博客

H5 App调试方法参考H5调试常见方法chrome developer tools模拟器GapDebugweinrespy-debugger代理总结

相较于pc端,移动端调试要更加丰富一些,下面对调试的方法进行简单汇总。 主要分为以下几点:

572
来自专栏FreeBuf

GPS追踪工具Traccar体验

*本文原创作者:syttc,本文属FreeBuf原创奖励计划,未经许可禁止转载 还是之前freebuf上的工具介绍看到的,不过看到下面有人评论说没用成功,我就...

2655
来自专栏达摩兵的技术空间

浏览器中flash设置最强教程

承接上文,我讲到了前端如何判断浏览器是否安装或者禁用了flash插件,本文就重点讲述各个常见浏览器的详细设置教程,有图有文字描述,需要的产品经理请接好哦。

671
来自专栏Java技术栈

Maven精选系列--发布jar包到Nexus私库

Nexus2可以通过管理界面来上传jar包到私库中,而最新的Nexus3却找不到了上传界面,只能通过以下方式来发布到私库。 发布第三方jar包 这种情况是mav...

31511
来自专栏林德熙的博客

使用 IncrediBuild 提升 VisualStudio 编译速度 安装获得许可使用

我现在有一个 100M 的代码,需要快速去编译他,我寻找了很多方法,本文记录我找到的 IncrediBuild 用于提交编译速度。

151

扫描关注云+社区