关于调试html5的信息

如何在移动设备上调试html5开发的网页

可以使用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）当中就有可能出现页面布局崩溃的现象。

进行代码的调试，就是为了及时发现问题，并且尽快解决问题，为防止书写了很多代码之后，突然发现在某些浏览器中是错乱的，而原因却又无从查起，最后不得不重新书写或花费大量时间在查找错误上。

本文标题：关于调试html5的信息
分享链接：http://scyanting.com/article/dsieocd.html