系列文章目录导航：

• 提升HTML5的性能体验系列之一 避免切页白屏
• 提升HTML5的性能体验系列之二 列表流畅滑动
• 提升HTML5的性能体验系列之三 流畅下拉刷新
• [提升HTML5的性能体验系列之四 使用原生UI（nativeUI）]
• 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
• 提升HTML5的性能体验系列之六 降低内存占用

【本文更新时间2017-5-8】

原生UI的设计目的

HTML和css有一个优势就是灵活的样式设计。
在大多数情况下，我们都应该使用HTML+css来负责UI。但是有些情况下，我们发现HTML+css的UI不满足需求。

1. 绝对置顶
   HTML的video等元素，以及5+的titleNView、subnview、map、二维码扫描等原生元素，这些原生控件的层级高于div。
   对于一些弹出的需要置顶的控件，会造成div模式的控件无法绝对置顶，就像在web开发里弹出的div被flash遮住一样。
   使用div方式开发的如下弹出控件：alert、confirm、actionSheet、waiting、date、time、prompt、toast，都存在这个问题。
   为此，HTML5+扩展了上述native级别的UI控件，保证可以绝对置顶。
2. 全屏遮罩
   弹出控件时，需要对整个屏幕的其他部分做阴影遮罩。
   使用div遮罩，同样无法蒙住titleNView、video、map等原生控件，也无法跨webview。
   而且原生的遮罩还可以蒙住手机顶部状态条，这都是div遮罩做不到的。
   HTML5+扩展的nativeUI控件，保证可以全屏遮罩。
3. 跨webview
   如果界面使用webview方式的tab选项卡，但想从底部弹出一个菜单actionsheet，此时使用div方式的弹出菜单由于无法跨webview，只能看到一部分。
   此时就需要使用nativeUI里的actionsheet才能跨webview。
   注意：从HBuilder8起，官方推荐使用nview替代父子Webview，并计划在以后废除对同屏显示多个Webview的支持。
   title部分，请使用webview里的titleNView，参考http://www.html5plus.org/doc/zh_cn/webview.html
   tab部分，参考此文实现原生tab：http://ask.dcloud.net.cn/article/12602

原生UI的特点

为解决上述问题，HTML5+提供了原生ui，分别在

1. plus.nativeUI规范。
   plus.nativeUI对原生的常用弹出型UI控件做了封装，包括警告框、确认框、弹出输入框、弹出底部菜单、等待框、可自动消失的提示条等。参考：http://www.html5plus.org/#specification#/specification/nativeUI.html
2. plus.nativeobj规范。
   与nativeUI不同plus.nativeobj提供的是底层的绘图和写字功能， 参考：http://html5plus.org/doc/zh_cn/nativeobj.html
   http://ask.dcloud.net.cn/article/665
   （抱歉在nativeUI的名称上没有强调弹出式的特征，导致开发者可能误以为所有原生ui控件都在nativeUI下，其实nativeUI只负责弹出式控件）

原生UI的特点有：

1. 绝对置顶，不担心被其他原生控件遮挡
2. 可以跨webview显示
3. 全屏遮罩，保证手机屏幕其他部分处于蒙灰状态
4. 原生样式及高性能体验
   nativeUI的特点是，调用OS的UI控件，确保和本机体验一致。
   在iOS6、iOS7+、Android2.3、Android4.x、Android5上，OS是不同的设计风格，但nativeUI的弹出框和当前OS风格一致。

nativeUI的局限性

相比div+css，plus.nativeUI也有一个缺点就是可定制性差。
开发者无法使用css修饰这些弹出控件的样式，它们长的、且只能长得和本机OS的风格一样。
所以在需要个性化设计控件且不在意绝对置顶、跨webview、全屏遮罩这些问题时，也可以使用div+css方式制作弹出控件。
plus.nativeobj的view由于可以自己贴图写字，定制性强，但使用略复杂。

