如何用手机测试自己写的web页面

一、IOS 移动端 （Safari开发者工具）

手机端：设置 → Safari → 高级 → Web 检查器 → 开。

mac端：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。

在 OS X 中启动 Safari 之后，以 USB 电缆正常接入 iOS 设备，并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”，可以看到有 iOS 设备的名称显示，其子菜单项即为移动设备上 Safari 的所有标签页，点击任意一个开始调试。

便捷，简单，还可以调试外壳包裹的浏览器如微信。

备注：顺便提一下，要调试不同版本的ios，可以进xcode 进行下载不同的系统包（当然是在没有设备的情况下，土豪略过）

二、安卓移动端

1、chrome 调试方法

首先确保手机上和PC机上装有最新版本的chrome浏览器，其次是将手机的开发者选项打开并允许调试，然后将数据线将两台设备连接起来。在PC机上打开chorme，输入chrome://inspect ，然后在手机上打开chrome，然后手机会弹框询问是否允许调试，当然确定啦。有时候手机锁屏会断开，请拔掉usb重来。

点击inspect打开DevTools后，你可以选中页面中的DOM元素，同时设备中对应元素也高亮显示，也可使用DevTools中的Inspect Element 选中目标元素，可以实时与移动设备页面交互，方便的定位问题所在，进行代码调试，就能像pc端一样愉快的玩耍了。如果有问题，请检查chrome版本。

chrome的调试一般只可以调试chrome页面，但是其官方文档说还可以调试WebViews：

“On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.”

需要说明调试WebView需要满足安卓系统版本为Android 4.4+，并且需要再你的APP内配置相应的代码，在WebView类中调用静态方法setWebContentsDebuggingEnabled，如下：

if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {  
    WebView.setWebContentsDebuggingEnabled(true);  
} 

以上配置方法适用于安卓应用内所有的WebView情形。

安卓WebView是否可调试并不取决于应用中manifest的标志变量debuggable，如果你想只在debuggable为true时候允许WebView远程调试，请使用以下代码段：

if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) { 
    if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE{
        WebView.setWebContentsDebuggingEnabled(true);
    }  
} 

我这里只写了个大概，如果有其他问题或者欲查看详细文档，看下面链接（自备梯子）：

https://developer.chrome.com/devtools/docs/remote-debugging

注意：同样的你也可以在电脑上装安卓的虚拟机，推荐Genymotion ，一样的，想测什么版本，就自己下rom ，当然土豪当我没说。

2、UC开发者浏览器

由于不推荐移动端使用UC（大家应该自觉抵制移动端毒瘤），所以我只简单说一下，如果是在有兴趣，请自行查看： 开发者中心_UC优视︱UC浏览器︱全球第一大手机浏览器，用户超过5亿人︱手机浏览器

它的调试方法与chrome差异不大。

3、使用 Weinre 调试

该方法是比较老的一种方法，对于其他的调试方法来说属于刀耕火种型的。weinre是一个调试包，本身提供一个JavaScript，需要你在项目文件中加入该js。首先安装Weinre，我们用nodejs安装之，使用-g全局命令，以便可以在各个目录下访问：

npm install -g weinre

安装weinre之后再设置监听本机的ip:

然后打开返回的地址的说明文档，然后把返回的js写入到调试的文档中，注意我箭头所指向的地方。

这样访问页面的时候，加载这个 JS，就会被 Weinre 监听到进行控制。

小提示：这个 JS 后面的 #anonymous 起到一个标识作用，为了区别，我们可以将其修改成 #test 放到页面中。这时候，我们的 Inspect 面板的地址就不是 http://172.16.0.2:8080/client/#anonymous 了，而是 http://172.16.0.2:8080/client/#test 。

当我们访问页面的时候，就会出现在监听列表中，如果有多个网页，你可以从列表中选择一个。然后就可以使用后面的 Elements、Console 等面板来进行调试操作了：

Weinre 非常灵活，只需要在页面中加载这个 JS，然后访问即可，因此 WebView 可以用这种方法调试，一些低版本的 Android、iOS 也可以支持，Window Phone 也是可以用的。在调试移动设备时你可能需要在本地搭建一个局域网 IP 的服务器，将设备与本机网络连接成一个局域网，用移动设备访问这个网页即可。

