You are here
远程实时调试手机上的Web页面
星期四, 2017-06-29 20:16 — adminshiping1
远程实时调试手机上的Web页面
调试前端页面我一直使用着神器Chrome开发人员工具, 那个方便, 大家都懂的.
但当我们要调试为移动设备设计的Web页面时, 是不是觉得有点力不从心了?
平时开发时我们可以一直都是在桌面调试这个页面, 但最终的运行环境是移动设备, 最终还是要在手机上验证一下, 这个时候各种兼容性问题就有可能接踵而来.
当我们在手机上打开这个页面时, 发现有个地方样式有问题, 但桌面上展现正常, 这个时候怎么办?
我们是不是只能推理下某个地方样式有兼容性问题, 逐步将问题范围缩小, 猜想/修改/刷新手机, 无限循环下去, 直到解决问题为止.
这个时候要是有一个像Chrome开发人员工具一样的调试工具能远程实现调试手机上打开的页面该多好啊.
其实是还真有, 只是我不知道而已, 下面就有请 weinre 闪亮登场!!
weinre is WEb INspector REmote.
weinre is a debugger for web pages, like FireBug and Web Inspector, except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
weinre reuses the user interface code from the Web Inspector project at WebKit, so if you've used Safari's Web Inspector or Chrome's Developer Tools, weinre will be very familiar.
我这里只是简单介绍下怎么使用, 详情资料大家还是去官网看吧
---------------------------------------------------------------------------------------------------------------------------
接下来我们实战一把
1. 安装
需要Node.js平台, 先安装好后, 打开Node.js command prompt, 通过NPM来安装 weinre
2. 启动
安装完成后, 我们接着启动 weinre
可以配置 .weinre/server.properties 让启动 weinre 变得更方便, 具体方法请参考官网, 配置好后, 以后想启动 weinre, 直接运行weinre命令即可, 无需每次都追加那些参数了.
3. Instrumenting your web page to act as a debug target
将如下脚本追加到你将要调试的页面上
<script src="http://你的IP地址:8081/target/target-script-min.js#anonymous"></script>
4. 折腾这么久, 快点让我远程调试吧
在手机上打开要调试页面的地址
在 weinre Access Points 中开始远程调试
终于可以调试了! 接下来随便怎么玩都可以了, 大家应该都很熟练了吧...
参考
----------------
移动终端开发必备知识 - weinre远程实时调试
但当我们要调试为移动设备设计的Web页面时, 是不是觉得有点力不从心了?
平时开发时我们可以一直都是在桌面调试这个页面, 但最终的运行环境是移动设备, 最终还是要在手机上验证一下, 这个时候各种兼容性问题就有可能接踵而来.
当我们在手机上打开这个页面时, 发现有个地方样式有问题, 但桌面上展现正常, 这个时候怎么办?
我们是不是只能推理下某个地方样式有兼容性问题, 逐步将问题范围缩小, 猜想/修改/刷新手机, 无限循环下去, 直到解决问题为止.
这个时候要是有一个像Chrome开发人员工具一样的调试工具能远程实现调试手机上打开的页面该多好啊.
其实是还真有, 只是我不知道而已, 下面就有请 weinre 闪亮登场!!
weinre is WEb INspector REmote.
weinre is a debugger for web pages, like FireBug and Web Inspector, except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
weinre reuses the user interface code from the Web Inspector project at WebKit, so if you've used Safari's Web Inspector or Chrome's Developer Tools, weinre will be very familiar.
我这里只是简单介绍下怎么使用, 详情资料大家还是去官网看吧
---------------------------------------------------------------------------------------------------------------------------
接下来我们实战一把
1. 安装
需要Node.js平台, 先安装好后, 打开Node.js command prompt, 通过NPM来安装 weinre
 |
2. 启动
安装完成后, 我们接着启动 weinre
 |
 |
可以配置 .weinre/server.properties 让启动 weinre 变得更方便, 具体方法请参考官网, 配置好后, 以后想启动 weinre, 直接运行weinre命令即可, 无需每次都追加那些参数了.
3. Instrumenting your web page to act as a debug target
将如下脚本追加到你将要调试的页面上
<script src="http://你的IP地址:8081/target/target-script-min.js#anonymous"></script>
4. 折腾这么久, 快点让我远程调试吧
在手机上打开要调试页面的地址
 |
在 weinre Access Points 中开始远程调试
 |
 |
终于可以调试了! 接下来随便怎么玩都可以了, 大家应该都很熟练了吧...
 |