利用plus.nativeobj的view来扩展原生控件的UI

5+引擎提供了原生的扫描、地图控件，想修改这些控件的UI，则需使用nativeObj.view。
这个不是指弹出一个原生框盖住地图那么简单。是可以侵入控件的UI的。
比如在plus.map的原生地图控件上，要绘制一些map控件无法支持的内容，则可以使用nview来处理。
比如在扫码控件上，可以使用nview在摄像头区域中画图标、写字。
也可以把摄像头区域扩大至全屏大，上面的按钮都使用nview绘制。

mui框架的封装

与nativeUI不同，mui同时也补充封装了一些div方式的弹出控件。
包括div方式的alert、confirm、actionSheet、popover...，可以在nativeUI遇到限制时使用。
另外如果要同时多端发布到非5+环境下比如微信公众号里时，则使用mui.alert会自动判断切换，在5+环境下调用plus.nativeUI.alert，在非5+环境下则使用div模式。

plus.contacts加载全部联系人，只为选择一个联系人时，联系人较多情况下，速度很慢。搞了个插件来调用系统通讯录，只返回选择的一个联系人。

使用：

plus.nativecontact.pick(function(contact){//成功  
           alert(contact.numbers[0].value);//所选择联系人的第一个电话号码  
    }, function(status){//失败  

    });  
//contact为联系人json对象，形式：{"givenName":"张三","numbers":[{"value":"123"},{"value":"456"}]}

添加权限：

"nativecontact":{  
            "description": "系统通讯录"  
        }

plugin.js：

document.addEventListener("plusready",  function()  
{  
    var B = window.plus.bridge;  
    var nativecontact =   
    {  
        "pick":function(successCallback, errorCallback){  
            var success = typeof successCallback !== 'function' ? null : function(args) {  
                        successCallback(args);  
                    },  
                fail = typeof errorCallback !== 'function' ? null : function(code) {  
                        errorCallback(code);  
                    },  
                callbackID = B.callbackId(success, fail);  
            return B.exec("nativecontact", "pick", [callbackID]);  
        }  
    };  
    window.plus.nativecontact = nativecontact;  
}, true);

NativeContact.java:

import android.app.Activity;  
import android.content.Context;  
import android.content.Intent;  
import android.database.Cursor;  
import android.net.Uri;  
import android.provider.ContactsContract;  
import io.dcloud.DHInterface.AbsMgr;  
import io.dcloud.DHInterface.IApp;  
import io.dcloud.DHInterface.IFeature;  
import io.dcloud.DHInterface.ISysEventListener;  
import io.dcloud.DHInterface.ISysEventListener.SysEventType;  
import io.dcloud.DHInterface.IWebview;  
import io.dcloud.util.JSONUtil;  
import io.dcloud.util.JSUtil;  

public class NativeContact implements IFeature{  
    private final static int REQUESTCODE = 1;  

    @Override  
    public void dispose(String arg0) {  
        // TODO Auto-generated method stub  

    }  

