HTML5+app开发学习之调试篇

admin 管理员组

文章数量: 887019

HTML5+app开发学习之调试篇

• 调试方式介绍一 边改边看
• 调试方式介绍二 真机运行
• HBuilder/HBuilderX真机联调常见问题
• 调试方式介绍三 Android调试(Chrome)
• 调试方式介绍四 iOS调试(Safari)

调试方式介绍一 边改边看

边改边看是轻量级的界面调试工具，最方便最常用。
在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调试模式已开启。这个设置一般在【设置】【开发者选项】里。有的手机在插上数据线后在push通知栏里也可以设置。注意不能设置为u盘模式，如果是充电模式则必须同时设置充电时允许usb调试。
如手机屏幕弹出需信任本计算机的询问，请同意该授权。并且最好是把始终同意该设备调试勾上。如不小心拒绝，需要重插手机或重启电脑。
Android5.0及以上系统，不要使用访客模式。这种模式下无法成功运行。部分手机如小米，有usb安装应用的权限设置，需在手机上允许通过usb安装应用。不同rom的界面不一样，请自行百度你的手机打开usb安装应用的方式。

3、Mac 连接手机/模拟器说明
分Android和iOS手机分别列出排查方式：
3.1 Mac: iOS真机

1. 确认手机已通过数据线连接电脑
2. 确认iTunes能正常连接手机
3. 如手机屏幕弹出需信任本计算机的询问，请同意该授权

3.2 Mac: iOS模拟器

• Xcode必须安装在应用程序（Application）中
• 首先确认Xcode（版本必须是6.0及以上版本）已安装并能正常启动模拟器
• 如果仍然无法检测到，则打开Xcode，然后打开Xcode的 Preferences --> Locations，设置该界面中的Command Line Tools 项，选择正确的Xcode版本即可
  

3.3 Mac: 连接Android手机

1. 关于本机(指Mac系统的关于本机，非手机)–> 系统报告 --> usb–>
   你所连接的device–>厂商ID或者供应商ID(Vendor ID)
2. 在终端执行如下命令：echo xxxxxx >> ~/.android/adb_usb.ini （“xxxxxx”为厂商ID或者供应商ID(Vendor ID)，有些系统下echo命令并不能正确写入文件，可在~/.android/目录下修改或新建adb_usb.ini添加xxxxxx）
3. 重启HBuilderX
4. 如重启HBuilderX仍然不行，请使用命令行(终端.app)，切换到HBuilderX自带的adb目录
5. HBuilderX的adb目录位置：tools/adbs目录（MAC下为HBuilderX.app/Contents/tools/adbs目录）
6. HBuilderX的adb目录位置：plugins/launcher/tools/adbs目录（MAC下为/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/launcher/tools/adbs目录）
7. 在adbs目录下运行./adb kill-server重试
8. 重启电脑重试

4、Windows 连接手机/模拟器说明
4.1 Windows: 连接Android手机
4.1.1 驱动：
确认已安装Android手机驱动
如果手机连接没有任何反应或提示驱动问题，可通过以下方式解决：

1. 安装驱动精灵类程序，通过它们来安装驱动
2. 装驱动比较好的方式是使用各种手机助手，比如360、腾讯的各种手机助手，如果有问题，尝试升级助手的版本

4.1.2 其它注意事项

1. 如果在启动HBuilderX后才安装驱动连接上手机，可能需要重启HBuilderX
2. 使用管理员权限运行HBuilder
3. 关闭WebView调试模式，重启HBuilderX重试
4. 如果其他软件可以连接手机，而HBuilderX无法检测到手机，可能是其他软件独占了Google的ADB服务通道
5. Android的ADB服务已经被大量软件滥用，除了各种手机助手自带adb，其他如QQ、搜狗输入法、暴风影音、酷狗音乐、阿里旺旺等众多软件都自带adb。有些工具的adb版本低且独占手机通道，就会导致HBuilderX无法连接手机
6. 在任务管理器中找到adb.exe相关进程（包括kadb.exe等），在任务管理中右键该进程，打开文件位置，查看该进程是什么软件启动的
7. 禁止这些软件监听手机插入（一般在该软件的设置中）、禁止自动启动
8. 有些软件结束adb进程后又会自动启动，所以得将adb.exe文件重命名一下，实在不行卸载了这些流氓软件
9. 关闭所有手机助手及进程里各种adb.exe（包括kadb.exe等），再试

