原 5+ SDK 的 Widget方式集成 和 WebView方式集成 将不再继续维护与支持！仅支持离线打包APP

具体参考离线打包

更新于2017年2月，intel官方已经宣布终止crosswalk项目。
此问题没有继续讨论的必要了。

====================================================================

有不少开发者问到crosswalk是否可以作为插件集成到HBuilder中。
首先，通过我们的原生插件集成方案，使用HBuilder的离线打包和插件开发模型，可以把crosswalk当作一个原生插件集成进来。
但是需要一点原生开发的知识，在问答系统里搜索"插件开发"就有教程。
注意即使集成后crosswalk的webview和5+的webview并不能同时出现，一个app里的某个页面，要不用cw渲染，要不用5+渲染。
其次，我们曾有想法要把crosswalk做一个标准插件，在cw上扩展5+的api，包括Native.js，但到了2016年后，团队已经放弃了这个想法，投入产出太低。

crosswalk的技术路线：是集成chromium内核替换Android webkit浏览器内核，由于chomuin的执行效率高于webkit，所以性能也得到提升。
cw主要解决的问题有2个：

1. Android4.0-Android4.3之间的webview性能差的问题，主要是div动画、canvas、webgl。Android4以前用不了cw，Android4.4起用不着cw。
2. 浏览器的兼容性问题。

对于5+而言，这2个问题并非本质问题。

1. Android4.4已经成为主流，Android6.0也在快速增长，Android4.0-4.3之间的canvas、webgl改进价值虽然存在，但越来越弱。而div动画低效的问题在5+里一直是用原生view动画来解决，性能体验更好。
   目前如果是为了优化canvas，可以采用的一个方案是：把canvas界面独立出来，把cw通过sdk方式进入，然后独立的界面用cw渲染，如果需要5+api，通过跨窗体通信让其他webview执行5+api。
2. 浏览器兼容性问题在手机上并不严重，都是webkit内核，不要用太新的css3语法，一般不会有兼容性问题。HBuilder也有浏览器兼容性语法提示，写代码时注意看下代码助手右侧的提示。

但引入cw进5+的问题很多：

1. cw上扩展plus和Native.js工作量非常大
2. cw上真机运行、云打包、sdk配套的工作量非常大
3. cw的体积最小也得9M。而目前HBuilder基座如果不带个推那些插件，才1m的体积。

利弊权衡，我们决定放弃引入cw的计划，把精力投入到更容易产生效果的地方。

工具-插件安装，选php插件，可以编辑php文档。
支持php高亮着色、代码提示、转到定义。

1. 插件安装失败？
   插件安装过程中万一出问题导致插件安装失败，请点击工具-插件安装，点里面的卸载插件链接，然后在新窗体选择aptana php插件。卸载并重启，然后再重新安装。

2. 插件安装成功但仍然php不高亮？
   如果确定安装了php插件，但php文档打开还是不高亮，说明仍然是使用了HTML编辑器打开了php文档，那么在工具-选项，搜索文件关联，在里面配置php文件和PHP Editor的关联。
   也可以在项目管理器里对文件点右键，打开方式，里面选PHP Editor。

3. php无法运行？使用ctrl+r运行在浏览器或使用ctrl+p运行在边改边看下不能识别？
   HBuilder内置的web服务器只能看简单的HTML、js、css，不具备php解析能力，需要配置外部专业web服务器才能解析php。
   需要在工具-选项里搜索web服务器，新建一个外部web服务器，配置tomcat等外部web服务器的参数。

hb在工具-选项-常规-编辑器-文本编辑器右侧有制表符长度设置。
hx在工具-设置里修改。
默认是tab，长度为4。
hx里这个设置会自动同步给格式化插件，也就是设置调整后，格式化插件的配置也会遵循这个策略。
但注意预置的代码块的缩进是tab而不是空格。

整体工程配置编码：
资源管理中对着文件或者整个项目点右键，点属性（快捷键是Alt+Enter）。
在文件编码处选其他，选择或输入你需要的编码，比如GBK。

单独文件配置编码：
也可以在文件->其他编码方式打开,选择需要的编码即可。