    @Override  
    public String execute(final IWebview pWebview, final String action, final String[] pArgs) {  
        if("pick".equals(action))  
        {  
            final IApp _app = pWebview.obtainFrameView().obtainApp();  
            final String callBackId = pArgs[0];  
            _app.registerSysEventListener(new ISysEventListener(){  
                @Override  
                public boolean onExecute(SysEventType pEventType, Object pArgs) {  
                    Object[] _args = (Object[])pArgs;  
                    int requestCode = (Integer)_args[0];  
                    int resultCode = (Integer)_args[1];  
                    Intent data = (Intent)_args[2];  
                    if(pEventType == SysEventType.OnActivityResult){  
                        _app.unregisterSysEventListener(this, SysEventType.OnActivityResult);  
                        if (requestCode == REQUESTCODE) {  
                            if(resultCode == Activity.RESULT_OK){  
                                String phoneNumber = null;  
                                String resultString = "";  
                                Context context = pWebview.getContext();  
                                Uri contactData = data.getData();  
                                Cursor cursor = context.getContentResolver().query(contactData, null, null, null, null);  
                                cursor.moveToFirst();  
                                String givenName = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts.DISPLAY_NAME));  
                                resultString += "{\"givenName\":\"" + givenName + "\",\"numbers\":[";  
                                String contactId = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts._ID));  
                                Cursor pCursor = context.getContentResolver().query(ContactsContract.CommonDataKinds.Phone.CONTENT_URI,   
                                        null,   
                                        ContactsContract.CommonDataKinds.Phone.CONTACT_ID + " = " + contactId,   
                                        null,   
                                        null);  
                                while (pCursor.moveToNext()) {  
                                    phoneNumber = pCursor.getString(pCursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER));  
                                    resultString += "{\"value\":\"" + phoneNumber + "\"},";  
                                }  
                                resultString = resultString.substring(0, resultString.length()-1);  
                                resultString += "]}";  
                                cursor.close();  
                                pCursor.close();  
                                JSUtil.execCallback(pWebview, callBackId, JSONUtil.createJSONObject(resultString), JSUtil.OK, false);  
                            }  
                        }  
                    }  
                    return false;  
                }  

            }, SysEventType.OnActivityResult);  
            Intent intent = new Intent(Intent.ACTION_PICK, ContactsContract.Contacts.CONTENT_URI);  
            pWebview.getActivity().startActivityForResult(intent, REQUESTCODE);  
        }  
        return null;  
    }  

    @Override  
    public void init(AbsMgr arg0, String arg1) {  
        // TODO Auto-generated method stub  
    }  
}

iOS有两种证书和描述文件：

准备环境

• 必需要有苹果开发者账号，并且加入了 “iOS Developer Program”
• Mac OS 10.9以上系统（如果已经申请p12证书则不需要）

登录 iOS Dev Center

打开网站 iOS Dev Center
使用苹果开发者账号登录 iOS Dev Center：

下面我们从头开始学习一下如何申请开发证书、发布证书及相对应的描述文件。

首先需要申请苹果 App ID （App的唯一标识）

> 如果已经申请，可跳过此节

选择页面的 “Identifiers" 可查看到已申请的所有 App 应用标识，点击页面上的加号来创建一个新的应用标识：

接下来需要选择应用需要使用的服务（如需要使用到消息推送功能，则选择“Push Notifications”），然后点击 “Continue”
注意：如果App用不到的服务一定不要勾选，以免响应审核

至此，App ID 已经创建完毕，接下来开始创建开发证书，在创建开发证书前，需要先生成证书请求文件

生成证书请求文件

> 不管是申请开发 (Development) 证书还是发布 (Distribution) 证书，都需要使用证书请求 (.certSigningRequest) 文件，证书请求文件需在Mac OS上使用 “钥匙串访问” 工具生成。

在“Spltlight Search”中搜索“钥匙串”并打开 “钥匙串访问” 工具：

申请开发(Development)证书和描述文件

> 开发(Development)证书及对应的描述文件用于开发阶段使用，可以直接将 App 安装到手机上，一个描述文件最多绑定100台测试设备（开发证书不能用于发布应用到 App Store）。

申请开发(Development)证书

在证书管理页面选择 “Certificates" 可查看到已申请的所有证书（TYPE：Development 为开发证书，Distribution为发布证书），点击页面的加号来创建一个新的证书：

至此，我们已经完成了开发证书的制作（得到了 xxx.p12 证书文件），接下来，继续生成开发阶段所需的描述文件，在生成描述文件之前，需要先添加调试设备（iPhone 、iPad）

添加调试设备

> 开发描述文件必须绑定调试设备，只有授权的设备才可以直接安装 App，所以在申请开发描述文件之前，先添加调试的设备。
(如果已经添加设备，可跳过此节)

