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

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

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
调试和设置
---------------------------------

调试设置移动端Web开发环境搭建实践的更多相关文章

  1. Web开发环境搭建 Eclipse-Java EE 篇

    Web开发环境搭建 Eclipse-Java EE 篇 [原创内容,转载注名出处] 1. 下载和安装 1.1 下载JDK 在Java官方网站下载最新版本的 Java SE:  http://www.o ...

  2. 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记

    近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...

  3. 记录一下Web开发环境搭建 Eclipse-Java EE 篇

    转自https://www.cnblogs.com/yangyxd/articles/5615965.html Web开发环境搭建 Eclipse-Java EE 篇 [原创内容,转载注名出处] 1. ...

  4. 如何学习web开发环境搭建和脚手架

    Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...

  5. Spring+Maven+Dubbo+MyBatis+Linner+Handlebars—Web开发环境搭建

    本文主要分三部分,分别是:后台核心业务逻辑.桥梁辅助控制和前台显示页面. 本Web开发环境综合了多种工具,包括Maven包管理与编译工具.Dubbo分布式服务框架.MyBatis数据持久化工具.Lin ...

  6. ubuntu的web开发环境搭建

    为了保持mac的干净整洁,决定用PD搭建一条web开发环境,记下整个过程. ubuntu 首先是操作系统,本着习惯就好的原则,选用了Ubuntu server 12.04.4版.系统的安装很简单,ht ...

  7. Spring.DM web开发环境搭建

    作为一个初学者来说,搭建好Spring.DM 的web开发环境还是有些麻烦的.我就遇到了N多麻烦,走了很多弯路.本文介绍了2种比较简单的搭建Spring.DM OSGi web开发环境的搭建.   第 ...

  8. OSGI的WEB开发环境搭建

    第一步,搭建OSGI环境: 打开eclipse,点击run->run configration..,配置如下,点击run. 运行结果如下图所示:说明OSGI环境搭建完毕. 第二步:搭建基于OSG ...

  9. JAVA WEB开发环境搭建

    JAVA WED开发环境搭建 JDK的安装和配置 到https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21 ...

随机推荐

  1. Linux下防火墙设置

    Linux下开启/关闭防火墙命令  1) 永久性生效,重启后不会复原 开启:chkconfigiptables on 关闭:chkconfigiptables off 2) 即时生效,重启后复原 开启 ...

  2. Extjs grid分页多选记忆功能

    很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候 ...

  3. lsof基本使用

    当你想在计算机上启动一个服务,电脑已经建议"port already in use",此时,可以使用lsof命令查看占用端口的进程(lsof -i:port). lsof这是LiS ...

  4. Web前端框架与类库

    Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...

  5. 项目管理和版本跟踪——Redmine和SVN的结合

    项目管理和版本跟踪——Redmine和SVN的结合 分类: Redmine2009-06-01 10:38 565人阅读 评论(0) 收藏 举报 svn项目管理tortoisesvn数据库railsr ...

  6. Ubuntu(Linux) + mono + jexus +asp.net MVC3

    Ubuntu(Linux) + mono + jexus +asp.net MVC3 部署 感谢  张善友 的建议,我把 微信订餐  由nginx 改成 jexus,目前运行状况来说,确实稳定了很多, ...

  7. MVC 4

    Asp.net MVC 4 学习笔记(一) 公司最新的产品改成MVC开发模式了,以前产品开发都是经典的三层架构.对于“听闻”过而不有实际“品偿”过MVC的程序员来说,是知识的狭隘的表现.于是乎最近在学 ...

  8. [置顶] 网页提交方式post和get的区别和联系

    都知道GET一般用于获取/查询资源信息,而POST一般用于更新资源信息.但具体区别呢?可以互换吗? 主要区别有:1传输数据的方式不同,2传输的数据多少不同,3传输数据的安全性不同4,后台获取数据的方式 ...

  9. iOS基础 - 多线程线程

    一.多线程的应用 l 充分发挥多核处理器的优势,并发(同时执行)执行任务让系统运行的更快.更流畅 二.进程与线程概念 l 一个运行的程序就是一个进程或者叫做一个任务 l 一个进程至少包含一个线程,线程 ...

  10. .NET:线程本地存储、调用上下文、逻辑调用上下文

    .NET:线程本地存储.调用上下文.逻辑调用上下文 目录 背景线程本地存储调用上下文逻辑调用上下文备注 背景返回目录 在多线程环境,如果需要将实例的生命周期控制在某个操作的执行期间,该如何设计?经典的 ...