手机浏览器调试建议

使用电脑远程调试安卓手机上浏览器的JS

(2014-01-14 22:44:04)

转载▼

   

有时候要开发在手机浏览器上运行的网页,这样就涉及到要调试JS,在电脑上怎么模拟,跟使用真机还是有区别,这里介绍几种用电脑远程调试JS的方法。

1.使用google浏览器,因为安卓本来就是谷歌的,因此它本身对此有支持,开发了相关的插件

1)首先,电脑上要有谷歌浏览器(Chrome),最好是最新版的(Chrome 31以上);

2)安装了安卓的SDK;

3)手机上也安装谷歌浏览器(Chrome for android 31以上)

4)电脑的浏览器上安装支持调试的插件adb

5)确保手机可以通过USB数据线连接上电脑(如果不行,可以试试安装最新的手机驱动)

6)手机开启USB调试模式

7)用电脑打开Chrome浏览器,打开adb,点击view insepect

8)手机用chrome打开要调试的页面

9)在电脑的浏览器上,点击inspect,开始调试

注意:该方法可能不需要sdk,但是安装了最好,同时该方法要连接外网才能实现调试

参考网址:

谷歌官网:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

网友总结:

http://exodia.net/多终端/2013/06/22/响应式实践(1)移动端Web开发环境的搭建.html

2.使用weinre来实现远程调试,Weinre的本意是Web Inspector Remote,它是一种远程调试工具。功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等。

1)确保电脑安装了java 的jdk

2)下载weinre的jar包,下载网址:http://ishare.iask.sina.com.cn/f/23607399.html,下载后(或解压),放在一个文件夹里就行

3)运行cmd,在weinre所在文件夹的地址栏输入代码:java -jar weinre.jar --httpPort 8081 --boundHost -all-

4)打开本地浏览器,(使用webkit内核浏览器(chrome、safari))访问 http://localhost:8081/,不出意外的话可以看到weinre的基本信息。

5)"debug client user interface"是weinre的Debug客户端,点击进入后可以看到目前还没有被测试的目标网页

6)为了让需要调试的页面被weinre检测到,需要添加Debug Target

需要在调试的页面中增加一个js:

参考网址:参考网址:

http://www.cnblogs.com/hxh-hua/archive/2013/02/26/2933117.html

注意:该方法在实际使用时不知为什么无效,但网上说可以,求解释

3.使用UC浏览器开发者版来调试,UC浏览器做了一个开发者的版本,可以用于调试JS

1)在网上搜索UC浏览器开发者版,然后下载安装在手机上

2)连接手机可以使用USB或wifi,这里使用wifi连接

3)本机电脑开启connectify,将自己电脑当作wifi,然后通过手机连接上去。如果电脑和手机是连接同一个wifi网络的话,也是可以

4)在电脑上打开chrome浏览器,输入手机IP+9998,手机IP为192.168.112.244,则输入192.168.112.244:9998

5)在手机上打开UC浏览器开发者版,会提示是否允许远程调试,选择是

6)开始调试

时间: 2024-08-06 13:06:53

手机浏览器调试建议的相关文章

安卓手机浏览器调试

1.打开安装的开发者模式(百度各自平台如何打开开发者模式) 2.在谷歌浏览器中输入 chrome://inspect/#devices

手机网页调试·清除浏览器缓存的方法

在手机里调试网页的时候,总是为清除缓存烦恼.特别是QQ浏览器.最后甚至有同学开发出了Android下一键清除清除各种浏览器缓存的APP,但需要root,且每次耗时不短.最后经过尝试,发现了一个方便.有效的方法.那就是利用HTTP的响应头,强制浏览器不缓存资源. NodeJS 中的实现方法: NodeJS中可以通过设置一下方法设置响应头 res.setHeader("CacheControl", 'no-cache'); res.setHeader("Expires"

FireFox调试手机浏览器

https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android IN THIS ARTICLE Prerequisites ADB setup On the Android device On the desktop Enable remote debugging Firefox for Android 24 and earlier Firefox for Android 25 and lat

在PC上测试移动端网站和模拟手机浏览器的5大方

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

在PC上测试移动端网站和模拟手机浏览器的5大方法

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

【jQuery】论手机浏览器中拖拽动作的艰难性

本来标题是<论手机浏览器中拖拽动作的不可能性>的,但是想了想还是改成艰难性,避免过于绝对 本想在手机网页中实现一个如iphone可以随意拖动的控制按钮的,但是最后发现竹篮打水一场空, 虽然拖拽动作在手机浏览器中司空见惯,但是在手机浏览器中,要想实现可以被拖拽的组件,却是一件不可能的事情. 先来看看在PC网页中,拖拽动作是怎么做的, 首先,我们有一个按钮,点击有动作,一直按着不放,可以随意拖动,就像iphone可以随意拖动的控制按钮一样, 如上图的灰色图层,写出来也不甚容易, 首先,要把灰色图层

无插件,直接加参数,chrome它可以模拟手机浏览器

在目标出现,加上一些参数即可:--user-agent="mozilla/5.0 (linux; u; android 2.3.3; en-us; sdk build/ gri34) applewebkit/533.1 (khtml, like gecko) version/4.0 mobile safari/533.1" 这样就能够模拟手机浏览器访问,促进他们的调试,在加入后,必须关闭当前浏览器,然后打开足够的人才 版权声明:本文博主原创文章.博客,未经同意不得转载.

手机App调试(Android)

方法一:  用Chrome+手机来调试.1) 在PC上安装谷歌的USB驱动:         http://developer.android.com/sdk/win-usb.html#top 2) 在手机上打开Developer开关 3) 在手机上运行app (用IONIC或PhoneGap跨平台方案开发的. 需要是开发版, 不能是release版)( 确认手机和PC用USB线连接, 首次链接的时候, 在手机上会弹出信息, 要求trust此PC) 4) 在PC上, 打开Chrome浏览器, 在

Chrome浏览器调试功能介绍

(1)打开: 右击选审查元素 或者 Ctrl+Shift+I 或者 直接按F12 (2)介绍: Elements(元素) 查看.编辑页面上的元素,包括HTML和CSS Resource(资源)       查看到请求的资源情况,包括CSS.JS.图片.Cookies.HTML5的Database和LocalStore等 Network(网络)  分析网站请求的网络情况.查看某一请求的请求头和响应头还有响应内容.你需要先打开开发人员工具,切换到这个选项卡,之后再刷新页面才会有显示. Timelin