前端调试方式

1、iOS

运行环境要求
Mac + Safari 浏览器
iPhone（iOS 6 +） + Safari 浏览器

调试步骤
1.使用数据线将 iPhone 与 Mac 相连
2.iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）
3.iPhone 使用 Safari 浏览器打开要调试的页面
4.Mac 打开 Safari 浏览器调试（菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面）
(注：如果你的菜单栏没有“开发”选项，可以到左上角 Safari -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单。)
5、在弹出的 Safari Developer Tools 中调试

2、Android

运行环境要求
Chrome 版本 >= 32
Android 版本 4.0 +

1.安卓手机需要开启usb调试连接pc（具体在“手机设置-开发者选项”中开启）
2.电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项
3.电脑点击 inspect 按钮

图一是浏览器打开页面
图二是记录是手机助手里的webview。（应用里的webview）

vConsole

npm安装

npm install vconsole

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

vConsole一个轻量、可拓展、针对手机网页的前端开发者调试面板。

weinre

在你本地创建一个监听服务器，并提供一个JS脚本，需要在需要测试的页面中加载这段 JS，就可以被 Weinre 监听到，在 Inspect 面板中调试你这个页面。

需要先安装node（安装完后自动安装npm）
安装 weinre npm install -g weinre
开启 weinre weinre –httpPort 8888 –boundHost IP地址
浏览器打开 localhost:8888 :

在你所要调试的页面底部添加下面的脚本
<script src="http://loaclhost:8888/target/target/target-script-min.hs#anonymous"></script>
然后移动端浏览器打开 localhost:8888
利用手机打开所要调试的页面（也就是刚才添加了script的那个页面，注意要在pc上开启服务器，然后手机通过输入对应地址来访问页面）
点击调试页面里对应的Targets，然后点击Elements工具，就可以进行调试了。

Weinre还提供了下面的启动参数:

–help : 显示Weinre的Help
–httpPort [portNumber] : 设置Weinre使用的端口号，默认是8080
–boundHost [hostname| ip address | -all-] : 默认是’localhost’，这个参数是为了限制可以访问Weinre Server的设备，设置为-all-或者指定ip，那么任何设备都可以访问Weinre Server。
–verbose [true | false] : 如果想看到更多的关于Weinre运行情况的输出，那么可以设置这个选项为true，默认为false；
–debug [true | false] : 这个选项与–verbose类似，会输出更多的信息。默认为false。
–readTimeout [seconds] : Server发送信息到Target/Client的超时时间，默认为5s。
–deathTimeout [seconds] : 默认为3倍的readTimeout，如果页面超过这个时间都没有任何响应，那么就会断开连接。

Fiddler

调试（适用安卓和iphone）下载 FIddler4

状态图标

在工具栏选择Tools-> Fiddler Option -> Connections
设置端口8888和勾选Allow remote computers to connect 、 Reuse client connections 、 Reuse server connections
如果是HTTPS请求就要选择允许https连接

注意：手机和pc要在同一局域网下，打开手机wifi->代理设置-> 主机IP 端口8888

界面左侧是请求文件，
右键选择你想浏览的文件选择save-> Response -> Respones Body… 就可以保存到本地

界面右侧是工具

Statistic:关于HTTP请求的性能和其他数据分析;
Inspectors: 提供headers、textview、hexview,Raw等多种方式查看单条http请求的请求报文的信息
AutoResponder标签设置:选择Enable automatic reaponses 和Unmatched requests passthrough
选择AutoResponder 可将界面左侧的文件拖动到这里
在下面的Rule Editor 下面选择 Find a file… 选择本地保存的图片. 最后点击Save 保存下,即可替换成本地文件。

导出证书

在第2步的对话框中，点击右侧的【Actions】,选择【Export Root Certificate to Desktop】,把证书导出到桌面，点击【ok】

PC端安装证书

在桌面上找到第3步导出的证书FiddlerRoot.cer，双击证书，按照提示安装即可

移动端安装证书

移动端设置代理后，浏览器打开输入主机IP:8888 ，点击页面中的“FiddlerRootcertificate”链接，在弹出的对话框中随便设置一个名称确定即可。

whistle

基于Node实现的跨平台web调试代理工具
文档链接 https://wproxy.org/whistle/

Charles

参考地址：
https://github.com/riskers/blog/issues/11
http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html
http://blog.csdn.net/freshlover/article/details/42640253
http://blog.csdn.net/idlear/article/details/50999490
https://github.com/nupthale/weinre

Shopify搭建 Previous