移动端Web开发环境搭建
来源:互联网 发布:程序员自己创业 编辑:程序博客网 时间:2024/05/22 08:16
本文主要总结一下移动端进行前端开发时需要用到的一些工具,以及他们之间互相的组合,同时也包括本人使用的组合。
PC机上安装该chrome插件;在手机端安装chrome浏览器,登录chrome, 启用“Chrome 转发至移动设备服务”;在PC端上输入对应要调试的网址,然后点击发送到手机,则会将该网址发送到手机端。免去了移动端上输入网址困难的烦恼。
注:ios chrome 与android chrome 都支持该功能
(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不支持这种方式调试
该方法只适用safari6.0+的版本。
(1) 手机进入偏好设置,点击safari,开启web检查器;
(2) Mac下进入safari的偏好设置,显示“开发”菜单;
该方案我这不介绍了,有兴趣的读者可以网上搜之。
因为我很讨厌这种调试方式, 一个是要引入额外通信脚本,IP一边,脚本地址又要变; 一个是速度慢得要死。 用过一次后, 就被我抛弃了。
Fiddler只有windows版,所以该方法只适合windows系统。
Fiddler>Tools>Fiddler Options>Connections
node编写;
安装简单: npm install nproxy -g
使用方便: nproxy
默认运行在8989端口, 加-p选项和端口号可以设置运行的端口
适用于win和mac, 同时也具备了fiddler的文件替换功能, 具体可以点击标题链接查看更详细的功能。
进入wifi设置, 选择手动输入代理服务器, 输入PC和MAC的IP及相关端口即可。此时,手机使用的就是你桌面机器的hosts。
PS: Android上有个设置代理的应用,叫DroidProxy, 可以帮你保存设置过的代理地址,这样你就不用每次都再去输入代理地址了。 iOS大家可以补充下。
我自己使用的方案如下:
Chrome To Mobile(必备了,没什么选择)
iOS设备上使用 MIHTOOL, 实在是方便。
我选择的是nproxy, 一行命令就开启了代理, 且资源消耗小,另一方面,撸主有MAC- -!
1. Chrome To Mobile
注:ios chrome 与android chrome 都支持该功能
2-1. 调试—有线
Android chrome + Wndows/Mac OS
下载>解压>设置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
(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>Tools>Fiddler Options>Connections
NProxy
安装简单: npm install nproxy -g
使用方便: nproxy
默认运行在8989端口, 加-p选项和端口号可以设置运行的端口
适用于win和mac, 同时也具备了fiddler的文件替换功能, 具体可以点击标题链接查看更详细的功能。
注: 该工具目前暂时无法代理手机端下的https请求, 已经反馈给作者,期待修复。
(2) 手机端设置代理
PS: Android上有个设置代理的应用,叫DroidProxy, 可以帮你保存设置过的代理地址,这样你就不用每次都再去输入代理地址了。 iOS大家可以补充下。
我的心得和总结
Chrome To Mobile(必备了,没什么选择)
调试上:
Android机上只选择usb调试, weinre太恶心了,太恶心了= =!
hosts绑定上:
0 0
- 移动端Web开发环境搭建
- JQuery Mobile移动Web应用开发(2):开发环境搭建
- Cordova3.x 搭建web移动app开发环境小结
- Vue2 移动端开发环境搭建
- Vue2 移动端开发环境搭建
- Vue2 移动端开发环境搭建
- VUE移动端脚手架开发环境搭建
- web 开发,环境搭建
- web开发环境搭建
- android移动开发环境搭建
- 移动开发cordova环境搭建
- 【web开发】web开发环境搭建
- 搭建移动端框架Ionic+Genymotion开发环境
- 英伟达 JK1 Andriod 移动端开发环境搭建
- 移动端开发本地联调环境搭建
- 搭建移动端框架Ionic+Genymotion开发环境
- 基于Vue2的移动端开发环境搭建详解
- 基于Vue2的移动端开发环境搭建详解
- 装饰设计模式
- spring中AOP基本概念(14)
- spring中AOP中配置切面和切入点(15)
- spring中AspectJ(16)
- Ubuntu 14.04 搭建 Android 开发环境
- 移动端Web开发环境搭建
- 从Java String实例来理解ANSI、Unicode、BMP、UTF等编码概念
- hnoi2013游走 (高斯消元)
- CSS实现背景渐变(gradient)多兼容
- MotionEvent的getX()与getRawX()区别
- 五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程
- 字符流读和写
- Android中Parcelable接口用法
- Android自定义标题栏的实现,及屏蔽系统标题栏