参考
----------------
移动终端开发必备知识 - weinre远程实时调试
来自 https://www.douban.com/note/289846168/
普通分类:
可以断点吗?
MS不可以, 但应该足以
JS调试蛋疼啊....正在寻找可以断点的工具..
如果是要断点的话, 可以参考使用chrome自带的adb插件, 应该可以, 或者是ios对应的插件, 可以参考 http://dev.oupeng.com/articles/remote-debugging-with-browsers
嗯, 好的~谢谢, 待会研究一番~
跑起来了，但是感觉手机的温度瞬间上升啊，发烫
这个我到时没注意过, 反正跑HTML5的东西, 好像都有点耗
你好，我今天按照教程刚刚把环境搭好，然后用安卓模拟器作为target，但是无法识别，你遇到过这种问题么？有解决方法么
从没有遇到过这种情况, 可能是你配置有问题
请问要发请求遇到跨域问题该怎么解决？chrome上可以用disable-web-security,这样的调试该怎么解决呢
请问是你开发的Web App需要发送跨域的请求?
是想在页面中使用XMLHttpRequest(XHR)来发送HTTP请求吗?
还是说你是想调试的时候来发送跨域的请求?
对，我想在调试的时候发送跨域请求，只有chrome有现成的解决方案，但是firefox,ie好像都没有
那么有chrome不就行了吗? 还有必要在firefox/IE下面做跨域的调试?
zilla.org/en-US/docs/HTTP/Access_control_CORS
.com/questions/667519/firefox-setting-to-enable-cross-domain-ajax-request
t.com/zh-cn/library/dd573303(v=vs.85).aspx
跨域的一般解决方案 JSONP 貌似和你使用场景不相符, 就不考虑了.
猜想你必须使用XHR, 那么请试试从CORS
https://developer.mo
对于firefox你可以试试 Force CORS 这个插件
http://stackoverflow
对于IE, 你也可以试试 XDomainRequest(XDR)
http://msdn.microsof
谢谢，这么全啊。其实是想在手机上做请求测试，毕竟chrome不可能完全模拟移动设备的环境
是想在手机上做跨域请求啊
如果你是用的phonegap来做app, 那么phonegap是可以设置允许跨域请求的.
设置好后, 你就可以在app页面中通过XHR来发送任意请求了.
PS: 我们平时在本机开发web app时, 就可以开启chrome的允许跨域, 快速开发好UI和逻辑, 免去每次都要在手机上测试的麻烦
我们目前也是这么做的，我只是想确认下目前前端有没有更好的解决方案。然后我们做的是移动浏览器上的单页应用，没有用phonegap
不知道你说的更好的解决方案是指解决哪个方面的问题？e.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc
* 在电脑(浏览器)上更好的模拟手机(移动)设备上的环境，可以试试Ripple
https://chrome.googl
* 在手机上更好地实现跨域请求？
对，就是想问问是否可以在手机上实现跨域请求，其实现在用chrome调试问题也没什么问题，就是我们要求跨浏览器的兼容，用的是amf协议传输数据，有一个amf.js可以将二进制码解析成js对象，在别的浏览器上都正常，但在IE上好像解析中文的时候有问题。
你们的web app是直接在(手机)浏览器上运行的? 没有用phonegap之类的东西打包成一个真正的手机app, 让用户下载再安装的那种?
milkm/amfjs/blob/master/amf.js com.au/binary-communication-using-ajax-and-amf
om/rainman/archive/2011/02/20/1959325.html
如果是这种情况, 那么就无所谓什么手机上实现跨域请求了, 任何浏览器默认都不会允许你跨域的, 因此你只要是电脑的浏览器上能够提供很好的跨域方案, 理论上放在哪里都是一样的, 包括手机上.
因此我觉得JSONP更适合你的场景, 但你又提到了要用AMF作为数据协议, 因此数据流是二进制的, JSONP果断pass.
考虑到想换协议可能不是那么容易的事情了, 而且你还提到了IE, 那就可能更悲剧了(希望只考虑支持IE8+), 因此我给出以下几点跨域的建议:
1. 使用代理来实现跨域请求
这个也算是通用的解决方案了
2. 在服务器上实现CORS
amf.js我没用过, 但瞄了一眼源码, 猜想底层也是通过XHR来实现的, 因此CORS同样适用
https://github.com/e
源码提到了binary communication using ajax and amf
http://www.reignite.
另外还可以参考
JavaScript跨域总结与解决办法 http://www.cnblogs.c
噢，谢谢谢谢。强！！！
你好，请问werein能够查看类似于chrome调试下的timeline中的js profiler和memory吗？
看图片中不是有一个timeline吗?
为什么控制台打印不出错误信息？
错误信息指的是 JS 执行报错的信息吗?