在证书管理页面选择 “Devices”，可查看到已添加的所有设备信息，点击页面上的加号来添加一个新设备：

申请开发 (Development) 描述文件

在证书管理页面选择 “Profiles”，可查看到已申请的所有描述文件，点击页面上的加号来添加一个新的描述文件：

至此，我们已经得到了开发证书（.p12）及对应的描述文件（.mobileprovision），接下看一下如何制作发布证书及发布描述文件

申请发布(Distribution)证书和描述文件

> 发布 (Production) 证书用于正式发布环境下使用，用于提交到Appstore审核发布。发布证书打包的 ipa，不可以直接安装到手机上

申请发布(Production)证书

在证书管理页面选择 “Certificates" 可查看到已申请的所有证书（TYPE：Development 为开发证书，Distribution为发布证书），点击页面的加号来创建一个新的证书：

至此，我们已经完成了发布证书的制作（得到了 xxx.p12 证书文件），接下来，继续生成发布描述文件

申请发布 (Distribution) 描述文件

在证书管理页面选择 “Profiles”，可查看到已申请的所有描述文件，点击页面上的加号来添加一个新的描述文件：

至此，我们已经得到了发布证书（.p12）及对应的发布描述文件（.mobileprovision）

Android和iOS都有模拟器。其中iOS模拟器只有MAC OSX版本。

iOS模拟器

准备环境

• Mac OS 10.9以上系统
• XCode6.0以上程序

安装XCode程序

在Safari中打开XCode下载页面
也可以通过App Store搜索xcode安装：

或者可以下载dmg文件，在Finder中双击dmg文件按提示一步步安装：

HBuilder中启动模拟器运行

HBuilder中选中要调试的应用，在Mac OS上安装好XCode后会自动检测支持的iOS模拟器。
在菜单中选择“运行”->"手机运行"->"iOS模拟器运行"：

或者通过“真机运行”图标打开：

在列表中选择要运行的模拟器后，会自动启动iOS模拟器并运行要调试的应用：

Android模拟器

Google官方提供了模拟器，也有三方的Android模拟器。
Android模拟器比较慢，如果有真机就不要用模拟器了。
但如果没有Android4.4或以上版本的手机，那么也有必要装一个模拟器，因为Android4.4起可以通过chrom控制台debug webapp，比较方便。
使用官方Android模拟器，一定要安装intel优化插件，使用Intel HAXM技术来加速，使得模拟器运行速度有大幅的提升。
硬件要求

• CPU支持Intel VT技术（AMD CPU无法使用HAXM加速）；
• 内存推荐4G；
• Window XP/Vista/7/8（32/64-bit），推荐Windows 7/8（64-bit）。

ADT工具

配置模拟器调试环境需要安装ADT工具，如果已经配置过android开发环境，则可跳过此章节。

下载ADT工具

注意开始继续前请先自备梯子翻墙。
Android模拟器开发环境需通过ADT工具进行安装，这里不需要下载完整的ADT Bundle，使用独立ADT工具即可：

• 进入官网下载Android SDK Tools
  
  选择windows平台下的独立ADT插件安装包。

• 同意使用条款和条件
  
  点击下载按钮。

• 保存安装包
  目前版本为22.6.2，保存到本地为：installer_r22.6.2-windows.exe。

安装ADT工具

• 双击运行保存的ADT安装文件（install_r22.6.2-windows.exe），开始安装
  
  选择下一步“Next”。

• 配置JDK环境
  如果已经安装了JDK环境，则提示确认：
  
  直接选择下一步“Next”。
  如果没有安装过JDK，则会提示没有找到：
  
  需安装JDK，并设置JAVA_HOME环境变量，完成后重新运行ADT安装文件。

• 选择用户
  
  选择默认值，仅当前用户使用即可，选择下一步“Next”。