4.1.3 adb占用问题
如果你找不到被谁占用，则还可以使用如下方式检测，寻找幕后黑手：

1. 打开命令行窗口
2. 确认adb的启动进程：
   寻找端口是5037的tcp连接，在命令行中输入：netstat -ano | findstr 5037 在输出结果中找到类似下面的一行：
   TCP 127.0.0.1:5037 0.0.0.0:0 LISTENING 5816
   如果内容为空，可能是没有程序在占用adb端口。 或者使用 netstat -ano | findstr 5037>d:/1.txt 输出到文件中查找。
   根据查询结果确认端口为5037的连接被那个进程占用，结果中显示的“5816”表示占用adb端口的进程PID。
   根据进程的PID可以找到具体进程。 在命令行中输入：tasklist | findstr 5816
   在输出结果中找到类似下面的一行：
   adb.exe 5816 Console 0 4,440K
   adb.exe（名称一般不是adb.exe，以adb.exe举例）为启动的adb进程。
   或者手工在任务管理器中定位这个进程，打开任务管理器后，进入进程选项卡，如果列表里有PID，直接找；如果列表里没有PID，点菜单查看-选择列，勾上PID。

4.1.4 其它问题
如果以上方式仍然不行，还有一种可能是手机对adb的版本有特定要求（遇到一些魅族手机有此问题），此时需要更换HBuilder的adb版本。

1. HBuilder安装目录下带了多个版本的adb
2. HBuilder的adb目录位置：tools/adbs目录（MAC下为HBuilder.app/Contents/tools/adbs目录）
3. HBuilderX的adb目录位置：plugins/launcher/tools/adbs目录（MAC下为/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/launcher/tools/adbs目录）
4. 替换版本前，将默认版本的adb.exe备份下。然后把1.0.31版的adb.exe拷贝出来替换主目录下的exe。

4.2 Windows: 连接iOS手机

1. 确认手机已通过数据线连接电脑
2. 确认已安装iTunes，若未安装点击下载iTunes
3. 确认iTunes能正常连接手机
4. 如手机屏幕弹出需信任本计算机的询问，请同意该授权
5. 如果是第一次安装完itunes，建议重新启动HBuilderX
6. 如果以上方案都无法解决，有可能是因为本地库与iTunes带的库冲突了，一般是iTunes库目录（32位系统目录为：C:\Program Files\Common Files\Apple\Apple Application Support，64位系统目录为：C:\Program Files (x86)\Common Files\Apple\Apple Application Support）下的dll文件和系统库目录（32位系统目录为：C:\WINDOWS\system32，64位系统目录为：C:\Windows\SysWOW64）下的dll重名，可将iTunes库目录下的同名dll文件拷贝到系统库目录下，或者将系统目录下的同名dll文件重命名或删除，然后再重启HBuilder或者重试真机运行
7. 有可能是iTunes安装时依赖库丢失，尝试重装iTunes解决问题
8. iTools提供了一个修复驱动的工具和教程，可以参考

注意1：
itunes 12.10.9.3版本，连接ios 14+的iphone手机，可能存在问题。
如无法连接，请下载itunes历史版本。 itunes历史版本下载地址
注意2：
iTunes12.1起更改了接口，会造成无法连接：
①、HBuilderX菜单：工具 - 插件安装，打开插件安装界面，选择【iOS连接插件】（HBuilderX叫做真机运行插件）并安装，安装完并重启HBuilderX，尝试是否解决；
②、安装最新版本的iTools，重启HBuilderX。

5、其它问题
Q1: 能检测到手机，但处于置灰状态无法点击
发生此情况一般为检测到手机后，中间因为其他软件连接断开了，需要重新插拔手机或重启HBuilderX。

Q2: 能检测到手机，但点HBuilder的真机运行，安装调试基座失败

• 部分Android rom如小米有usb安装apk的权限，可能是关闭状态，此时需要在手机管家等设置里寻找usb安装apk的权限，将其打开。
• 部分Android手机在usb安装apk时，会在手机界面上弹框，如果不能及时点弹框，会因为超时而安装失败。请注意手机屏幕的显示。
• 当HBuilder控制台提示“安装HBuilder基座App失败”时，请使用手机助手手动安装xxx\android_base.apk，基本都属于这种情况。
• iOS版本偶发也会报错。同样需要根据提示手动安装iPhone_base.ipa。安装方式推荐itools，没有itools使用itunes也可以。
• 安装完毕后，会在手机上有一个HBuilder的应用。以后再点真机运行，就可以把项目部署到手机上，然后手动点击HBuilder应用，就能看到项目的结果。

Q3: Android手机真机运行提示应用安装成功，但是其实手机上并没有HBuilder应用

• 确认USB调试模式是否打开。如果未打开，请打开USB调试模式重新运行真机调试。
• 如果HBuilder已经检测到手机，可能存在与手机助手冲突的情况，请关闭所有的手机助手重新运行真机调试。
• 利用手机助手手动安装android_base.apk到手机上，然后重新运行真机调试。

Q4: Android真机联调报文件操作Permission denied
请尝试以下方法解决：
1、拔出数据线
2、重新打开USB调试模式
3、重新插上数据线，此时手机上可能需要授权确认，点击确认
4、重新运行真机调试看看是否还有问题
5、重启手机，再重新运行真机调试，看看问题是否解决
6、如果还有问题，重新启动HBuilder，重复1-4步骤，再重新运行真机调试，看看问题是否解决
7、如果问题仍然没有解决，则重新安装手机驱动：
1）我的电脑—右键–属性–硬件—设备管理器–删除USB驱动
2）打开手机助手重新安装驱动
此时手机上可能需要授权确认，点击确认，然后再重新运行真机调试
8、如果以上方案均无法解决，则有可能是手机root的时候，把sdcard目录的权限搞错了，导致无法真机运行，此时可以恢复出厂设置，或者重新root，或者刷机解决此问题

Q5: Android真机联调报：open ‘/dev/hwlog_switch’ fail -1, 13. Permission denied
请尝试以下方法解决：
1、参考 http://ask.dcloud/article/1336
2、拔插数据线重试
3、重新打开USB调试模式重试
4、重启手机重试
5、重新启动HBuilder重试
6、如果以上方案均无法解决，则有可能是手机root的时候，把sdcard目录的权限搞错了，导致无法真机运行，此时可以恢复出厂设置，或者重新root，或者刷机解决此问题

Q6: 控制台显示手机应用已启动，但手机屏幕上没有出现？
Android手机第一次安装基座应用时，手机端大多有各种杀毒软件要检测一会才会放行，需要等一会。

Q7: 5+App运行后手机端一直在启动画面停留，不停转圈不能进入。
这是应用的js代码的问题，启动画面的关闭是可配置的。参考 http://ask.dcloud/article/110

Q8: 为什么我电脑没有插iphone，但HBuilder检测到iOS设备？
iTunes支持wifi同步，如果iOS设备启动了wifi同步，电脑端的iTunes就可以检测到，进而HBuilder也可以检测到。

Q9: 真机运行成功启动，但手机端软件启动后显示的不是正在运行的项目。
这种情况是adb连接手机成功，但copy项目文件到手机上失败了。重新运行真机调试。或者检查待运行工程的目录名文件名是不是有特殊符号或超长导致Android不识别。

Q10: 真机运行启动后显示HBuilder真机运行（log）界面 {#synchronous}
1、重新运行真机调试尝试解决问题
2、Android设备可能存在与手机助手冲突的情况，请关闭所有的手机助手重新运行真机调试
3、如果步骤2无法解决，请更换别的手机助手，重新运行真机调试尝试解决问题
4、确认手机上HBuilder应用安装位置，如果手机上有外置sdcard，不要把HBuilder基座App安装在外置sdcard上，如果是安装在外置sdcard上，卸载外置sdcard上的HBuilder基座App，并在设置中将应用的默认安装位置不要设置为外置的sdcard上，或者将应用转移至手机内存或内置sdcard上，并重新运行真机调试

Q11: 使用genymotion模拟器真机运行，安装apk时报INSTALL_FAILED_CPU_ABI_INCOMPATIBLE
参见genymotion模拟器报INSTALL_FAILED_CPU_ABI_INCOMPATIBLE的解决办法
其他模拟器的适配一般百度搜索即可。

调试方式介绍三 Android调试(Chrome)

调试是软件开发过程中很重要的环节，它能帮助开发者快速的定位和解决开发过程中碰到的问题。对于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控制台进行调试。

调试方式介绍四 iOS调试(Safari)

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

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

准备环境

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

申请开发证书和描述文件

使用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）”模式可在页面左侧添加断点进行调试。

本文标签： App