当然 Weinre 也不是万能的，相比 Chrome 的调试工具，它缺少 JavaScript debug 以及 Profiles 等常用功能，但是它兼容性强，可以实现基础调试功能。

4、mihtool 测试

MIHTool 是国人开发的，基于 Weinre，用于 iOS 设备的前端开发测试。

与Weinre 的调试方式大体一样，即开启一个服务器，然后将 JS 插入到页面中，访问进行调试。

MIHTool 将这个过程简化了，它是一个 APP，可以直接安装到你的 iOS 设备里面，然后内置一个简单的浏览器可以打开你的测试页面，当它开启时，会自动向页面中插入 Weinre 的 JS，并告知 Weinre 控制台 URL 等信息，让你可以访问进行调试。

它还提供了一个公共的 Weinre 调试服务，生成类似 MIHTool Web Inspector 这样的链接，打开即可调试，非常方便，就是有些卡。

5、移动设备在线测试

移动端设备如此之多，小公司或者团队，没有这么多资金和精力购买如此多的测试设备进行测试。于是就有人买了这些设备，连接起来，提供在线调试服务。

一般就是他的真实手机设备打开，然后截屏出来供预览。

比如：BrowserStack 等，当然一般比较卡。

（话说这种貌似可以刷一点pv和uv出来。。。）

三、总结

调试方法很多，层出不穷，关键是要看自己是否顺手和熟练，关键在于按时按量的完成开发任务。

关键在于平时多积累跨坑姿势，少写一点不兼容的代码，调试就舒心一点。

如果这还不满足的话，可以查看更多资料：

移动端前端开发调试： http://yujiangshui.com/multidevice-frontend-debug/

移动开发真机调试： 移动开发真机调试

remote_inspect_web_on_real_device： jieyou/remote_inspect_web_on_real_device · GitHub

remote-debugging： https://developer.chrome.com/devtools/docs/remote-debugging

移动端Web开发调试之Chrome远程调试(Remote Debugging)：移动端Web开发调试之Chrome远程调试(Remote Debugging)

－－－－－－－－－－－－2015/12/2 补充 BrowserSync 部分－－－－－－－－－－－－－

很多朋友再说为什么不写Browser-sync，还有给差评的，说实话吧，我之前不了解那个东西。花了点时间看了一下，找到了他们的官网：Browsersync - Time-saving synchronised browser testing 觉得还挺有趣的哈。

然后就用了，觉得还行，真的会省很多工夫，入门也快，差不多就5分钟快速入门，前端的轮子都这样。。。

1、首先安装 BrowserSync

npm install -g browser-sync

2、启动 BrowserSync，原理应该是那种检测文件变化，然后在服务端 websocket 通知浏览器变动，再加载新的变动文件，在不支持websocket 的浏览器上就轮训服务端的变化，在加载新文件。我只是简单的抓包看了下，也不知道说对了没有。233

此时分两种情况，一种是静态：

// 监听css文件 
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"

二种是动态：

// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"

然后就上手了啊，就这么简单。。

还有gulp 配合哦。具体就看文档了：Browsersync + Gulp.js

总结，前端变化日新月异，一个月不学，感觉就落后了啊

Vorlon.JS

# Intro

An open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io.

# Usage

$ npm i -g vorlon 
$ vorlon 

# The Vorlon server is running
# With the server is running, open http://localhost:1337

<script src="http://localhost:1337/vorlon.js"></script>

1. 开发好页面，先用谷歌浏览器的手机屏幕模拟功能看一下
2. 去xampp官网下一下这个软件，在本地建一个简单的服务器，然后把自己的页面放到服务器上打开，你的页面路径应该类似于http://192.168.1.2/xampp/demo/index.html这种样子
3. 打开百度随便输一个二维码生成器，把上面的地址粘进去生成二维码
4. 拿出手机打开微信或其他能扫码的浏览器扫码预览就可以了
5. 想看修改代码后的样子重复第3步和第4步