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

1、如果你能FQ
chrome在32版本后就自带了移动端调度工具，可以在Android直接联调，但唯一遗憾的是，在我大天朝要FQ后才能行的通，我自己试了后公司好几个机器联不上…
2、如果你有苹果电脑和iphone
苹果电脑上的safari 60版本后就可以直接连接iphone手机调试手机版上safari正在浏览的web页面，前提是你得有个苹果电脑和iphone手机，但如果你是Android的话，就没办法了
符合前端B格的“小苹果”
自己在公司里也是开发Mobile端的HTML5页面的，也深受调试页面之苦，移动端的WEB页面坑又多，所以用node-webkit技术做了一个客户端，专门用来调试，现在每天工作之前都先打开“小苹果”
小苹果用的是node-webkit技术打包成客户端，其实内部实现都是web 页面与nodejs技术，所以特别符合前端B格。而且由于用了node-webkit技术，客户端可以跑在windows和mac电脑上，齐活儿了
小苹果官方网站
里边有下载及安装和使用的方法

1 移动布局自适应不同屏幕的几种方式
（1）响应式布局
（2）100%布局（d性布局）
开局审案，你会怎么判？
广告
开局审案，你会怎么判？
（3）等比缩放布局（rem）
2 iscroll安卓低版本卡顿，如何解决？
方案一：iScroll v513 设置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）是时候说说安卓了

开发者工具：option＋command＋i

javascript控制台：option＋command＋j

或者按option＋command＋c也可以打开

两种方法：

在需要调试的页面下，按F12，chrome会自动打开，开发者工具，也就是你说的debug。

在浏览器右上角关闭按钮下边，有个三道杠的菜单按钮，如下图，在菜单中依次点击。就可以打开“开发者工具”了。

打开开发者工具页面如下图。上面有多个tab标签页。Elements是页面源码和CSS样式页。Console是控制台输出页面。也是提示错误的地方。Sources是页面资源页。可以打开JS脚本或页面，进行断点调试。NetWork显示网络情况，资源加载情况。可以设置网速。其他的你可以查查。以上几个是常用的。

如今的程序员世界，已经博大精深，就像小说中的功夫派别一样，各种门派如百家争鸣，新入门其中，感觉就是一个，这么多我选择什么呢？各种程序类型，各种开发环境，各种框架、结构，绝对让人眼花缭乱

这个时候对于很多新手来说，如何选择是个难题

对于APP开发，如何选择原生与混合，小编的意见就是选择自己擅长的，对于新手来说，选择简单的

从无到有，循序渐进，这样子从个人学习进度、学习兴趣来讲，都是合适的

一下子来个高大上，只能让你陷入困境

学习程序我的经验是，先看语法，文档，然后模仿，一个个功能学习，逐步深入

APICloud的学习成本真的非常低，基本上花几个小时把文档看一下就可以进行开发了，没有需要学习的新知识，需要用到的只不过是最基础的html、css、js

而其它的例如phonegap需要针对每个平台单独搭建原生开发环境，ionicFramework需要学习AngularJS学习成本都很高

仔细阅读开发文档

APICloud关键的地方和内容都可以从开发文档中找到

一个好的程序类型，就如一个成俗的门派一样，各种规则、注意事项都会告诉新人明明白白，谓之新手教程

这一点很多新入门的同学其实没有注意这一点

熟悉基本的 *** 作

根据文档介绍和IDE进行实际的基本 *** 作，比如新建工程、调试、打包等，摸清楚IDE的功能，使开发熟练度更高

推荐编辑器，sublime，调试器，谷歌浏览器，海马玩模拟器

熟练使用开发工具，尤其是多种开发工具组合，能够大量节省开发时间

熟练掌握程序开发中的基本元素

作为混合开发平台，APICloud开发其实能够满足多种类型的开发者

但有几个基本共同点，一是要熟悉Web开发，二是要熟悉JS *** 作，三是能够熟练运用APICloud的api

前2者是基础，后面是为了让程序飞起来

Web开发三剑客HTML、CSS、JS可以完成一个WebAPP的开发，也能够使一个程序变成一个APP，api则提供了更加丰富的功能，使得WebAPP能够无线的接近原生APP

因此，熟练掌握API *** 作，是一个能够进行高质量APICloudAPP开发的必经之路

再次建议大家多看几遍相应的文档、介绍，对核心的文件 *** 作、硬件访问、数据通信等进行实践 *** 作，对frame、Win的原理、机制要有个较为深刻的理解

掌握APICloud程序开发的脉络

每一门程序和一门武功一样，都有其特点，绝招，摸清楚这些，就会让你的开发更加简单、随意

开发具体技巧后面再说，首先要明白APICloud开发中几个基本规则，Win是一个窗口，Frame是一个子窗口，或者一个类似层的概念，窗口不能叠加，Frame可以叠加，嵌套，但是都是平行的

api和模块提供了很多底层的方法，提供了远远高于HTML5标准的访问权限和机制，这是html5所不能提供的

官方的文档也是有脉络可循的，遵循基本原则，一般都是require，然后初始化或者open等

再比如一个模块，一般都有fixed、fixedOn属性，各有各的作用，梳理好这些规则，就好比掌握了武功的脉络，后期开发就会事半功倍

个人开发过程中的一些经验尽量不要使用前端框架，避免对性能造成影响，尽量仅用官方的apicss、api、js再加一个artTemplate模板引擎就行了

IDE可以选择在WebStorm中进行代码编写，要调试的时候去官方的IDE上点一下一键真机调试

可以使用Chrome的远程调试功能进行调试，调整样式和调试js就和调试普通网页一样

尽量使用CSS3动画代替js动画可以在手机上安装SQLiteEditor来查看数据库目前从SQLite查询出的数据都是字符串形式的，记得查询后做好数据类型转换

打开 仿真面板。
可以在 Device 选择设备。
可以在Screen 设置模拟的屏幕方面的东西，设置分辨率，屏幕尺寸。
可以在 User Agent 设置 客户端Agent
可以在 sensors 设置感应等，模拟触屏 *** 作。
配置好之后，点击 Emulate 。开始进行仿真。
（选择Device需要点击emulate)其余选项是在修改后自动改变。
如何假设 平板旋转屏幕？
可以在 screen中，点击分辨率中间的互换按钮就可以了。
使用Chrome浏览器调试，配置好调试设置之后，可以自由输入 网址查看 在移动设备上的现实情况。
F12打开开发者模式，左上角有个手机屏幕的图标，点击一下即可。

---