西门的后花园

一个热爱网络的年轻人的博客

移动端网页制作入门之一:测试环境和调试工具

很高兴在公司争取了半年后,终于从后台页面转到移动端了。想想还有点兴奋呢!本周已经在投入全部精力开发微信页面,跟传统页面有相似处,也有不同点,以后有机会再聊。

初步的野心有点大,想把自己学习的经历一点点的写出来,让自己和他人都可以从中有所收获,希望自己可以坚持更新这个系列。

测试环境:

因为移动端主要是在手机和平板上展示,但代码还得在电脑上制作,所以就需要一个环境,可以通过手机和平板访问到电脑里制作好的网页,来展示效果。因为我业余也搞搞WordPress主题,所以电脑里一直都有PHP环境。之前也写过相关文章,例如《mac里装MAMP》、《本地搭建PHP环境》,或者是更早发的《Windows 7里装IIS》。

个人比较推荐用PHP环境。不管你是用哪种方法,只要其他设备在局域网里可以访问你自己的网页即可。例如我的局域网地址是http://192.168.2.106:8888/page/likeShare/login.html,这个地址只有局域网里的用户才可以访问。然后手机和平板连接相同的无线wifi,即可访问这个地址做测试。

在手机和平板里输入地址是件痛苦的事情,特别是像iPhone 5S的Safari这种地址栏设计得不科学的浏览器。所以我们还需要借助一个利器:【二维码生成工具】,把局域网链接转为二维码,扫一扫就搞定。强烈推荐chrome插件二维码生成器,非常方便。

调试工具:

这里就不说编辑器了,编辑器随便用什么都可以,我自己已经从EditPlus转到Sublime Text 3了。以前大家调试移动端页面,很多都是装调整浏览器分辨率的插件,或者是在线网站提供很多分辨率来调试。最后才是在移动端上测试,因为这样效率会高一些。写一句就在手机上刷新一次,成本太大了。

自从有了Chrome(现在的版本是41),调试移动端页面变得非常简单!因为新附带了很强大的移动端网页调试功能。装好Chrome后,不管你用什么方式(例如右键审查元素或者F12),打开Chrome开发者工具,左上角有一个放大镜图标和手机图标。如图:

点击手机图标,就进入手机模拟器界面了。简单介绍一下顶部这几个功能:

左上圆圈是取消模拟设备,很少用。左下四横线是如果页面有媒体查询media,就会出现对应的媒体查询区间,很少用。Device就是你自己选择的模拟设备,经常用。Network是模拟网络环境,偶尔用。√是启用右侧的长宽尺寸,刷新是切换横竖屏,2代表屏幕像素比devicePixelRatio,Fit是缩放,UA是User Agent,都很少用。

因为电脑屏幕的宽度比高度大,而默认开发者工具是在下方,导致左上方手机模拟界面会变形,所以我一般都把开发者工具放右侧。点住开发者工具右侧的这两个方形,按住不放,下面会出现一个正方形,选到那,再点一下开发者工具就到右侧而不是悬浮窗了。如下图:

chrome调试移动端网页

最终效果如下图:

chrome调试移动端网页

希望今天写的可以帮到刚入门移动端网页制作的朋友们。

评论列表

  1. 莫非捡了个沙发~~ ❗

  2. cjphy

    支持西门

  3. 貌似我没设置出来。是我弱爆了吗!!!!

  4. 我对流量体会很深。。现在我就是用手机拖电脑上网呢。

  5. 微信的接口?

  6. ❗ 有Google亲儿子的话可以同步调试~~太帅了。

  7. 好东东啊,呵呵

  8. 越来越厉害了

  9. 🙂 西门加油~

  10. yang

    😮 能用微信登录网站了?微信开放接口了

  11. 鲜活

    google亲儿子不给力

  12. 想试着做移动端网页了:grin:

  13. 微信有webapp的接口?

  14. 看着挺给力的呀。。

  15. 非专业人士使用usbwebserver。我只有在91pron下片的时候才会想到按chrome的F12。。。。。

    😛 😛 😛 😛 😛 😛 😛 😛 😛 😛 😛

  16. F12+network,哪里有下不了的自拍视频!!!!!!!!!!

  17. 好高端!又学习了!

  18. 试了一下,跟实际有点出入。。。

  19. 博主不更新了啊

  20. 可以关注一下 http://browsersync.io/ 这个工具哈,跨各种平台,正打算写文章介绍一下。

  21. 看着西门哥还在用 simple-lines 这款主题,顿时感叹啊!

  22. 哇 掌握了不少啊 这平台

  23. 开始支持移动客户端了- –

  24. ❗ 你的风格很适合手机端呢!

  25. 那个联合登录时怎么做的,是不是也写个教程啊

  26. 🙂 太好了,正想找这方面的。谢谢博主了。自己弄了一个网站,准备做微信接口。收藏了

  27. 非常实用,。正好可以再调整一下自己的wap站 呵呵

  28. 王小飞

    不错,珍藏!

  29. 现在贵站已经启用了移动端了吗,我是搜移动端web找到贵站。好像还没有。

发表评论

分类目录