HTML5+app开发学习之调试篇

调试方式介绍一 边改边看

边改边看是轻量级的界面调试工具，最方便最常用。
在HBuilder右上角切换开发模式，可以选边改边看方式，切换模式的快捷键是Ctrl+p。进入边改边看后，左边显示代码，右边显示浏览器。HBuilder的windows版，右边的浏览器是chrome；在mac版，右边的浏览器是Safari。
截止到HBuilder7.6的内嵌chrome版本是35，ua是：Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.138 Safari/537.36

1、左边写代码，保存后右边自动刷新
在左边写代码，保存时右边会自动刷新页面，非常方便调界面。
对于less、sass等预编译语言，在ctrl+s后自动输出css后，也会继续激活浏览器的刷新。HBuilder对markdown的支持也很好，本身编辑器就有高亮和着色功能，同时边改边看里也可以预览HTML效果。

2、代码和浏览器元素互跳转
windows版的边改边看还支持代码和页面元素的互相跳转。
对代码里的一个div点右键，选“高亮浏览器内对应元素”，就会看到右侧浏览器里指定的元素高亮了。

反之，对浏览器某个元素点右键，也会有“查找文档中对应元素”的选项，点击后会跳转到相应代码段落。

3、控制台
边改边看有2个控制台，默认控制台显示在HBuilder下方，直接输出了log和错误日志。控制台显示了代码行号，点击后可直接转到该行代码。

另一个控制台，是chrome控制台。
在HBuilder windows版的边改边看里点右键，可以选择启动chrome控制台。（mac版HBuilder的边改边看是Safari浏览器，暂时调不出控制台）

chrome控制台的功能非常多，检查css覆盖、调试js、查看网页加载性能等等，但有一个功能要强调下，就是手机设置。在控制台里选Emulation的device，可以看到iphone、nexus等很多手机。
如果你需要开发触屏版网页，需要使用touch功能，就一定要选择成手机开发模式。默认的pc模式是不支持touch事件的。不过要注意，虽然这里的浏览器控制台可以选手机，但只是模拟手机浏览器，plus扩展的原生api是无法调用和调试的。

调试方式介绍二 真机运行

真机运行是调试手机App的轻量级常用工具。不管是iOS还是Android，不管是模拟器还是真机，都可以与HBuilder连接进行真机运行。以往开发App，需要改一个界面，然后打包，然后安装到手机上，然后进入那个界面，看看改对了没。没有的话循环这套动作，非常低效。
有了真机运行，改了代码后保存，手机立即看到效果，如果在手机上运行时发生错误，那么日志和错误信息也都可以反馈到HBuilder控制台。
有些开发者喜欢alert大法，但事实上在HBuilder的js里敲clog代码块，可以生成console.log代码，用打日志来调程序更好。
由于iOS模拟器仅mac电脑上可以用，所以HBuilder的mac版才支持iOS模拟器。安装xcode就会自带iOS模拟器。
Android模拟器较多，如果要使用webkit remote debug功能，需要Google官方模拟器。但官方模拟器比较卡，很多人也在使用三方轻量级模拟器比如海马，但这类模拟器不能通过chrome的控制台调试。
真机运行并不是打包，至于app的icon、splash启动图等打包的时候可以配置。

HBuilder/HBuilderX真机联调常见问题

前言
首先保证iTunes或Android手机助手（如360手机助手）可以正常连接手机，如果仍有问题请查阅以下问题是否与自己遇到的情况相同
特别注意： iOS13真机运行，需要升级至HBuilderX 2.2.5+以上版本。
出现问题首先分析清楚问题在哪个环节。
从在HBuilder/HBuilderX菜单里点真机运行，程序会执行如下几个步骤：

• 手机硬件通过usb线连接到HBuilder所在电脑，此时可能因为手机驱动、usb口、数据线、手机硬件等多种问题造成连接失败。
• HBuilder通过adb或itunes服务检测手机。此时可能因为手机渠道、usb连接设置、adb设置或adb冲突、itunes设置造成检测不到。
• HBuilder安装调试基座到手机。此时可能因为手机禁止usb安装、Android手机没有sd卡、iOS手机没有信任证书而安装失败。
• HBuilder将ide中的代码同步到手机上并启动调试基座。这一步一般不会出问题。

下面把各种常见FAQ列出。
1、没有运行到手机的菜单
真机运行只能运行App项目，选中App项目或将焦点放在将要运行的App项目的文件编辑器上。 HBuilderX支持web项目和app项目，项目前面是有图标的，W表示web项目，A表示App项目。其中只有App项目可以运行。HBuilderX支持项目类型较多，只有uni-app、5+app、wap2app可以真机运行。他们都会在项目根目录下有个manifest.json文件（uni-cli项目会在src目录下有manifest.json）。

2、检查手机设置
注意：Windows连接Android手机，一定要确保电脑已安装相应的手机驱动。
确保数据线或usb口正常，可替换不同的线或口来验证。确认Android手机设置中USB调试模式已开启。这个设置一般在【设置】【开发者选项】里。有的手机在插上数据线后在pu