注意，不在HBuilder中建项目而单独打开的文件，无法调整编码。

注意，HBuilder不支持调整文件的本身的编码格式，仅支持以某种编码方式打开该文件。
需要转码可使用其他文本编辑器或搜索eclipse、nodejs插件来解决。

Ctrl+F并非总是弹出查找框，在不同场景下，为了更方便的使用，它的逻辑会有不同。

• 光标在代码区时，按Ctrl+F为显示/隐藏搜索条，若搜索条未显示，则显示，若搜索条已存在，则隐藏
• 光标在代码区时，选中代码按Ctrl+F，把选中的文字自动放入搜索框，并将光标置焦到搜索条
• 焦点在搜索条时，按Ctrl+F，查找定位到下一个匹配字符
• 焦点在搜索条时，按Esc，隐藏搜索条

另外Ctrl+H是高级搜索，功能更多，查询结果是单独列一个视图。

但是最好用的，其实还是一键搜索。
双击ctrl，光标自动进入右上角的一键搜索框里，敲不同的参数会有不同的搜索范围，鼠标放在输入框那里会有tips显示。
比如直接敲文本，就是在当前文档里搜文本。
敲/+文件名，就是搜索文件名；
敲@+变量名，就是搜索变量、函数、样式、id；
敲:+数字，就是转到某行；
敲!+功能名称，就是操作某功能，比如搜!+插件；
敲?+内容，就是搜索ask系统；

官方的策略是强化一键搜索，ctrl+f为了向下兼容暂时也不去掉，但不排除某天去掉此功能，建议大家多用一键搜索。

此文针对老HBuilder，不适用于HBuilderX。

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-statistic

注：uni-app自带uni统计，无需使用三方统计。三方统计增加包体积且无法做到自带的免埋点采集行为数据。详见https://tongji.dcloud.io/

如确定使用友盟统计，则继续阅读下文。

App云端打包友盟统计功能，需要到友盟开发平台申请应用后获取相关配置参数：
友盟统计

配置参数需要提交云端打包后才能生效，如果需要真机运行生效请使用自定义基座

HBuilderX中配置统计

从友盟统计平台申请获取配置参数后，需在HBuilderX中配置并提交云端打包才能生效。
老版本HBuilder配置界面有差异，逻辑是一样的，建议更新使用HBuilderX

配置使用统计模块

打开应用的manifest.json文件，在“模块权限配置”项中勾选“Statistic(统计)”：

配置统计参数

在应用manifest.json文件的“SDK配置”页面，勾选“友盟统计”项，并输入从友盟统计平台申请的参数。

可视化界面配置

切换到“（App）SDK配置”页面：

源码视图配置

切换到“源码视图”

配置使用统计模块

• uni-app项目
  在"app-plus" -> "modules" 节点下添加 Statistic 节点
• 5+ APP（WAP2APP）项目
  在 "plus" -> "permissions" 节点下添加 Statistic 节点

"Statistic" : {  
    "des": "统计模块"  
}

配置友盟统计参数

• uni-app项目
  在 "app-plus" -> "distribute" -> "sdkConfigs" 节点下添加 statics节点
• 5+ APP（WAP2APP）项目
  在 "plus" -> "distribute" -> "plugins" 节点下添加 statics 节点

statics节点数据格式如下

        "statics": {  
          "umeng": {  
            "appkey_ios": "友盟统计平台申请应用获取的iOS平台appkey",  
            "channelid_ios": "iOS平台的渠道字符串，可输入任意字符串",  
            "appkey_android": "友盟统计平台申请应用获取的Android平台appkey",  
            "channelid_android": "Android平台的渠道字符串，可输入任意字符串"  
          }  
        },  
        //...

Ctrl+S保存，并提交云端打包生效。

注意：

IDFA说明

从HBuilderX2.2.5版本之后（含2.2.5），基座里集成了友盟v6.0.5统计SDK，因友盟官方，从组件化产品开始，【友盟+】SDK默认采集idfa标识，用来更准确的分析核对数据。对于应用本身没有获取idfa的情况，建议将应用提交至AppStore时按如下方式配置：（以避免被苹果以“应用不含广告功能，但获取了广告标示符IDFA”的而拒绝其上架。）

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-webview-error

