基于hosts的手机端网页调试方案

发表于

这种方案最终能达到怎样的效果？

  • 手机可以访问内网的测试服务器，而不需要更改hosts
  • 对于通过域名引用css/js资源的网站(如：qunarzz.com)则更有福了。将qunarzz.com指向本机，可以在本机修改直接在移动设备上查看效果。

###这个方案原理是什么？###
使用代理，连接代理服务器，修改代理服务器的hosts文件以连接网页服务器。对于移动设备是透明的（除了设置代理)。

###具体搭建步骤###
macbook + squid + WIFI

移动设备连接WIFI并设置代理,保证移动设备和代理服务器在同一局域网

1. 通过homebrew安装squid

2. 修改配置文件/usr/local/etc/squid.conf

主要需要注意以下三点,其它acl都去掉，允许所有

1
2
3
4
5
6
# 允许所有客户端使用代理
http_access allow all
# Squid normally listens to port 3128
http_port 3128
# 添加这一行，让squid读取本地hosts文件
hosts_file /etc/hosts

3. 启动squid

1
localhost:~ luckyxutao$ /usr/local/Cellar/squid/3.3.11/sbin/squid start

4.修改hosts后需要重新读取配置文件

1
localhost:~ luckyxutao$ /usr/local/Cellar/squid/3.3.11/sbin/squid -k reconfig

5. 配置移动设备

我的是直接配置wifi的代理,将代理服务器设置为搭建squid的ip,端口默认3128
mac共享热点，可将频道设置为1、2、3，过大的时候我这失败了（原因不明)

一般是不需要浏览器设置啥的，如果使用chrome需要把省流量关闭