前端技术分享-码匠 极客编程技术分享

您当前位于:移动端开发 ——> 移动端开发知识[系列] - 谷歌与真机调试方法

移动端开发知识[系列] - 谷歌与真机调试方法

2015/05/07 00:01:17 | 作者:HTML5学堂(码匠) | 分类:移动端开发 | 关键词:html5,移动端,调试,真机,模拟

移动端H5知识[系列] - 谷歌与真机调试方法

HTML5学堂:移动端在PC开发,调试是一个问题,每次都得在手机上看,谷歌出一个调试工具,模拟移动端,可以很方便的调试移动端页面,希望对大家有帮助!

Plus篇 模拟器调试

打开浏览器,按下键盘上的F12键。显示如下效果

之后点击手机的小图标,显示如下效果

1表示的是设备的大小,可以进行选择,也可以进行自定义。2中的UA,表示user agent——用户代理,也就是浏览器的内核。2中的network用于表示处于的网络环境——GPRS、3G、WIFI等,可以进行加载速度的模拟~

Plus篇 真机调试

个人还是觉得,真机调试比模拟器调试靠谱的多~因此,各位在使用模拟器调试之后,务必记得拿真机再调试一次,防止出现问题。

真机调试的几个步骤

1 将代码放置在服务器端,打开wamp实现服务器端的运行

2 将wamp调整为在线模式

3 将手机调整为和PC相同的局域网

4 在开始菜单中,执行“运行”,输入cmd

5 在弹出的框中输入ipconfig,查看相应网络的ip地址

6 将ip地址输入到手机url地址栏中,实现访问

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端