1、Chrome DevTools远程调试Android和iOS页面

电脑上安装新版谷歌浏览器，然后地址栏输入chrome://inspect会打开设备监视页面，这里可以监视到iOS和Android设备，如果界面和图中不一致请安装最新版浏览器

Android:

前提：

1、手机和电脑使用usb连接，手机要开启usb调试模式(不同手机不一样)

2、手机上安装最新版谷歌浏览器并打开

会发现设备监视页面多出了一个华为设备，并且能看到当前手机上谷歌浏览器打开的网页的连接

a):可以在这里输入手机要打开的url然后open，手机上显示的当前页面就会改变

b):inspect表示开始调试当前页面，会打开调试面板(重要)

c):focus tab，表示让手机显示当前这个连接

d):reload表示重新加载页面，也就是刷新

e):close表示关闭当前手机显示的页面

接下来，点击inspect开始调试页面，注意如果google浏览器不能翻|墙的话，这个调试页面是打不开的，可以百度修改hosts文件翻|墙

然后就可以像调试PC端网页一样远程调试手机网页了

iOS(window系统上，如果是macbook系统忽略此部分):

可以参考：http://www.cnblogs.com/kelsen/p/6402477.html

前提：

1、电脑安装iTunes软件，不然苹果手机不能正常被识别，安装好后数据线连接手机和电脑

2、打开手机的设置——>Sarafi——>高级——>Web检查器——>启用(默认是关闭的，将其打开)

3、下载ios-webkit-debug-prox代理(32位或者64位)，其作用就是在Chrome和Sarafi之间建立了一个代理，便于电脑的Chrome检测手机Sarafi打开的页面

4、在cmd中执行ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html，命令中-f是以谷歌内置的监视器来调试(默认使用远程的)

启动后会监听9222端口，然后看到连接上了一台名为jiba的iOS设备，括号中为设备的UDID；然后看谷歌浏览器是否检查了这个端口，右图中有9222端口即可，没有就手动添加

此时打开手机Sarafi浏览器，打开百度首页，发现浏览器能检测到，没看到就刷新这个监视界面，一般来说会在3秒内自动出现

点击inspect同样出现了调试面板，如下，发现iOS调试的面板不能看到手机屏幕在电脑上的投影，不过这并不影响调试；但是可能会遇到在调试js时断点不生效的问题，

如果很不幸遇到这个问题的话，将图中红框中的按钮连续点击两次——先禁用断点再启动即可恢复端点调试功能，不知道为什么，猜测是这个过程中恢复了断点的状态；这个问题很奇葩。

到这里使用Chrome调试iOS和Android就都完了，这种使用谷歌浏览器的方式，在Android上依赖于手机谷歌浏览器，在iOS上依赖Sarafi浏览器，受到具体软件的限制；不过可以理解，毕竟远程调试不如模拟调试简单

2、javascript的debugger语句

需要调试js的时候，可以给需要调试的地方通过debugger打断点，代码执行到断点就会暂停，这时候通过单步调试等方式就可以调试js代码

在需要打断点的地方添加debugger：

if (waldo) {debugger;
}

这时候打开console面板，就可以调试了

Tips：如果你不知道怎么调试，那么尽快看下：Chrome DevTools中断点部分的教程

3、Weinre

在移动上面开发调试是很复杂的，所以就有了weinre。安装weinre可以实现pc来调试手机页面，所以对于移动开发调试是很重要的哦~

安装weinre

weinre可以通过npm来安装：

npm install -g weinre

安装完之后，可执行下面的命令来启动：

weinre --httpPort 8080 --boundHost -all-

这样访问自己的127.0.0.1:8080按照提示在需要调试页面中插入一段js，然后就可以调试了。操作界面类似Chrome的DevTools，具体操作可以看下[教程](<http<a rel="nofollow" href=""></a>>

原理

通过在需要调试的页面中引入一段weinre的js，实现pc和手机的socket通信，从而实现实时调试。

Tips

如果你嫌每次都要在调试的页面引入js麻烦，可以做个书签或者chrome插件
如果嫌安装麻烦，可以使用phonegap的weinre：http://debug.phonegap.com/

4、Eruda——手机网页前端调试面板

eruda是什么？正如标题所言，是用来在手机上调试页面的，注意是在手机上不是在电脑上；前面说的调试方式都是在电脑上模拟调试或者远程调试手机页面，但eruda是直接在手机上调试页面。

有什么好处？如果非要说好处就是能够直接在手机上打开类似PC端开发者面板一样的调试面板，主要用途是当PC端调试手机页面和手机上运行时效果不一致时可以直接在手机上调试。

示意图(手机上调试效果图)：

使用Chrome，Firefox连接手机调试啊！但那样限定于使用相应的手机版浏览器，意义并不大。Weinre，Vorlonjs跟debugGap等工具实际上也并不好用，初始化过于繁琐，而且仅能调调样式，打打log，断点调试什么的也没有办法支持。每次测试出现问题，基本上只能屁颠屁颠地跑过去拿手机过来连接自己的本地环境改代码查bug。

https://github.com/liriliri/eruda

示例

请在手机上打开链接：http://liriliri.github.io/eruda/index.html?eruda=true

安装

你可以通过npm来下载使用该工具：

npm install eruda --save

然后在页面中引入以下脚本：

(function () {var src = 'node_modules/eruda/dist/eruda.min.js';if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
})();

可以看到只有当url上带有eruda=true或本地存储active-eruda为true的时候，工具才会被加载并执行。其中设置面板有选项可以设置active-eruda使工具常驻，不用每次都在url上添加eruda=true。

注：该插件的文件gzip后大小约有50+kb，相比于项目页均js脚本量几kb来说还是太大，并不适合在现网环境加载影响页面载入速度。

功能面板介绍

Console面板
该面板会替换console对象中的log，error，info，warn，dir，time，timeEnd方法以不同的样式显示出来，同时默认会通过onerror捕获全局错误（可以在设置面板关闭），打出错误信息及其堆栈。当然，日志的清除与过滤也是支持的，还可以直接在该面板输入js脚本并在全局作用域下执行。该面板还内置了一些快捷指令来快速执行一些有用的功能，比如在页面载入jQuery或underscore，使用正则表达式过滤log等。

Elements面板
查看Dom状态对于调试工具自然是一个必不可少的功能。通过该工具，你无需连接PC端调试工具就能轻松查看DOM节点上的各个属性值，内容，应用的CSS样式。被查看的元素也会在页面上高亮，能够使你快速知晓DOM元素的margin，padding。

注：感谢weinre项目，扒了一点代码:)

