1) android chrome浏览器(含微信)

移动浏览器如果是基于chrome的, 比较简单, 以Windows作为调试端,如下:

android端

USB连接android和电脑,
打开chrome,进入网页

调试端

打开chrome, 输入 chrome://inspect
应该可以看到android chrome打开的网页,点击inspect调试

2) IOS safari浏览器

以MAC上的safari作为调试端

IOS端

USB lightning线连接iphone和mac, 点击"信任"此电脑
打开"设置->safari->高级->WEB检查器"
打开safari,进入网页

MAC端

打开safari, 菜单进入并勾选"Safari->偏好设置->高级->在菜单栏显示"开发"菜单"
点击"开发->[你的iphone名称]->开启调试"
再次点击"开发->[你的iphone名称]",应该就能看到IOS上打开的页面,点击对应的页面进行调试

3) 调试任意移动浏览器

主要看这一篇介绍,因为调试android 里面提及到三种不同的方式:

weinre

weinre是在上面方式都无效的情况下, 我比较推荐这一种.
* 使用NPM安装
npm install -g weinre
* weinre可以用命令行加参数运行,不过为了方便起见, 在用户根目录下建立一个配置文件更好(用户根目录,在windows下面可能是是 C:\Users\Username, 在Linux下是~).
建立文件夹.weinre ,建立文件server.properties , 文件内容如下:

boundHost:    -all-
httpPort:     8888
reuseAddr:    true
readTimeout:  1
deathTimeout: 5

释义: boundHost是绑定到的主机,默认是localhost, 不过如果是这样就不能远程访问了. -all-允许一切访问, 也可以改为本机真实ip, httpPort是访问的端口.
命令行运行:
weinre
假如说你的调试端ip是a.b.c.d, 在需要调试的页面插入如下script

在手机端打开http://a.b.c.d:8888 ,先看一下能不能访问. 可以的话, 在手机浏览器打开上面要调试的页面.
在调试端浏览器打开http://a.b.c.d:8888/client ,就可以进行调试了.
需要注意的是, 调试期间, 手机屏幕不能关闭, 否则调试会断掉, 并且在刷新前无法恢复. android手机可以在"设置->辅助功能->开发者选项"中, 打开不锁定屏幕, 并把android手机插上电.

jsconsole.com

这个更简单一些, jsconsole.com这个网站相当于搭建好了调试服务器和客户端. 在被调试端的pages嵌入一段

2016年11月

移动浏览器的调试(android,ios)