相信很多前端在开发移动端网站时，目前只能在Chrome浏览器中模拟手机调试。但是在chrome中模拟手机浏览器毕竟和真实的效果有很多的差别，那么如何做到在繁琐的发布到外网能访问的服务器上之前，我们前端就可以自己先行在手机端预览效果+调试css、js呢？
如果只是想预览下效果，不需要手机端调试
- 查找到本机的ip地址
mac上终端命令：ifconfig
windows上终端命令：ipconfig
- 本地启动你那个所在所在的服务
我本地有个项目（大家如果本地还没有可以启动服务的项目，你可以在git上clone我的一个项目来试验，见文末链接）;
我本地通过再项目文件夹下执行npm start把我的这个项目跑起来了；
- 确保手机和PC连得是同一个wifi，然后设置手机的wifi
wifi列表 => 选择你需要连接的wifi => 代理 => 主机名+端口号设置
主机名设置为和您的PC的ip地址相同，端口号设置为8888
- 本地下载一个网络封包截取工具，打开此软件
我用的是Charles,Charles是在 Mac 下常用的网络封包截取工具。
在做 移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。
- 将PC端项目访问的地址在手机浏览器中打开（记得不要在微信中访问）
因为我本地启动的项目，在浏览器中是http://localhost:3000/,所以只需要在手机端访问同样的地址即可。
记得在访问时，网络封包截取工具Charles会弹出一个框，问你是否允许访问，你点击allow即可。
手机上访问效果.png
如果页面出现数据或者逻辑问题，上面的这种你就无法找到原因了，这时候就需要下面的一个工具。
下载微信web开发者工具,官方链接
打开微信web开发者工具，选择移动调试
微信开发者工具调试.png
记得调整手机上的wif代理模式，从手动改为关闭
按照打开软件后移动调试上写的步骤来配置即可（备注：只能在微信中打开需要访问的链接）
点击开始调试，就会出现和chrome浏览器调试状态下的菜单栏了
此功能暂时没有chrome中那么全，主要可以用到的是：
1. 选择查看element（after,before这些伪元素无法调试）；
2. 看console.log()出来的内容；
3. js中打断点；
今天的安利就到这里，希望能帮助到各位。谢谢~
最后，附：项目链接
