调试设置移动端Web开发环境搭建实践

新手发帖，很多方面都是刚入门，有错误的地方请大家见谅，欢迎批评指正

本文重要总结一下挪动端进行前端开发时需要用到的一些工具，以及他们之间互相的组合，同时也包含本人应用的组合。

1. Chrome To Mobile

PC机上安装该chrome插件；在手机端安装chrome浏览器，登录chrome, 启用“Chrome 转发至挪动设备服务”；在PC端上输入对应要调试的网址，然后点击发送到手机，则会将该网址发送到手机端。免去了挪动端上输入网址困难的懊恼。

注：ios chrome 与android chrome 都支撑该功能

2-1. 调试—有线

Android chrome + Wndows/Mac OS

(1) 安装Android SDK

下载>解压>设置PATH为<sdk>/platform-tools/

(2) 手机启用USB调试模式

设置>开发者>开启USB调试模式

(3) chrome启用USB网页调试

设置> 开发者工具 > 启用USB网页调试

(4)用USB线连接挪动设备

(5)开启adb服务器

命令行进入sdk/platform-tools目录>输入

adb forwrad tcp:<port> localabstract:chrome_devetools_remote

(6)访问localhost:<port>

注：启动服务碰到错误的情况, 运行adb kill-server。

iOS Chrome不支撑这类方法调试

iOS Safari + MAC

该方法只适用safari6.0+的版本。

(1) 手机进入偏好设置，点击safari，开启web检查器；

(2) Mac下进入safari的偏好设置，表现“开发”菜单；

(3) 手机链接Mac， 查看MAC Safari “开发”菜单，会有你的ios设备名的一行选项，这下面的子菜单就是你的ios safari上打开的网页

2-2. 调试—无线

weinre

该方案我这不分析了，有兴趣的读者可以网上搜之。

    每日一道理
人生好似一条河，既有波澜壮阔，汹涌澎湃，也有清风徐来，水波不兴；人生好似一首歌，既有欢乐的音符，也有悲壮的旋律；人生好似一条船，既有一帆风顺时，也有急流险滩处。愿我们都能勇于经受暴风雨的洗礼，接受生活的挑战和考验！

因为我很讨厌这类调试方法， 一个是要引入额外通信脚本，IP一边，脚本地址又要变； 一个是速度慢得要死。 用过一次后， 就被我抛弃了。

MIHTool

该方法只适用于iOS系统， 具体用法就不多说了，直接点击标题链接吧， 方便，壮大，易上手，挪动端有Iphone和Ipad的， 我推荐直接用这个工具了。因为没有那么多繁琐的安装步调。

3. HOST绑定

(1) PC和MAC开启代理服务器

Fiddler

Fiddler只有windows版，所以该方法只适合windows系统。

Fiddler>Tools>Fiddler Options>Connections

NProxy

node编写；

安装简单： npm install nproxy -g

应用方便： nproxy

默认运行在8989端口， 加-p选项和端口号可以设置运行的端口

适用于win和mac， 同时也具有了fiddler的文件替换功能， 具体可以点击标题链接查看更具体的功能。

注： 该工具现在临时无法代理手机端下的https请求， 已反馈给作者，期待修复。

(2) 手机端设置代理

进入wifi设置， 选择手动输入代理服务器， 输入PC和MAC的IP及相关端口即可。此时，手机应用的就是你桌面机器的hosts。

PS: Android上有个设置代理的应用，叫DroidProxy， 可以帮你保存设置过的代理地址，这样你就不必每次都再去输入代理地址了。 iOS大家可以补充下。

我的心得和总结

我自己应用的方案如下：

Chrome To Mobile（必备了，没什么选择）

调试上：

iOS设备上应用 MIHTOOL， 实在是方便。

Android机上只选择usb调试， weinre太恶心了，太恶心了= =！

hosts绑定上：

我选择的是nproxy， 一行命令就开启了代理， 且资源消费小，另一方面，撸主有MAC- -!

PS: CSDN的编辑器没有支撑markdown的吗?... 难用得一比啊....  有兴趣的读者可以光顾我的BLOG:  http://exodia.net

文章结束给大家分享下程序员的一些笑话语录：

有一天，一个男人穿越森林的时候，听到一个细微的声音叫住他。他低头一看，是一只青蛙。
“如果你亲我一下，我会变成一个美丽的公主哦。”男人一言不发，把青蛙捡起来，放入口袋。
“如果你亲我一下，我会变成一个美丽的公主哦。而且，我会告诉我遇到的每一个人，你是多么聪明和勇敢，你是我的英雄。”男人把青蛙拿出来，对着它微微一笑，又把它放回口袋。
“如果你亲我一下，我会变成一个美丽的公主，然后我愿意成为你的爱人一星期。”男人又把青蛙拿出来，对着它微微一笑，把它放回口袋。
“如果你亲我一下，我会变成一个美丽的公主，然后我愿意成为你的爱人一年，而且你可以对我做任何事。”再一次，男人把青蛙拿出来，对着它微微一笑，又把它放回口袋。
　　最后，青蛙无力地问：“我开出了这么好的条件，为什么你还不肯吻我？”男人说：“我是一个程序员，我可没时间和什么公主鬼混。不过，拥有一个会说话的青蛙，倒是蛮酷的。”

---------------------------------
原创文章 By
调试和设置
---------------------------------