Network面板

Network面板通过performance接口以图表的形式展示页面的加载速度。计划在resource timing api得到广泛应用时再加入各个资源的加载情况，不过目前它仅仅只能得到页面的加载速度。

Resources面板

该面板主要用来展示localStorage，cookie，页面脚本，样式，图片等资源，同时能够对其执行一些简单的操作，如清除指定的localStorage条目。

Info面板

很多时候会需要查看复制浏览器上的指定信息，比如通过JsBridge获取到的用户Id，用于后台数据查错。又比如，测试碰到某些页面错误时，我们首先做的一件事经常是：把链接发给我看看，然而APP里并没有复制链接的选项:( 还有，一个页面在不同环境下需要有不同的表现，项目H5页面经常需要在不同APP里有不同表现以及调用不同jsApi。靠什么来区分？UA。然而有时候对某个版本UA检测不准确就会造成页面出BUG，这时候如果有个方便的方法能够快速查看到出错者的浏览器UA就太好了。

综上，Info面板默认会展示出url和user-agent两条信息，你也可以通过调用它的接口输出其它指定信息。

Snippets面板

Console面板可以执行js脚本，但在手机上输入代码体验实在不怎么样。利用该面板你可以添加一些方法以便于快速和多次触发它。Sinppets默认加入了两个脚本，为页面所有元素加border查看排版结构以及重刷页面。

Features面板

嗯，之前碰到过BUG，结果发现是APP的WebView没开启对localStorage的支持，所以有了该面板。它会检测一些常用的功能是否被浏览器所支持，不支持的话将以红色高亮进行显示。

自定义插件

Eruda本质上只是一个可拖拽的入口按钮加一个Tab组件，其中的每个面板都是一个独立的插件。所以，事实上你可以自行添加各种自定义的信息展示面板，具体可参考这个页面FPS展示插件。这是一个很有用的特性，因为通用组件很难做到适应于各类需求，有很多时候你会想要去扩展它。比如，项目用于移动端测试环境切换的工具会在每个页面嵌入该插件用于不同环境的切换，同时显示ID便于查找单次请求所对应的完整HTTP记录，它长下面这个样子：

结语：Eruda调试面板的基础工具库：http://liriliri.github.io/eustia/

调试Android和iOS页面相关推荐

电脑端浏览器调试移动端网页支持调试Android和ios
Android 1. 谷歌浏览器 Chrome (需要翻墙) ① USB连接电脑并开启USB调试 (以vivo为例其他手机找到版本号多次点击) 设置--更多设置--关于手机--多次点击软件版本号(开 ...
Android打开jsp页面,如何确定是通过jsp页面上的Android设备还是IOS设备访问网页
路上的小 01-15 2878 加载和访问JSP时,将判断是手机Web端还是PC端 $(document).ready(function(){//平台,设备和操作系统var system = {win ...
ajax后台如何把对象转为json_SM后台数据与前端（PC、M站、Android、IOS）的交互——页面渲染...
一.介绍对于后台服务器开发者来说,更多的是处理客户端发过来的请求和业务逻辑,很少会有人考虑页面的渲染问题. 以前的大部分后台开发人员最多也就是在 jsp 页面或者其他视图渲染框架来渲染PC端的页面, ...
第 3-5 课：Flutter 调试及 Android 和 iOS 打包
在使用不同的开发语言进行开发时,一般都会用到调试.断点调试功能.例如 Web.Android 等等都是支持调试和断点调试的,Flutter 也不例外,支持调试和单元测试功能,还有性能.布局分析器等等. ...
HbuilderX中真机调试 Android IOS
文章目录一.Android 二.IOS 2.1. 运行到IOS 2.2. 打开调试模式一.Android HbuilderX中 Android 真机调试二.IOS 2.1. 运行到IOS 2.2 ...
使用chrome devtools app(离线包）调试Android H5页面
在调试Android H5页面的时候时候Chrome自带的"Chrome://inspect"工具调试时,国内用户都面临不可用的问题. 不翻墙,实现chrome浏览器调试工具的 ...
h5页面中android与ios返回上一级并强制刷新的方式
/* 进行android与ios的判断*/var u = navigator.userAgent, app = navigator.appVersion;var isAndroid = u.index ...
如何通过Chrome远程调试Android上的Web页面
这里写自定义目录标题准备工作手机端打开USB调试模式 Chrome远程调试Android手机准备工作安卓手机(打开USB调试模式,USB链接电脑) PC端打开chrome浏览器手机端打开US ...
深入浅出：移动端（Android 和 iOS）数据采集埋点 SDK
随着大数据时代的到来,越来越多公司注意到数据带来的价值,开始自建或购买一些第三方的数据平台.从数据流的角度看,平台对于数据的处理,一般有以下几个步骤: 其中,数据采集工作是后面几个步骤的基础,数据采集 ...

调试Android和iOS页面