• 选择安装目录
  
  选择非系统盘目录（如“D:\AndroidSDK”），确保有足够的磁盘空间安装SDK及模拟器文件（至少需要1G的空间）。选择下一步“Next”。

• 选择开始菜单目录
  
  保持默认值，选择下一步“Next”。

• 解压安装
  
  完成后，选择下一步“Next”：
  

• 完成安装
  
  选择立即启动SDK管理器（Android SDK Manager），选择下一步“Next”，完成ADT工具的安装。
  如未立即启动，可在Android SDK根目录（如“D:\AndroidSDK”），双击运行“SDK Manager.exe”程序。

下载SDK和模拟器

安装ADT工具后，启动SDK管理程序对各版本编译工具、SDK、模拟器、插件进行管理，如升级、安装、卸载等。如果已经下载了SDK和模拟器，可跳过此章节。

• 更新SDK列表
  启动SDK管理程序后会自动获取最新的工具、SDK、模拟器及扩展插件列表。
  

• 列表更新完成
  更新完成后，显示日志：
  

• 选择下载项
  使用Intel HAXM加速模拟器，必须选择以下项下载：

选择好下载项后，如下图所示：

选择“Intall 4 Packages...”，开始下载安装。

• 接受许可协议
  
  分别选择右侧packages列表中的项后，选中“Accept License”接受许可协议。然后点击“Install”，开始下载。

• 开始下载
  
  由于SDK和模拟器镜像文件比较大，下载时间会比较长，而且国内访问google官方网站不太稳定，经常提示下载失败：
  
  关闭提示对话框，重新下载，或者翻墙后再尝试下载。

安装Intel X86HAXM

下载Intel X86 HAXM插件后，需要到下载目录运行安装程序进行安装，目录为： “%ADT安装目录%\extras\intel\Hardware_Accelerated_Execution_Manager\”。双击运行intelhaxm.exe进行安装，目前新版本为1.0.8，如果已经安装过低版本，建议升级。

• 开始安装
  
  选择下一步“Next”。

• 配置HAXM使用最大内存
  
  安装程序会自动计算推荐值，使用默认值，选择下一步“Next”。

• 确认配置
  
  选择下一步“Next”。

• 完成安装
  

创建模拟器

ADT工具带Android模拟器管理程序（Android Virtual Device Manager），可在Android SDK根目录（如“D:\AndroidSDK”），双击运行“AVD Manager.exe”程序。

由于没有创建过模拟器，在列表中显示无可用模拟器，点击“New...”开始新建模拟器。

• 新建模拟器
  

设置完成后，点击“OK”。

• 确认配置
  

• 创建完成后在模拟器列表中显示
  

启动模拟器

创建完模拟器，每次启动Android模拟器管理程序都能在列表中显示：

• 启动模拟器
  
  选择“Android4.4.2”模拟器，点击“Start...”启动。

• 设置启动配置信息
  

点击“Launch”启动。

• 等待加载模拟器
  
  PC的配置决定速度，耐心等待模拟器的启动。

• 完成启动模拟器
  
  模拟器配置完毕，这时可通过HBuilder的真机运行功能进行连接

HBuilder中启动模拟器运行

Android模拟器启动后，HBuilder会将其识别为名称为emulator-xxxx的Android手机，其中的xxxx为模拟器的id如下图

另外还有三方的Android模拟器，如Genymotion，请自行搜索其用法。

5年前，一直是一个B/S软件开发者。近几年进入了政府机关，从事了不同行业，不再做开发，可一直都放不下曾经辛苦学来的技术。曾经想学Android开发，但由于平常工作忙，学习成本太高太复杂，望而却步。直至10天前发现Hbuider，被它的易用性所深深吸引！
10多天来，白天上班，晚上学习，终于克服诸多困难，成功做出了自己的第一个软件，把单位的网站app化，使用MUI框架+ajax技术+个推平台，没有想到Hbuider+MUI+HTML5这么强大，效果不亚于原生！
感谢提供如此方便的人们！

