文档章节

前端开发之配置-移动端真机测试环境的搭建小白教程

Kong777
 Kong777
发布于 2017/06/26 14:38
字数 944
阅读 248
收藏 0

前几天在公司做手机端的兼容页面 发现一些问题 然而需要配置与官网一样的域名才能调试 花了一些时间捣鼓了一下手机端测试的环境搭建 应该能满足大部分的需求了(window10)

        我所用到的工具:

        1.服务器工具wamp 3.0.6 (用来搭建局域网服务器的,在同一个wifi下就可以用你的真机去访问你的测试地址了)

        2.DNS服务器工具nodejs下的xdns(用来配置一个DNS服务器来拦截你的手机浏览器的,作用跟host文件差不多,这样你就可以在手机上做映射了)

        3.Android最简单的抓包工具Packet Capture(用来抓取你的手机浏览器的请求信息)

  1. 使用Wamp配置服务器
    配置映射在网上有一篇详细的教程 我就不多写什么了 直接去阅读他的博客吧http://blog.csdn.net/wzzdream/article/details/53421168

    配置完成以后 使用win+r 输入cmd 打开命令行 输入ipconfig 获取自己的局域网ip

    手机端直接输入IPV4的地址就能访问你的静态页面
  2. 安装nodejs(如果已经安装直接看第三步)
    直接去nodejs官网 https://nodejs.org/en/ 下载并安装nodejs
    安装完成后打开你的cmd 输入node 会进入这个nodejs的命令行

    如图 如果出现第二行 并且光标闪烁 说明安装成功
    如果没有出现可能是没有默认配置环境变量 右击我的电脑-属性-高级系统设置-环境变量

    把你的nodejs路径新增上去 再在命令行中输入node尝试
  3. 使用xdns来配置手机映射
    但有的时候测试环境对域名有要求,例如我的域名必须要是*.oschina.net 否则就无法达到预期的调试效果,但是未经过root或者越狱的手机 无法再手机上配置 host 文件拦截 这个时候就可以使用xdns了
    xdns 可以实现类似host文件的功能 拦截你的网址 并且映射
    xdns在github上的地址:https://github.com/allenm/
    由于作者好像使用的是linux系统 这里我说一下我是怎么在windows下使用这个工具的
    1. 安装xdns
      在cmd命令行中输入
      npm install xdns -g

      没出现报错就表示安装成功了 上图就是安装成功返回的数据
    2. 修改配置文件
      然后来到文件目录下打开 sample 文件夹 编辑里面的 hostsarr.js 
      使用方法

      将数组hostsArr的内容修改成你需要配置的映射就可以了
    3. 使用xdns
      在sample文件夹下右击 在此处打开命令行 输入
      node hostsarr.js

      就可以启动你的dns服务器了

    4. 最后进入你的手机 把DNS地址改成你的局域网IP

      1. iphone:
        点开无线网旁边的i

        把里面的dns地址修改成你的局域网IP 也就是ipconfig中的IPv4

      2. 安卓:
        长按你的wifi 点击修改网络  拉到最下面 IP 修改为静态 把地址1修改成你的局域网IP

  4. Packet Capture (安卓免root抓包工具)

    这么简单的东西我都懒得介绍了 直接给网址自己去看吧 http://kaywu.xyz/2016/02/28/PacketCapture/
  5. 参考内容
    1. WAMPServer3.0.6 64bit自定义网站根目录与多站点配置
    2. Mobile Web 调试指南(1)–– 把静态资源指向到本地

    3. github上的开源项目xdns

© 著作权归作者所有

Kong777
粉丝 0
博文 18
码字总数 10953
作品 0
私信 提问
Hybrid App 发展史

目录 1 概述 2 Cordova 平台 3 Web 发展史 3.1 静态网页 3.2 动态网页 3.3 客户端异步交互 3.4 开发效率提速阶段 3.5 移动平台 4 Hybrid App 分类一 4.1 多View混合型 4.2 单View混合型 4.3 ...

数学角度看生活
2017/06/21
0
0
APP性能测试诊断与优化--通过现象猜本质

APP性能测试诊断与优化--通过现象猜本质 这段时间忙着帮北京某城商行做移动端性能测试,因移动端IPD、手机等都是无线设备,而且该客户是面临全国各地用户提供移动端APP支持,为了更真实的模拟...

泊涯
2017/08/10
0
0
从前端到后台,开发一个完整功能的小程序

《微信小程序开发入门》专栏前面的文章主要介绍了小程序前端的开发,对于一个较复杂和完整功能的小程序都是需要后台的支撑的,比如数据的获取和存储、逻辑的处理等。 后台的开发,可以选择P...

anda0109
2017/06/15
0
0
我想用手机测试自己写的web页面,该怎么做?

作者:不爱吃西红柿的鱼 链接:https://www.zhihu.com/question/37361845/answer/71674280 来源:知乎 一、IOS 移动端 (Safari开发者工具) 手机端:设置 → Safari → 高级 → Web 检查器 ...

hhj187
2016/10/16
138
0
【转帖】测试环境的搭建和维护

只要做过一次测试,就一定知道测试环境,但测试环境是如何搭建和维护的呢?就不一定所有人都明白了。 测试环境的搭建,每个公司都有不一样的流程和方法。一种是运维或者开发负责搭建和维护,...

12332111ss
2016/04/28
543
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习之模块

1、 stub_status模块: 用于展示nginx处理连接时的状态。 配置语法如下: Syntax:stub_status;Default:默认没有配置Context:server、location 可以编辑default.conf,加上如下配置: ...

码农实战
38分钟前
4
0
MySQL,必须掌握的6个知识点

目录 一、索引B+ Tree 原理 MySQL 索引 索引优化 索引的优点 索引的使用条件 二、查询性能优化使用 Explain 进行分析 优化数据访问 重构查询方式 三、存储引擎InnoDB MyISAM 比较 四、数据类...

李红欧巴
42分钟前
4
0
堆”和“栈

C++作为一款C语言的升级版本,具有非常强大的功能。它不但能够支持各种程序设计风格,而且还具有C语言的所有功能。我们在这里为大家介绍的是其中一个比较重要的内容,C++内存区域的基本介绍。...

SibylY
53分钟前
4
0
总结:Https

一、介绍 简单理解,https即在http协议的基础上,增加了SSL协议,保障数据传输的安全性。 它由以前的http—–>tcp,改为http——>SSL—–>tcp;https采用了共享密钥加密+公开密钥加密的方式 ...

浮躁的码农
56分钟前
6
0
数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部