当Webview窗口加载错误地址（如本地页面不存在）或者访问网络资源失败（如无法访问网络）时会自动显示默认错误页面：

设置应用全局默认错误页面

• 5+App和wap2app
  在应用的manifest.json文件的"plus"->"error"节点的url属性可配置自定义错误页面替换默认的错误页面。
  打开manifest.json文件，切换到代码视图，添加以下数据：

  "plus": {  
      "error": {  
          "url": "error.html"  
      },  
      //...  
  },  
  //...

  其中url地址推荐使用本地地址，相对于应用根目录。
  设置为“none”则关闭跳转到错误页面功能，此时页面显示Webview默认的错误页面内容。

• uni-app项目

  "app-plus": {  
      "error": {  
          "url": "hybrid/html/error.html"  
      },  
      //...  
  },  
  //...

  error.html需要放到根目录下的hybrid/html目录下，否则不会被编译进去

单独设置Webview窗口的错误页面

如果需要单独自定义某个Webview窗口的错误页面，则需要在创建时通过WebviewStyle对象的errorPage属性控制:

var styles = {errorPage:"error.html"}; // 设置为“none”则关闭此Webview窗口的跳转到错误页面功能  
var webview = plus.webview.create( "url", "id", styles );     
webview.show();

错误页面中监听事件

在定义的error.html页面中可以通过监听"error"事件获取更多错误信息：

// 获取错误信息  
document.addEventListener("error",function(e){  
    var url = e.url;  // 错误页面的url地址  
    var href = e.href; // 错误页面的完整路径（包括完整的协议头）  
},false);

注意
Android平台使用iframe时如果无法加载页面在不同版本系统上存在差异：
5.0及以上版本：Webview窗口对象不会加载错误页面，仅iframe节点显示无法加载页面；
5.0以下版本：Webview窗口对象会加载错误页面。

HBuilder的js代码格式化使用的是jsbeautify插件，地址如下：https://github.com/beautify-web/js-beautify
配置css格式化后在一行，参考http://ask.dcloud.net.cn/article/628

如果想预览整体的css列表，HBuilder有大纲视图，在菜单-跳转里有转到大纲。
非要在一行，就参考上面的链接，在配置文件里修改配置。

HBuilderX的格式化配置另见文档：https://ask.dcloud.net.cn/article/36529

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-payment

plus的支付API，支持支付宝App支付（移动快捷支付）、微信支付和苹果的IAP应用内支付。
配置参数需要提交云端打包后才能生效，如果需要真机运行生效请使用自定义基座

开发指导

传统支付流程如下：

如果使用uniCloud，则搭配uniPay会大幅简化开发，详见：https://ext.dcloud.net.cn/plugin?id=1835
如不使用uniCloud，可以继续往下看。

申请开通支付

在使用支付前，需要向各支付平台申请开通支付功能，如已申请可跳过此章节。

Apple应用内支付(IAP)

苹果应用内置流程与其它三方支付平台存在差异，请单独参考iOS 平台使用Apple应用内支付文档：
http://ask.dcloud.net.cn/article/497

注意事项：
iOS平台苹果审核规范要求，应用中虚拟物品交易必需使用Apple应用内支付，实物交易才能使用第三方支付（支付宝和微信支付）

支付宝支付

登录支付宝账号，创建应用接入支付宝App支付能力，包括以下步骤：

1. 创建应用（获取appid）
2. 开通App支付功能
3. 配置密钥（获取公钥、私钥）

详情可参考支付宝官方文档App支付快速接入

服务端生成支付订单

在App端调用支付功能时，需要先在服务器生成支付订单，下面是简单的参考示例。
参考示例代码支付宝App支付生成支付订单（PHP）
老版本“移动快捷支付”参考示例代码支付宝移动快捷支付（PHP）
C#生成支付宝订单示例

微信支付

1. 使用微信支付功能需到微信开放平台申请移动应用并开通支付功能
   微信APP支付接入商户服务中心
   申请应用后可以获取AppID和AppSecret值。

