Webpage - 移动端调试页面

移动端调试页面

移动端的调试场景比较复杂，要调试的网页不一定就是在浏览器软件中展现的的，所以就需要各种不同的方法去进行调试。
首先我们可以把要调试的场景分为常规的和复杂的，当然在常规的条件下调试就会比较简单，在复杂的情况下就比较复杂。

常规情况

在手机上或者是平板上调试网页，这个时候如果我们是在浏览器软件中调试，那么在PC上都有相应的控制台。

chrome

在开始调试之前要把Android的调试选项打开。

开始调试后就和普通的调试网页一样了，只是页面是在移动端。

Firefox

看这里。感觉远程调试比较繁琐，一直没有碰到过，所以也不好说什么。

Safari

和chrome差不多，但感觉比chrome简单一些。前提是有果子设备。

首先要打开Safari的开发者选项

然后就可以看到调试菜单了

复杂情况

只要不是调试的网页在浏览器软件中都可以当做是比较复杂的情况，因为做调试之前要做一些配置。

Android和apple内嵌页面

做APP开发的时候，很多开发者会直接用webview组件，这样APP里就可以显示网页。所以Android和apple就各自搞了解决方法（自备梯子）。但我基本没有在apple设别上调试过，因为没有什么版本问题。要进行调试的基本都是Android设备，毕竟版本的分化还是比较严重的。这个方式还有一个问题就是APP需要开启调试，所以如果你的网页是嵌入到别人的APP中，那么这个办法就没有效果了。

开启了调试模式后，chrome可以看到APP中的内容。

类微信

指的是把自己的网页嵌入到别人的APP中的情况。这个时候我们就需要使用weinre。

安装和运行，我这里是通过nodejs安装的，官网也提供了其他的方法安装。

sudo npm install -g weinre

开启后就可以在浏览器中查看了。

weinre --boudHost -all-

浏览器中查看http://localhost:8080。
移动端访问自己的网站地址就可以了，这个8080只是监听用，开启后就不要管了，移动端的访问地址不变。

在要调试的网页中插入如下的js文件，里面的IP是你PC的，相应的替换就可以。

<script src="http://192.168.199.147:8080/target/target-script-min.js"></script>

在控制版面就可以看到控制台了。

之后的操作就和chrome的控制台一样了。

但是这种方法还有有一定的局限性，network没有办法查看到所有的加载情况。因为运行的原理是通过嵌入的JS来通信，所以只能捕捉之后的请求。可以当成是chrome控制台的阉割版。

phonegap

可以用webview的方式调试，也可以用调weinre的方式。

其他的方法

国内的公司（BAT）对这方面应该有较为完善的体系，但似乎是没有开源，所以也没有头绪。也有很多的软件对weinre做封装。在FEX看到过一个调试的文章，很详细。如果你有别的方法或者思路也可以和我交流一下。

如有任何问题和错误可以留言。