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

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

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. dom02

    事件对象:在触发DOM上的事件时dou都会产生一个对象,事件对象event DOM中的事件对象 1)type属性 用于获取事件类型 2)target属性 用于获取事件目标 3)stopPropagat ...

  2. Light OJ 1316 A Wedding Party 最短路+状态压缩DP

    题目来源:Light OJ 1316 1316 - A Wedding Party 题意:和HDU 4284 差点儿相同 有一些商店 从起点到终点在走过尽量多商店的情况下求最短路 思路:首先预处理每两 ...

  3. leetcode 34 Search Insert Position

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  4. proguard android迷茫

    我们收拾它意味着蛊惑项目即将结束.上线.但是,当这个问题就更烦躁人,我也记录因混乱中遇到的问题 首先,我在装android4.0封装版本,有没有在这个文件查看器项目 假设有,请继续点击进入projec ...

  5. .NET的微型Web框架 Nancy

    .NET的微型Web框架 Nancy .NET的微型Web框架 Nancy   大部分微软平台的开发人员如果选择开发框架只能是在ASP.NET WEBFORM和ASP.NET MVC两个之间选择. 而 ...

  6. WEB项目(B/S系统)打包安装(总结篇)

    原文:WEB项目(B/S系统)打包安装(总结篇) 打包安装程序的制作选择性还很多的,有installshield,wise installer,inno setup这几个做打包安装项目都是很强大的,要 ...

  7. Android借助Application重写App的Crash(简易版)

    MainActivity如下: package cn.testcrash; import android.app.Activity; import android.os.Bundle; /** * D ...

  8. 远程连接mysql速度慢的解决方法

    最近在公司内部连mysql速度非常慢,一直还以为公司的网络有问题,后经查发现出现这种问题的主要原因是mysql默认开启了DNS的反向解析功能,连接时反向解析计算机名称时耗时严重,导致连接超慢.解决方法 ...

  9. 【AngularJS】 2.0 版本发布

    [AngularJS] 2.0 版本发布 w5cValidator[AngularJS] 2.0 版本发布   w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些 ...

  10. WordPress搭建Personal Blog【转】

    早就想搭建一个专属于自己的博客了,用来记录自己生活.学习的点点滴滴.之所以选WordPress,主要是因为它可以支持Latex,而且特别喜欢其简约的风格. WordPress有个the famous ...