安利时间：前端开发时，如何不发布线上就能手机上预览+调试css、js

相信很多前端在开发移动端网站时，目前只能在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中打断点；

今天的安利就到这里，希望能帮助到各位。谢谢~

最后，附：项目链接