简单分享一下我的架构（因为是初学者，不一定优化，也不一定科学，仅供参考）

1. 根页面（ index）：带侧滑菜单页，侧滑菜单设置有三个一级菜单。点击后，自定义函数修改index页的二级菜单，设置index的subpage为该一级菜单下的默认页template，同时关闭侧滑菜单页。
   index页：预读index-menu，预读显示详细内容的showContent页

2. 列表模板页面（template）：点击二级菜单，经ajax调取不同数据显示列表，点击列表，打开showContent页，传入参数，ajax调取详细内容显示。
3. 详细内容显示( showContent)：是一个带subpage的模板页，重写MUI.back，返回后恢复其subpage为一个空页面（否则点其他列表再次打开的瞬间还是上一次内容的缓存。）
   
4. 绑定个推插件，测试推送成功，可以为单消息，也可以是链接，或者启动软件。

真心感受，MUI这个框架给我们省了太多太多的事！

很简单而已，前提是上架到那个市场了。
直接调用plus.runtime.openURL就行了

openMarket("你的app包名"); //用法  
function openMarket(packageName) {  
    plus.runtime.openURL("market://details?id="+packageName);  
}

我的这个页面是一个数据列表 ，分为上部导航main.htm，和下面业务数据(list.html).有一个新增页面，在操作新增页面后，返回主模块，并刷新数据。在使用过程中，经常出现刚进模块时，下拉刷新可以。新增页面返回后，下拉刷新失效了。现象就是下拉没有反应。

研究了差不多一个下午，发现原来是被webview挡住了。

在主模块新增页面使用的代码是

  document.getElementById("add").addEventListener('tap',function(){  
    var nwaiting = plus.nativeUI.showWaiting();   
    var qdadd = plus.webview.create("add.html");   
    qdadd.addEventListener("loaded", function() {  
        nwaiting.close();  
        add.show();  
    }, false);  
});             

新增页面保存后，跳转主模块，原先的代码是

  mui.openWindow({  
    url: 'main.html',   
    id:'main'  
  });

但是这样的结果就是返回后，下拉不能滚动。经过我的多次测试，发现这个是webview的使用不当造成的。
新增页面现在的代码是

var parentview = plus.webview.currentWebview().opener();  
parentview.reload(true);  
plus.webview.currentWebview().close();

即关闭当前新增页在，刷新父页面。

如果plus.webview.currentWebview().close();这句话不写，我发现返回页面后，list.html距离导航会增加一定的距离，新增次数越多，距离越远，估记就是webview不断的重叠造成的。

具体原理不太清楚，起码问题解决了，供大家参考 。

我早上在问答里问了问题。详情见http://ask.dcloud.net.cn/question/2684?notification_id-11140rf-falseitem_id-4289__answer_id-4289__single-TRUE#!answer_4289。

晚上回来后原本是尝试大神回答的方案。但是正准备吃饭，便想偷点懒，先把效果做出来，于是改了下方案。
首先去掉main.html里的loading。
把loading加到list.html中
main.html继续使用subpage.
在list.html动态数据加载完之后。。去掉本页面的loading。
相比大神的方案，操作上简单了一些

我测试了下。。基本上效果和早上大神的方案相差无几。
不知道这种方法怎么样，反正分享出来，供大家参考吧。

说明

由于JDT（Eclipse Java Development Tools）比较大，大多数用户用不到，所以被我们裁掉了。如果需要安装JDT可按下面方式安装（ADT的安装依赖JDT，要安装ADT插件需要先安装JDT）

安装JDT

1. 依次点击工具→插件安装→手动安装eclipse插件，点击“可用软件站点”如下图
   
2. 勾选 indigo（注：勾选后，HBuilder启动时会检查indigo已安装的插件是否有升级，从而导致软件启动过慢或者启动后很长时间内比较卡，所以安装完jdt后请将此勾重新去掉）如下图
   
