目前各大网站普遍都把css，js放在独立域名下，这样即提高了页面加载性能又方便了前端工程师开发。由于css，js被存放在单独域名下，所以前端工程师在开发时，不需要在本地搭建服务器端环境，只需在hosts文件中将css,js的域名指到本地即可。

但是修改hosts这种开发方式也有它的缺点。首先看下这种开发方式的域名解析过程。  

164617446.jpg


从上图可以看出，当通过浏览器发起一个请求时，首先浏览器会先查看请求的这个域名在浏览器自身中是否有缓存，如果没缓存，浏览器又会去系统的hosts文件中查看是否有这个域名，如果还没有则会通过DNS找到这个域名对应的IP，然后才能与服务器端进行通信。可以看出查找域名的优先级是浏览器缓存>系统hosts文件>DNS。

这种域名解析机制有2个缺点:
1.当修改hosts文件后，由于该域名可能还在浏览器的缓存时间内，所以达不到即时更新的效果。
2.系统hosts文件是所有浏览器共享的，一旦修改了hosts文件，所有浏览器都会更新。如果你想边在本地环境开发，边访问线上环境，只能再开个虚拟机了。

上网搜了搜，似乎没有实现浏览器级别hosts功能的插件，但是在搜索过程中还是受到了些启发，想到了一个解决方案。

164649917.jpg


如上图，解决方案就是为浏览器设置代理，这样域名解析就可以跳过浏览器自身域名缓存查找和系统hosts查找。squid可以有自己的hosts文件，使用方式和系统hosts是一样的，所以我们可以把开发需要的环境完全写到squid hosts文件中。如果要切换开发环境(比如本地环境切换到beta环境)，只需修改squid hosts再重启squid，环境就会完全更新。这样就解决了第一个问题。

结合这2张图很容易就会想到如何解决第2个问题，那就是为一个浏览器设置代理，另一个浏览器不设置代理，这样一个访问的就是开发环境另一个访问的就是线上环境。在默认情况下，如果你对浏览器设置了代理，那么再打开的同一浏览器同样也应用了这个代理。但是chrome和firefox可以通过命令行参数解决这个问题，实现了不同浏览器实例可以访问不同的环境。

原理说完了，再看下搭建环境步骤:

1.代理服务器配置

squid下载地址:http://squid.acmeconsulting.it/，目前最新的稳定版本是2.7

解压后放到c盘根目录(放到其他路径似乎会出错 懒的折腾了就放在默认路径了)

cmd中  进入squid/etc 执行copy *.default *.

编辑squid.conf   去掉注释  并更改http的访问权限设置

在squid/etc中创建hosts文件  在squid.conf中添加指令 hosts_file c:/squid/etc/hosts

编辑后的squid.conf，其中一些指令都是squid默认开启的，后续可以将一些没用的指令去掉

acl all src all
acl manager proto cache_object
acl localhost src 127.0.0.1/32
acl to_localhost dst 127.0.0.0/8 0.0.0.0/32
acl localnet src 10.0.0.0/8 # RFC1918 possible internal network
acl localnet src 172.16.0.0/12 # RFC1918 possible internal network
acl localnet src 192.168.0.0/16 # RFC1918 possible internal network
acl SSL_ports port 443
acl Safe_ports port 80 # http
acl Safe_ports port 21 # ftp
acl Safe_ports port 443 # https
acl Safe_ports port 70 # gopher
acl Safe_ports port 210 # wais
acl Safe_ports port 1025-65535 # unregistered ports
acl Safe_ports port 280 # http-mgmt
acl Safe_ports port 488 # gss-http
acl Safe_ports port 591 # filemaker
acl Safe_ports port 777 # multiling http
acl CONNECT method CONNECT
http_access allow all
icp_access allow localnet
icp_access deny all
http_port 3128
hierarchy_stoplist cgi-bin ?
access_log c:/squid/var/logs/access.log squid
refresh_pattern ^ftp: 1440 20% 10080
refresh_pattern ^gopher: 1440 0% 1440
refresh_pattern -i (/cgi-bin/|\?) 0 0% 0
refresh_pattern . 0 20% 4320
acl shoutcast rep_header X-HTTP09-First-Line ^ICY.[0-9]s
upgrade_http0.9 deny shoutcast
acl apache rep_header Server ^Apache
broken_vary_encoding allow apache
coredump_dir c:/squid/var/cache
hosts_file c:/squid/etc/hosts

进入squid/var 创建cache目录

cmd中进入squid/sbin 执行squid -z

cmd中进入squid/sbin 执行squid -i -n squid_dev squid_dev为服务名，你也可以用别的名字

这个服务创建后默认为开机后自动启动的

在squid/sbin 添加squidServiceRestart.bat 用于重启squid服务 快捷方式到桌面

@echo off
rem 使用net命令停止服务有时候巨慢
for /F "tokens=3" %%p in ('sc queryex squid_dev') do (
  set PID=%%p
)
taskkill /F /pid %PID%
net start squid_dev
exit

2.浏览器端配置:

firefox

在friefox安装目录添加firefox-dev.bat 快捷方式到桌面

start firefox -no-remote -P "dev"
exit

第一次执行会出现一个对话框，告诉你这个名字为dev的profile不存在。你需要手动创建一个名字为dev的profile。以后再打开时就不会提示了。

打开后进行设置代理

高级->网络->设置中 选择手动设置代理 然后在http代理中 输入localhost:3128

164707533.jpg

chrome

在chrome安装目录添加chrome-dev.bat 快捷方式到桌面

start chrome --proxy-server="localhost:3128" --user-data-dir=G:/broswerData/chrome/dev
exit

--proxy-server="localhost:3128" 设置的是代理服务  

--user-data-dir 是新的实例保存的目录

到此为止，环境就搭建完了！

你的桌面应该会增加以下几项

164719468.jpg

接下来我们测试下

首先在squid hosts中添加一个host指向 127.0.0.1 www.baidu.com

开启suqid服务

双击chrome-dev.bat 访问baidu 你会看到baidu是访问不了的

164729173.jpg

双击chrome 访问baidu 可以访问

164748682.jpg

这样我们的浏览器级别的hosts就搭建成功了。。。