2. 开通支付功能后可获取支付业务服务器配置数据
   PARTNER：财付通商户号
   PARTNER_KEY：财付通密钥
   PAYSIGNKEY：支付签名密钥

服务端生成支付订单

在App端调用支付功能时，需要先在服务器生成支付订单，下面是简单的参考示例。
参考示例代码微信支付V3（PHP）

HBuilderX中配置使用支付功能

从微信开放平台申请获取配置参数（Apple应用内支付和支付宝无需配置）后，需在HBuilderX中配置并提交云端打包才能生效。
老版本HBuilder配置界面有差异，逻辑是一样的，建议更新使用HBuilderX

打开项目的manifest.json文件，在“App模块配置”项中勾选“Payment(支付)”：

勾选后会显示支持的支付模块，可根据应用需要进行选择配置

Apple应用内支付

在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“Apple应用内支付”项

仅iOS平台支持。

支付宝支付

在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“支付宝支付”项

可根据需要选择支持Android及iOS平台

微信支付

在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“微信支付”项

• appid：
  微信开放平台申请应用的AppID值
• UniversalLinks：
  iOS平台通用链接，必须与微信开放平台配置的一致，参考iOS平台微信SDK配置通用链接（Universal Links）。

可根据需要选择支持Android及iOS平台

应用中调用支付功能

plus API使用步骤：

1. 调用plus.payment.getChannels()获取系统支持的支付通道；
2. 调用plus.payment.request()发起支付请求。

示例代码

var channel=null;  
// 1. 获取支付通道  
function plusReady(){ //uni-app中将此function里的代码放入vue页面的onLoad生命周期中  
    // 获取支付通道  
    plus.payment.getChannels(function(channels){  
        channel=channels[0];  
    },function(e){  
        alert("获取支付通道失败："+e.message);  
    });  
}  
document.addEventListener('plusready',plusReady,false);//uni-app不需要此代码  

var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';  
var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';  
// 2. 发起支付请求  
function pay(id){  
    // 从服务器请求支付订单  
    var PAYSERVER='';  
    if(id=='alipay'){  
        PAYSERVER=ALIPAYSERVER;  
    }else if(id=='wxpay'){  
        PAYSERVER=WXPAYSERVER;  
    }else{  
        plus.nativeUI.alert("不支持此支付通道！",null,"捐赠");  
        return;  
    }  
    var xhr=new plus.net.XMLHttpRequest(); //uni-app中请使用uni的request api联网  
    xhr.onreadystatechange=function(){  
        switch(xhr.readyState){  
            case 4:  
            if(xhr.status==200){  
                plus.payment.request(channel,xhr.responseText,function(result){  
                    plus.nativeUI.alert("支付成功！",function(){  
                        back();  
                    });  
                },function(error){  
                    plus.nativeUI.alert("支付失败：" + error.code);  
                });  
            }else{  
                alert("获取订单信息失败！");  
            }  
            break;  
            default:  
            break;  
        }  
    }  
    xhr.open('GET',PAYSERVER);  
    xhr.send();  
}

注：第二步中获取到的支付订单数据需要业务服务器生成，参考前面章节中的服务端生成支付订单。

webview模式的选项卡页面，其实是将多个子选项卡对应的webview合并到了一个主webview中，点击选项卡时，动态显示、隐藏对应子webview页面，所有页面是一个整体，通常情况下得逻辑是，返回按键时，关闭主页面；

但若用户希望实现，点击返回时，返回到上一次活跃的子选项卡页面，则需简单定制，实现逻辑很简单：

1. 每次点击时，记录上一次活跃的选项卡；
2. 自定义返回函数，返回时隐藏当前选项卡，显示上一次活跃的选项卡页面；

