使用grunt+bower+webstorm作为前端开发工具,在开发移动端的时候,怎么才能直接在真机上进行页面调试?
举个例子就是在IDE里写html,手机上也会同步展示。
-------分隔线------
在各位大神的推荐下使用了browser-sync,发现真是神器啊,现在使用grunt-watch + browser-sync 可以实现了实时编译。
在使用的过程中发现了一个问题,就是使用ip在本机是可以访问的
http://192.168.2.224:3000/src/html/index.html
但是发到手机上就访问不了了
确定是在同一个网段,路由器配置也检查过了。。。实在找不到原因了
-------------------分隔线-------------------
在broswersync的群里问了一下,有个大神说关掉系统防火墙
然后就可以了。。。。。。。。。O__O
本地服务运行起来。然后把localhost换成ip发到手机上打开就可以了。
小米手机测试Ubuntu笔记本上的PHP网页
Ubuntu笔记本和小米手机都连上小米路由.
ifconfig wlan0 查看Ubuntu的IP为 192.168.31.156
php -S 192.168.31.156:8080 -t ./
如果没有无线路由,可以在Ubuntu笔记本上用hostapd建立无线网络:
http://my.oschina.net/eechen/blog/227230
开发8080端口:
sudo ufw allow 8080/tcp && sudo ufw status
禁用8080端口:
sudo ufw delete allow 8080/tcp
扫描二维码或者输入地址访问网页:
qrencode -o mi.png http://192.168.31.156:8080
安卓/Apple不是都有远程调试么?chrome也有设备同屏的APP可用;
npm install -g puer
可以用browser-sync,在调试前端页面上可以提高效率。?
grunt-contrib-watch
,监控文件变动,自动无缓存刷新浏览器。browser-sync
不能自动编译吧,如果需要的话。
如果你说的调试是像“审元素”那样的功能的话,firefox chrome等浏览器的手机端都支持远程调试。微信浏览器的话那就真的没有办法了。
最简单的方法是:手机连wifi,要和PC同一网路。
用楼上提到的神器browser-sync
1,把服务跑起来,然后用移动端直接内网访问即可,自己做一个简单的导航页面。
2,移动端的浏览器大部分都是webkit内核浏览器(指android,IOS),谷歌浏览器也是webkit内核浏览器,而且还有仿真手机屏幕尺寸,如果查看页面效果完全是可以的。 如果只是开发初期调试谷歌浏览器就完全可以了。
JS代码和页面渲染效果有时候IOS和android的浏览器有部分不兼容。这个可能需要真机海量测试了。
推荐Hbuilder开发工具,开发,测试,实机都整合到里面了
可以电脑上把server跑起来,然后手机和电脑连在同一个网络下就能访问了!