文档章节

pc调试移动终端web代码(工具Weinre)

嘻哈开发者
 嘻哈开发者
发布于 2014/02/11 17:42
字数 890
阅读 255
收藏 14

做移动web开发的同仁,多少都为各个浏览器困扰。基于手机浏览器的性能和各个开发商的私人考虑,我们现在在android、ios等系统还很难使用到完全统一的浏览器内核。无论是ucweb、chrome、safari、海豚等,每个浏览器都或多或少的阉割了很多性能,更不用说地段的手机了。

这样带来我们很多困扰,我本来可以直接在pc上通过chrome来调试mobile 页面,但是往往调试后页面移植到mobile,还有很多不尽人意。

在pc上,屏幕大,我们可以很方便的通过各种调试工具,F12实时调整。但手机、pad屏幕足够小,而且无实体键盘。这种调试变得艰难了很多。

网上目前也有很多成熟的方案,而且html5也考虑到解决此问题。据说,ios6浏览器已经支持在pc上调试同网络的移动端web。偶是穷屌丝,还没有用上mac系统。

现在的事情,有现在的解决方法。

主要就说Weinre。

功能:在pc上通过调试移动设备上web页面,几乎和pc上一样实时。

使用条件:
1:本地服务端环境,各种php、jsp、.net等;
2:pc和移动在同一网络下;
3:使用Weinre创建本地调试环境;
4:测试页面,调价Weinre可识别代码。

明白上面的,就可以参考下面的教程继续操作了。我在几个地方加上注意说明就ok。
教程:http://www.cnblogs.com/shihao/archive/2012/05/21/2511063.html (这不是原作者的,都是转载的)

第一步:下载Weinre
Ps:Weinre项目已经被收购,原官方github已经关闭,你可以去http://ishare.iask.sina.com.cn/f/23607399.html
第二步:运行Weinre
ps:只需要把Weinre放在你的电脑任何一个磁盘,注意不要解压。并且保证你的点已经有java运行的环境,在Weinre的文件夹地址栏输入,回车执行

java -jar weinre.jar --httpPort 8081 --boundHost -all-

你就可以看到cmd窗口,表示环境已经创建好。

再打开http://localhost:8081/,就可以发现weinre已经创建成功

ps:你可以把localhos换成电脑IP,比我我的就是http://192.168.0.112/wordpress/

第二步:给你的电脑加上可被weinre检测到的js代码即可
1.Target Script
该方法需要在调试的页面中增加一个js:

http://localhost:8081/target/target-script-min.js#anonymous

添加后在移动设备中访问该页面即可,如果调试的页面比较少可以使用这个方法,如果多的话推荐第二种方法

2.Target Bookmarklet
该方法是将一段js保存到移动设备的书签中,可以在 http://localhost:8081/ 找到这段js:

javascript:(function(e){e.setAttribute("src","http://localhost:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

将这段js保存到名为Debug书签中,然后使用移动设备访问我想要调试的页面,最后点击Debug书签就OK了。>
ps:带测试的代码是在你的本地服务端环境下,不要放在其他地方,否则你的移动设备无访问,Weinre也无法监控到了。

第三步:移动设备访问你添加检测代码的页面
访问:http://localhost:8081/client/#anonymous
即可看到被检测的页面,点击即可实时调试

本文固定链接: http://www.xiazer.com/archives/60 | 夏至-互联网的朝圣客


本文转载自:http://www.xiazer.com/archives/60

嘻哈开发者
粉丝 55
博文 122
码字总数 1563
作品 0
广州
程序员
私信 提问
【原创】响应式设计之移动端调试工具

背景 2013年是网页设计响应式的一年。所谓响应式网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同...

Mr.Zheng
2013/07/02
1K
0
关于在移动端 body overflow:hidden 无效的问题

关于在移动端 body overflow:hidden 无效的问题 一、简述 这篇文章作为一道前菜哈。 很多同学在做移动端的时候都有遇到移动端各种坑,各种固定fiexd失效,input输入框错位,软键盘弹出错位等...

Cc卿
2018/06/01
0
0
移动端Web开发调试之Weinre调试教程

原文地址:http://blog.csdn.net/freshlover/article/details/42640253 在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统...

程序员诗人
2017/04/24
0
0
五个你必须知道的javascript和web 调试技术

在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点 debugger断点 native方法hook 远程映射本地调试 Weinre 在移动上面开发调试是很...

H_J
2013/12/17
1K
2
五个你必须知道的javascript和web 调试技术

Weinre 安装weinre 原理 Tips DOM断点 使用DOM断点 Tips javascript的debugger语句 使用javascript的断点 Tips 原生代码的hook调试 举个例子 Tips 远程映射本地调试 在前端开发中,调试技术是...

迷宫素描者
2013/12/18
167
0

没有更多内容

加载失败,请刷新页面

加载更多

面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
7分钟前
7
0
读书笔记:深入理解ES6 (八)

第八章 迭代器(Iterator)与生成器(Generator) 第1节 循环语句的问题   在循环、多重循环中,通过变量来跟踪数组索引的行为容易导致程序出错。迭代器的出现旨在消除这种复杂性,并减少循...

张森ZS
8分钟前
4
0
Elasticsearch 实战(一) - 简介

官腔 Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统 基本等于没说,咱们慢慢看 1 概述 百度:我们比如说想找寻任何的信息的时候,就会上百度去搜索一下,比如说找一部自己喜...

JavaEdge
12分钟前
3
0
【jQuery基础学习】11 jQuery性能简单优化

本文转载于:专业的前端网站➦【jQuery基础学习】11 jQuery性能简单优化 关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继...

前端老手
21分钟前
5
0
重磅发布 | 全球首个云原生应用标准定义与架构模型 OAM 正式开源

导读:2019 年 10 月 17 日,阿里巴巴合伙人、阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon 上海重磅宣布,阿里云与微软联合推出开放应用模型 Open Application Model (OAM...

阿里云官方博客
23分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部