如下为示例代码：

    //当前激活选项，默认为第一个；  
    var activeTab = subpages[0];  
    var lastActiveTabs = new Array();  
    //选项卡点击事件  
    mui('.mui-bar-tab').on('tap', 'a', function(e) {  
        var targetTab = this.getAttribute('href');  
        if (targetTab == activeTab) {  
            return;  
        }  

        //先隐藏当前的  
        plus.webview.hide(activeTab);  
        //再显示目标  
        plus.webview.show(targetTab);  
        //记录上次活跃的选项卡  
        lastActiveTabs.push(activeTab);  
        //更改当前活跃的选项卡  
        activeTab = targetTab;  
    });  
    mui.back = function(){  
        if(lastActiveTabs.length>0){  
            var last = lastActiveTabs.pop();  
            //先隐藏当前的  
            plus.webview.hide(activeTab);  
            //取消当前选项卡的高亮样式  
            document.querySelector(".mui-bar-tab .mui-active").classList.remove("mui-active");  
            //再显示历史页面  
            plus.webview.show(last);  
            //历史选项卡增加高亮样式  
            document.querySelector(".mui-bar-tab a[href='http://ask.dcloud.net.cn/"+last+"']").classList.add("mui-active");  
            //更改当前活跃的选项卡  
            activeTab = last;  
        }else{  
            //不能再退了  
        }  
    }

HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。webkit remote debug其实是google、apple官方提供的服务，本文主要介绍google的chrome下如何调试Android手机上webview里运行的网页。
系列文章目录导航：

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

Chrome调试Android手机之概述

调试是软件开发过程中很重要的环节，它能帮助开发者快速的定位和解决开发过程中碰到的问题。对于HTML5的开发，大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验，不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式，还能跟踪分析页面资源加载性能等问题。对于移动平台的开发者来说，从Android4.4开始，也可以通过Chrome的DevTools工具连接设备对于应用进行调试。

调试效果如图所示：

软件要求

• Android设备或模拟器的系统版本为4.4及以上；

真机调试环境

如果你有Android设备，并且系统是4.4以上版本，那么可以直接使用Chrome连接进行调试。

检测设备版本

打开系统“设置”-> “关于”，查看Android版本：

Android版本必需是4.4及以上，否则无法进行应用调试。请参考“模拟器调试环境”章节使用模拟器进行应用调试。

显示开发者选项

Android设备默认“开发者选项”是隐藏的，需要打开“设置”-> “关于”页面，多次（7次）点击“版本号”项，返回到“设置”页面可显示“开发者选项”：

点击“开发者选项”，打开“开发者选项”设置页面。

开启USB调试

连接PC

Android设备通过USB数据线连接到PC，如果系统无法正确识别，则需要安装驱动，通常可到设备制造商的官方网站下载安装。也可使用第三方手机助手软件安装，如“360手机助手”、“应用宝”等。

PC识别到设备后，这时可通过HBuilder的真机运行功能进行连接并安装HBuilder应用。

使用HBuilder调试

在HBuilder最新版里，点运行菜单，或者HBuilderX的视图菜单，点里面的“打开Webview调试模式”。
确保手机连接正常、确保启动了可调试的app，那么右侧或底部会列出可调试的页面。点击调试/inspect即可打开chrome控制台进行调试。

注意：chrome83起调整了协议。HBuilderX2.8起适配了新协议。如果你的chrome升级到83以上版本，需更新HBuilderX到2.8+才能正常使用

================================================
正常情况下，开发者阅读到此结束。后续文档是Android模拟器的安装教程和不使用HBuilder调试而使用chrome调试的教程
================================================
================================================

附录：Android模拟器调试环境

如果你没有Android手机，又想调试Android应用，那么你需要安装Google官方的Android模拟器。
注意三方模拟器如genymotion、海马玩、Bluestacks蓝叠等模拟器只能真机运行，不能debug调试。

下文仅介绍Google官方模拟器的安装方法。由于Google经常更新，也建议开发者随时关注网上的其他更新教程。

如果没有Android4.4及以上版本设备，可以配置Android模拟器来调试。Android模拟器一直都以运行速度慢著称，其实官方已经提供解决方案使用Intel HAXM技术来加速，使得模拟器运行速度有大幅的提升。
硬件要求

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

网络要求
使用Google的服务，不得不付出的代价就是要准备好翻墙工具。
模拟器安装更新和调试初始化时都必须翻墙。
无条件翻墙的同学可以尝试修改本机host的方法来访问Google相关服务，host内容参考google-hosts，注意及时更新：）

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...”开始新建模拟器。

