首页 > 开发html页面的时候,怎么在真机上进行调试?

开发html页面的时候,怎么在真机上进行调试?

使用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跑起来,然后手机和电脑连在同一个网络下就能访问了!

【热门文章】
【热门文章】