3. 点击确定后，选择indigo的站点如下图，然后等待加载（此过程有点长，如有设置代理会加快加载速度）
   
4. 加载完毕后，找到programming languages如下图
   
5. 勾选programming languages下的Eclipse Java Development Tools如下图
   
   6.点击下一步，接受许可协议并安装，安装完毕后重启即可

   安装ADT

   1.下载ADT离线插件ADT-22.3.0

6. 依次点击工具→插件安装→手动安装eclipse插件
7. 点击添加，在弹出的界面中点击Archive选择步骤1中下载的zip包
   
   4.点击确定等待加载，加载完毕后，全部勾选如下图
   
8. 点击下一步，接受许可协议，点击完成，安装完后重启即可
9. 重启完毕后，ADT就要求选sdk了，选完SDK即可。如果此时不想设置，可以点击关闭，后续在工具→选项→Android中配置

说明

PDT的安装需要连接国外网站，由于大中华防火墙的存在，可能你需要代理，否则最后可能由于某些依赖组件未能成功下载导致安装失败

安装步骤

1. 依次点击工具→插件安装→eclipse插件市场
2. 在搜索框内输入pdt按下回车如下图
   
3. 选择上图中的PHP Development Tools中的Install
4. 加载后会提示缺乏dltk组件如下图，此时点击上一步
   
5. 在搜索框内输入dltk按下回车如下图
   
6. 与步骤3类似，选择安装dltk
7. 点击下一步后，HBuilder会查找依赖的组件，查找完毕后出现以下界面
   
8. 选择同意后直接点击完成即可
9. 安装完毕后按照提示重启HBuilder，就可以看到工具中多了PHP的选项以及文件可以使用PDT的Editor打开了

下载安装xdebug

• 到http://xdebug.org/download.php 下载适合你的PHP版本的xdebug　
• 复制到php安装目录的ext文件夹，改名为php_xdebug.dll　　
• 配置xdebug
  　　在php.ini尾部添加如下
  　　[xdebug]
  　　zend_extension="php_xdebug.dll"
  　　xdebug.remote_enable = On
  　　xdebug.remote_host = "localhost"
  　　xdebug.remote_port = 9000
  　　xdebug.remote_handler = "dbgp"
  　　xdebug.auto_trace = 1
  　　xdebug.collect_includes = 1
  　　xdebug.collect_params = 1
  　　xdebug.collect_return = 1
  　　xdebug.default_enable = 1
  　　xdebug.collect_assignments = 1
  　　xdebug.collect_vars = 1
  　　xdebug.remote_autostart = 1
  　　xdebug.remote_connect_back = 1
  　　xdebug.show_local_vars = 1
  　　xdebug.show_exception_trace = 0
  　　运行phpinfo();看有xdebug模块信息出来就是搞定了。

  配置HBuilder支持xdebug

  这里的配置很重要
  　　选择工具 → 选项→ HBuilder→编辑器→ PHP →Debug 双击 Xdebug，弹出对话框如下图
  
  
  Debug Port 设为跟php.ini中设置的一样(默认是9000)。
  　　Accept remote session(JIT) 选择localhost
  　　允许浏览器访问网站时zend studio自动打开文件开始调试。
  　　选项说明：
  　　off: 关闭浏览器访问时打开调试功能;
  　　localhost: 通过localhost访问网页的时候打开调试。
  　　any:只要访问服务器上的php都打开调试;
  　　prompt:访问服务器上的php时弹出询问是否要调试。
  　　一旦打开HBuilder允许xebug调试，所有访问php页面都会进入调试。如果你不喜欢这样，可以安装chrome xdebug helper 或 fire fox的easy xdebug参见http://www.weste.net/2013/2-24/89256.html
  　　

HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航：

• 调试方式介绍一 边改边看
• 调试方式介绍二 真机运行
• 调试方式介绍三 webkit remote debug之Chrome调试Android手机
• [调试方式介绍四 webkit remote debug之Safari调试iOS手机]