• 新建模拟器
  

注意务必设置好SD Card，否则无法真机运行。
设置完成后，点击“OK”。

• 确认配置
  

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

启动模拟器

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

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

• 设置启动配置信息
  

点击“Launch”启动。

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

• 完成启动模拟器
  
  模拟器配置完毕，这时可通过HBuilder的真机运行功能进行连接，参考后面“应用调试”章节。

附录：使用chrome调试webview

配置完模拟器或真机调试环境后，可通过Chrome的DevTools工具快速调试HBuilder开发的移动应用。

安装HBuilder应用

启动HBuilder后会自动检测连接到PC上的设备（模拟器或真机），创建“移动App”后，可通过以下方式在设备上安装HBuilder应用进行调试：
运行的快捷键是Ctrl+R。也可以通过鼠标操作（注意下图中run in device的按钮在新版中已经不存在了，只需点击手机即可）

• 通过“运行”菜单启动
  

• 通过工具栏启动
  
  设备上安装完HBuilder应用后，会同步应用资源并自动运行。

• 模拟器
  

• 真机
  
  应用启动后则可通过Chrome的DevTools工具连接进行调试。

使用Chrome调试

我们推荐开发者直接使用HBuilder的调试，详见上文。这样可以免翻墙。
如果你不使用HBuilder的调试，而要自己使用chrome调试，可以看这里的教程，注意要翻墙。
检测Chrome版本号
Chrome 30及以上版本才支持Android设备调试，打开Chrome的关于页面查看：

要求最低Chrome30以上版本，如果版本太低则需更新版本，推荐使用最新版本。

打开设备检查页面
在Chrome地址栏，输入“chrome://inspect”或通过“菜单”->“工具”->“检查设备”打开设备检查页面：

DevTools工具会自动检测已连接设备运行的可调试页面列表，点击对应页面的“inspect”链接打开调试页面。
如果上图界面没有显示可调试的手机，请重新根据上文提到的方法检查手机的usb调试模式或驱动安装情况。同时注意Android4.4以下的手机无法调试，注意海马玩等模拟器无法调试。
如果上图界面有手机，但没有可调试的app，可能的原因如下：

1. 手机端需要调试的HBuilder基座或其他app并没有启动或没有运行任何html页面；
2. 要调试的app拒绝了调试请求。HBuilder调试基座是默认开放调试请求的，但云打包或本地打包的app默认是关闭调试请求的。云打包是在manifest里配置是否允许调试，具体请查询manifest配置指南，本地打包也要配置debug="true"，具体需要看本地打包配置环境。

点击"inspect"时，如果遇到启动了一个白屏界面，说明被墙了。因为此服务需要连接google的服务器
一般情况下，只在第一次使用"inspect"时需要翻墙，以后会缓存在本地。
开发者可以使用三方翻墙服务，但注意并不是可以访问google.com就可以使用chrome调试，有些翻墙软件支持的dns并不全。关键是要ping通chrometophone.appspot.com（此url可能随google调整服务而变化）。

还有一个简单易行的方法是修改本机host。这里提供一些host清单。https://github.com/racaljk/hosts，注意及时更新。于2016年7月25日亲测可行，注意此host文件涉及的国外域名很多，不需要的dns解析可以删除）
注意host文件修改在window下需要管理员权限，具体方法本文不讲述请自行百度。

页面调试
打开调试页面后DevTools会自动加载相关资源，调试页面操作方式与普通html调试页面完全一致。

• 在Elements下查看DOM结构
  
  选中DOM元素后，在设备上会高亮显示，右侧Styles下修改CSS属性可即时生效：
  

• 在Sources下断点调试JavaScript
  
  按F5可重新加载页面，重新开始调试。

注意：每个Webview在chrome候选调试列表里是不同的列表，需要单独点inspect。当你inspect WebviewA时，点击了一个按钮，打开了WebviewB，此时若要调试B，需要返回chrome://inspect/#devices页面，找到WebviewB，然后点inspect。