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

2,248 阅读2分钟
原文链接: www.jianshu.com

相信很多前端在开发移动端网站时,目前只能在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中打断点;
今天的安利就到这里,希望能帮助到各位。谢谢~

最后,附:项目链接