Safari调试iOS手机概述

对于HTML5的开发，大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验，不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式，还能跟踪分析页面资源加载性能等问题。
对于移动平台的开发者来说，从iOS5.0开始，也可以通过Safari的Web Inspector工具连接设备对应用进行调试。

调试效果如图所示：

我们有2种方式，一种是使用xcode iOS模拟器，一种是使用iPhone、iPad、iTouch等真实设备。
如果使用xcode模拟器，可以直接使用safari的控制台debug。
如果使用真机，由于iOS有签名校验机制，正式包不允许safari debug，所以安装在真机上的包必须是测试签名打的包。此时参考如下步骤：

真机调试环境

准备环境

• Mac OS 10.9以上系统。无论使用模拟器还是真机，由于safari只有mac版本，所以必须配备mac电脑。
• xcode iOS模拟器
• 如果使用真实手机debug，还需要：
• 苹果开发者账号，申请苹果开发证书（Certificates）和描述文件（Provisoning Profiles）
• iOS5.0以上设备（iPhone、iPad、iTouch均可）

申请开发证书和描述文件

参考iOS证书(.p12)和描述文件(.mobileprovision)申请

使用HBuilder App云端打包获取调试安装包

在HBuilder中选中要调试的应用，在菜单中选择“发行”->“App打包”，打开“App云端打包”界面：

正确配置生成调试包的参数

• AppID：苹果开发者中心申请的应用标识，必须与申请描述文件时选择的一致
• 私钥证书：苹果开发者中心申请的Development证书，必须是p12格式证书
• 私钥密码：导入苹果开发者证书的密码，在导出成p12证书时设置
• pfofile文件：苹果开发者中心申请的描述文件

提交App云端打包成功后可获取ipa安装包：

使用iTunes或iTools工具安装ipa到设备

开启iOS设备的调试功能

打开“设置”程序，进入“Safari”->“高级”页面开启“Web检查器”：

启动上一步安装的应用，并将设备连接到Mac电脑

模拟器调试环境

使用模拟器调测更为方便。

准备环境

• Mac OS 10.9以上系统
• XCode6.0以上程序

安装XCode程序

在Safari中打开XCode下载页面
可以选择通过App Store，按提示一步步安装：

或者可以下载Beta版本dmg文件，在Finder中双击dmg文件按提示一步步安装：

HBuilder中启动模拟器运行

HBuilder中选中要调试的应用，在Mac OS上安装好XCode后会自动检测支持的iOS模拟器。
在菜单中选择“运行”->"手机运行"->"iOS模拟器运行"：

或者通过“真机运行”图标打开：

在列表中选择要运行的模拟器后，会自动启动iOS模拟器并运行要调试的应用：

使用Safari调试

打开“开发者”菜单

运行Safari,点击“Safari”菜单下面的“偏好设置（Preferences...）”，切换到“高级选项（Advanced）”：

勾选“在菜单栏显示"开发"菜单（Show Develop menu in menu bar）”，关闭偏好设置。
此时在Safari的工具栏出现“开发（Develop）”菜单：

真机设备连接调试

如果是真机点击“开发（Develop）”弹出菜单会出现设备名称项，进入后显示设备上所有打开的“HTML页面”列表：

点击“HTML页面”列表中的项即可打开Web Inspector调试界面

模拟器连接调试

如果是真机点击“开发（Develop）”弹出菜单会出现“iOS Simulator”项，进入后显示模拟器上所有打开的“HTML页面”列表：

点击“HTML页面”列表中的项即可打开Web Inspector调试界面

Web Inspector调试

打开Web Inspector界面后，即可调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式等操作：

可通过以下方式切换“DOM树（DOM Tree）”和“源码（Source Code）”方式显示页面：

在“源码（Source Code）”模式可在页面左侧添加断点进行调试。