开发移动端网页调试方法

大家在开发pc端网页的时候调试很方便，直接用浏览器打开就可以了，但是如何进行移动端网页的调试呢。下面我来说几个办法

首先，我向大家推荐一下Chrome浏览器，大家都知道主流浏览器有一个调试模式，一般都是按F12调出，就会出现如下图

这是在我这个博客首页下按下F12出现的界面，点击上图红色圈圈出的位置就是使用移动端调试。点击之后出现下图

在上图中有红线圈出的位置是更改移动端样式的，里面包括苹果4S到苹果6plus和苹果6s以及屏幕大小不等的安卓手机和平板等，还可以手动拉伸宽度和高度。以测试页面在不同屏幕大小下的兼容性问题。大致的移动测试调试都可以在这里进行。但是这并不完全精确，精确的调整还需要到真机中进行测试。

然后我再来说一下真机如何测试，有的朋友是将网页放到手机里，然后在打开，如果是html页面，还可以打开，但是如果是jsp页面就无法实现了。一般我们在开发网页过程中都会安装服务器运行环境，最普遍的是tomcat和phpAdmin两种，关于这两种运行环境我就不在这里介绍了，我重点说一下如果通过移动端连接pc端建立的服务器里部署的网页。

首先，关闭电脑自带的防火墙。然后将电脑和手机连接到同一个wifi上（无线路由或者是360建立的无线网，是局域网就可以）。点击开始输入cmd，通过ipconfig查看无线路由给本机分配的本地ip。在浏览器中输入ip和端口号即可实现访问（验证）。然后手机端浏览器输入该地址也可以访问，这样就可以一边修改一边在真机上查看效果了。