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

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

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

转载于:https://www.cnblogs.com/jiangu66/p/3153395.html

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

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

    Spring+Maven+Dubbo+MyBatis+Linner+Handlebars                                         --Web开发环境搭建 本文主 ...

  2. [Java] Web开发环境搭建 - MyEclipse 篇

    Web开发环境搭建 - MyEclipse 篇 在前面,我们讲了使用 Eclipse Java EE 来搭建 Java Web 应用程序开发环境. 现在来说下比较流行的 MyEclipse 又是如何搭 ...

  3. Spring+Dubbo+MyBatis+Linner分布式Web开发环境搭建

            Spring+Dubbo+MyBatis+Linner分布式Web开发环境搭建               本文承接我之前的博客<Spring+Maven+Dubbo+MyBat ...

  4. 《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

    最近想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序,所以需要在本地搭建Node.js Web的开发测试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴 ...

  5. 阿里云服务器搭建python web环境_《Python入门》Linux 下 Python Web开发环境搭建笔记-阿里云开发者社区...

    之前写过 Windows 7下Python Web开发环境搭建笔记,今天写一下在Linux系统下搭建Python Web的开发测试环境. 我使用的系统是:ubuntu 14.04 server,根据个 ...

  6. Python入门 Linux 下 Python Web开发环境搭建笔记

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 之前写过 ...

  7. 《Python入门》Linux 下 Python Web开发环境搭建笔记

    之前写过 Windows 7下Python Web开发环境搭建笔记,今天写一下在Linux系统下搭建Python Web的开发测试环境. 我使用的系统是:ubuntu 14.04 server,Cen ...

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

    1. 下载和安装 1.1 下载JDK 在Java官方网站下载最新版本的 Java SE:  http://www.oracle.com/technetwork/java/javase/download ...

  9. Web开发环境搭建(个人学习转载)

    原网址:http://www.cnblogs.com/kangy123/p/6307533.html#top 1. 下载和安装 1.1 下载JDK 在Java官方网站下载最新版本的 Java SE:  ...

最新文章

  1. Spring Cloud第十三篇: 断路器聚合监控(Hystrix Turbine)
  2. 转载:逻辑思维提升表达
  3. 前端学习(3249):总结生命周期
  4. 前端js获取图片大小 扩展名_前端 JS 获取 Image 图像 宽高 尺寸
  5. react 访问后端_react前端用nginx怎么配置跨域访问后端restful api?
  6. 【CSS】当图片加载缓慢时,图片如何自适应高度
  7. try,catch,finally
  8. php strcmp bypass漏洞
  9. VScode嵌入式开发之入门教程
  10. vscode缓存清理
  11. C#绘制中国象棋棋盘
  12. frp服务端(frps) 安装及使用
  13. Win10系统“此电脑”误删了,或者无缘无故消失了,怎么找回?
  14. 单核CPU仍然存在线程安全问题
  15. Mydrivers: DVD Jon出手,绕过ATT激活iPhone
  16. php resque demo,php-resque 极简php消息队列
  17. iframe嵌套视频,视频全屏用不了
  18. 【奈茶君】STM32F407驱动WS2812
  19. 计算机网络实验-->> IP 协议分析
  20. 主数据与数据中台有什么区别?

热门文章

  1. Android 调用第三方 APP
  2. AndroidManifest--详细理解
  3. APP在后台被系统回收后,如何重新启动
  4. 为什么加泪滴,Allegro如何加泪滴?
  5. (OK) dnf - Fedora23——删除多余不用的内核
  6. python数据可视化读取excell文件绘制图像详细教程
  7. 有关Android studio 模拟器中输入中文
  8. 95后程序员月薪2万带着电脑送外卖 不想35岁就被社会淘汰 你呢
  9. pixiv爬虫,下载关注的所有画师的所有插画----解决谷歌人机,模拟登录,SSL错误与反反爬
  10. 京东图书详情页定价获取