现在调试移动端网页代码时,一般使用F12调试器的手机分辨率模式,像下面这幅图这样。大部分移动端的特性都能模拟出来,比如分辨率,触摸,旋转屏幕等等。但是有时候浏览器模拟的效果和手机袖紫囫挡还是有一些差别,比如我曾经遇到过按钮中的文字垂直居中在手机上不准确的问题,而在浏览器上的模拟手机的模式下却看起来是居中的。因此,我们需要让自己的代码在手机上展示以查看效果。下面介绍如何使用手机防伪本地Tomcat服务器。
工具/原料
安装jdk与配置环境变量
安装tomcat
无限路由器
准备软件环境
1、首先需要有jdk,如果你没有安装jdk,轻参考这篇经验
2、还要有tomcat,如果你没有安装tomcat,轻参考这篇经验
3、启动tomcat,浏览器访问localhost:8080
以ip地址访问tomcat
1、查看自己在局域网的ip,在cmd中执行ipconfig命令,如图,我的ip是192.168.0.200
2、以ip形式访问自己的tomcat服务器,刚才输入的localhost:8080地址改成192.168.0.200:8080。同样访问成功。
3、手机和电脑连上相同的路由器,手机使用wifi,电脑使用网线和wifi均可。手机访问192.168.0.200:8080成功。
优化开发环境
1、手工查询并输入ip地址很不方便,我们可以把ip地址配置成静态的,并且保存为浏览器书签,方便下次打开。设置静态ip可以参考这篇经验。
2、然后将地址转为二维码,用手机扫码。转为二维码可以用一些国产浏览器或者浏览器插件。比如在地址栏点右键生成二维码。