如何实用便捷的在本地真机调试WEB端HTML5网页

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电脑上，齐活儿了

小苹果官方网站

里边有下载及安装和使用的方法

下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试。这里要说明的是，iOS平台只能用自带的Safari浏览器来调试，而Android平台也只能用google Chrome浏览器来调试。当然，我目前只发现这么两种手段，如果你还有其他方法可调试更多的浏览器，希望你能留言告诉我。

一、iOS + Safari

1、打开手机web检查器。

通过【设置】>【Safari】>【高级】>【Web检查器】打开。

2.1 先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）

2.2 再在电脑上打开Safari点击【Develop】菜单

3.3 点击2.2中的网站名就会在电脑上打开Safari的控制台

3.调试网页

如上3.3图所示，此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来

二、Android + Chrome

1.设置手机

1.1【设置】>【关于手机】>【版本号（Build number）】，对版本号这一项连点7下就会提示“你已成为开发者”。

1.2 再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。

2.设置电脑（Mac）

这块比较麻烦，因为要装一下Android的SDK。

2.1 下载Android SDK，并解压，我把整个adt目录放在了 /Users/David/adt/ 这里。

2.2 设置环境变量 。打开终端在David路径下（形如 DaviddeMacBook-Pro:~ David$）输入 open .bash_profile，如果文件存在则会打开，如果不存在则再输入touch .bash_profile 创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ，关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入 adb 出现命令帮助信息就是成功了。

2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote 。

3.链接电脑

3.1 在手机上的Chrome里打开想要调试的网页，用数据线连接手机和电脑（我的是Mac。唉～我只是强调平台的不同，不要误会）。

3.2 打开电脑上的Chrome，在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框

4.调试网页

4.1 你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】，或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表

4.2 点击上图中的网站缩略图，就会跳转到Google的一个代理链接（链接可能被墙……，挂代理）就会打开如下图所示的控制台

4.3 这就和电脑上网页调试没什么差别了，鼠标经过DOM节点，手机上的布局同样也会高亮起来

1. 移动布局自适应不同屏幕的几种方式

（1）响应式布局

（2）100%布局（d性布局）

开局审案，你会怎么判？

广告

开局审案，你会怎么判？

（3）等比缩放布局（rem）

2. iscroll安卓低版本卡顿，如何解决？

方案一：iScroll v5.1.3 设置momentum: true

方案二：配置probeType

方案三：开启硬价加速：给scroll元素增加css样式：-webkit-transform:translate3d(0,0,0)

方案四：判断手机版系统版本，应用原生CSS：overflow-y:scroll

3. 移动布局自适应不同屏幕的几种方式

（1）响应式布局

（2）100%布局（d性布局）

（3）等比缩放布局（rem）

4. 你们做移动端平时在什么浏览器上测试？

Chrome，Safari，微信X5，UC，其他手机自带浏览器

5. 说说移动端是如何调试的？

移动端调试：

（1）模拟手机调试chrome://inspect

（2）真机调试之android手机+Chrome

（3）真机调试之iphone + safari

（4）UC浏览器

（5）微信内置浏览器调试

（6）debuggap

（7）抓包

6. 说说ICONFONT是如何用的？

从以下几个方面做答：

（1）font-face

（2）什么是iconfont,iconfont怎么用

（3）iconfont怎么做

（4）iconfont的利和弊

7. 说说移动端Web分辨率

从以下几个方面做答：

（1）PC到移动，渲染的变迁

（2）可以更改的布局宽度

（3）再次变迁的像素

（4）又一次变迁

（5）是时候说说安卓了

---