大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
可以使用Chrome浏览器,Chrome浏览器带有移动模式
成都创新互联公司是工信部颁发资质IDC服务器商,为用户提供优质的绵阳主机托管服务
Chrome打开Html5网页,点击F12打开开发者工具,然后点击下图中的手机图标,重新刷新页面,就可以模拟在移动设备上的样式,可以由不同的移动设备供选择
1、如果你能FQ
chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后公司好几个机器联不上…
2、如果你有苹果电脑和iphone
苹果电脑上的safari 6.0版本后就可以直接连接iphone手机调试手机版上safari正在浏览的web页面,前提是你得有个苹果电脑和iphone手机,但如果你是Android的话,就没办法了
符合前端B格的“小苹果”
自己在公司里也是开发Mobile端的HTML5页面的,也深受调试页面之苦,移动端的WEB页面坑又多,所以用node-webkit技术做了一个客户端,专门用来调试,现在每天工作之前都先打开“小苹果”
小苹果用的是node-webkit技术打包成客户端,其实内部实现都是web 页面与nodejs技术,所以特别符合前端B格。而且由于用了node-webkit技术,客户端可以跑在windows和mac电脑上,齐活儿了
小苹果官方网站
里边有下载及安装和使用的方法
用iphone调试html5页面的方法如下:
1、打开手机web检查器。
通过【设置】【Safari】【高级】【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。
2. 连接电脑(Mac)
1)先在手机Safari中打开你想调试的网页,并用数据线连接到电脑
2)再在电脑上打开Safari点击【Develop】菜单,就会看到如下图所示(点击查看大图):
3)点击2中的网站名就会在电脑上打开Safari的控制台,如下图(点击查看大图):
此时可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):
下载并安装夜神模拟器,先启动夜神模拟器
然后运行cmd命令,cd到夜神安装目录,执行命令
nox_adb.exe connect 127.0.0.1:62001
连接到模拟器
通过第一步新建的工程,按照下图,进行配置,并debug启动
弹出了模拟器选择框,OK后,我们就可以查看及单步调试了。
模拟器分别率如何设置,看下图,各种分配率,随便配置,平板及手机随便切换
进行浏览器调试的目的是让网页在各个浏览器当中都能够表现一致,除了能够正常地呈现信息,供用户使用之外,在样式上、行为上都能够与最初“设计构思”的效果相符合。
在开发当中,开发工程师会遇到如下两个问题,这两种问题也是要求开发工程师及时调试的原因。
1、 浏览器对代码的支持程度不同
有些浏览器支持某些命令,而有些不支持,这也就导致网页在部分浏览器当中表现正常,在部分浏览器当中表现不正常。通过浏览器调试,可发现这些问题并及时解决。
2、 开发者自身问题
开发工程师在书写代码时,难免会书写出“错误”或“有问题”的代码。例如,子级元素的大小超出了父级元素的大小,此时,代码在容错性比较高的浏览器(如谷歌Chrome浏览器)当中并不会出现什么问题,但是在容错性比较差点的浏览器(如IE6-IE8)当中就有可能出现页面布局崩溃的现象。
进行代码的调试,就是为了及时发现问题,并且尽快解决问题,为防止书写了很多代码之后,突然发现在某些浏览器中是错乱的,而原因却又无从查起,最后不得不重新书写或花费大量时间在查找错误上。