目前我们做的网站基本都需要有2个端:PC端和移动端,而移动端的效果是很难调试的,虽然谷歌浏览器提供了很好的切换到手机模式,但很多情况下还是需要在真机上进行调试,通常我们的做法:先将代码提交到测试服务器上,然后通过手机浏览器访问移动端页面,这样做虽然最后也能调试成功,但是毕竟中间增加了很多的步骤,使用起来不方便,下面介绍一种可以直接使用手机浏览器访问本地服务器,查看移动端的页面效果的方法。
准备
- 一部手机;
- 手机上面需要安装浏览器;
- 安装wamp集成环境的联网电脑电脑;
- 手机和电脑连接的是同一个WiFi,即保证网段一致。
设置步骤
1. 修改http.conf文件
在文件中查找下面这句话:
# Virtual hosts
#Include conf/extra/httpd-vhosts.conf #将这句话前面的#去掉
修改好之后保存
2. 修改httpd-vhosts.conf
在httpd-vhost.conf文件中增加下面的内容:
<VirtualHost *:80>
DocumentRoot "E:/wamp/www/hengxuan"
ServerName 192.168.1.139
</VirtualHost>
在这里我们需要注意的是:192.168.1.139是我们电脑的内网IP地址,那么我们如何查看我们电脑上的内网IP地址,先使用win+r弹出运行命令框,并输入cmd,显示出黑窗口,在黑窗口中输入下面的命令:
ipconfig
视图如下:
在窗口中我们可以看到使用红色标记的就是我们内网IP地址,我们在上面的服务器名称上就添加上内网IP地址,而前面的DocumentRoot是我们要访问的网站的根目录。修改好之后保存。
3. 修改host文件
这个文件在C:\Windows\System32\drivers\etc\HOST文件,打开这个文件,在这个文件中加入下面代码:
127.0.0.1 192.168.1.139
修改成功之后,保存。
4. 重启wamp服务器
左键点击绿色按钮弹出对话框,选择Restart All Services,之后服务器会变成绿色。
5. 将服务器设置为线上(Put Online)
最后一步,也是最重要的一步,还是左键点击绿色服务器按钮,选择Put Online之后,服务器会自动重启,这个时候设置也已经完成了,下面就是我们使用手机访问192.168.1.139这个地址,之后就可以看到下面的页面。如下图: