混合开发-真机调试技巧

作者:hwj3747
转载请注明

前言

在做混合开发的时候，遇到过这么一个问题，单独调试前端h5代码的时候，很容易，只需要把代码放在谷歌浏览器下，F12开发者模式即可调试。单独调试原生代码的时候也很容易，一般编译器都有自带断点调试功能，像AS，Eclipse这些。但是，当把前端H5代码和原生代码结合起来，并且在真机运行的时候，如果原生代码出现问题还好说，但是如果H5代码有问题就不好调试了，特别是一些H5代码与原生有交互的功能，就更加难以调试了。以下介绍一种真机运行混合开发的代码，并且能在真机上调试H5代码的方法（针对Android系统）。¹

准备工作

• 对于Android系统的混合开发，一般都是基于系统的自带webview，即基于谷歌浏览器的。所以我们需要在PC端准备一个谷歌浏览器。
• 对用于调试的真机，必须打开USB调试，并安装好驱动。
• 对于Android Webview必须加入以下代码，开启调试模式

if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {  
  
   WebView.setWebContentsDebuggingEnabled(true);  
  
} 

开始调试

具体操作如下

• 打开要测试的WebAPP
• 打开科学上网工具，探索墙外的世界
• USB连接电脑，选择允许USB调试
• 打开谷歌浏览器，在地址栏输入

chrome://inspect

出现如下界面，第一个是本地模拟器调试的APP，第二个是真机调试的APP。

• 在要调试的界面下面点击inspect按钮，进入相应的界面调试，如下图
  

• 到这一步就基本大功告成了，接下来就是利用谷歌浏览器调试web页面了。切换TAB页到sources页面，在左边的树种找到网页的源代码，点击代码行左边的数字对这一行设置断点，然后就可以用右上角的按钮进行调试了！
  

---

1. 谷歌在63版本以后的浏览器已经禁用此功能，所以谷歌浏览器的版本必须低于63 ↩︎