超详细图文保姆级教程：App 开发新手入门（三）

上文我们已经完成了一个应用项目的导入、代码更新和代码提交，本章继续讲述一下，如何在开发过程中进行代码的同步联机调试。

4 代码调试

4.1 纯静态 CSS 页面样式查看

代码调试有多种方式，如果是查看纯粹的静态样式，可以使用浏览器打开对应页面，或者直接在开发工具上鼠标右键点击页面文件，然后选择「实时预览」选项，即可在开发工具中查看 

4.2 真机联调（重点）

在实际开发中，通常需要这样一种场景，就是对于一些复杂交互逻辑的页面的联调。这些页面加载后需要执行一些代码逻辑，或者调用一些手机特有的功能（比如扫描二维码），这时候我们就需要在真实的手机环境下运行代码，进行开发调试，这种情况我们就需要使用到下面介绍的真机联调方式了。

 真机调试主要有 2 种方式，一种是通过 USE 数据线使手机和电脑连接进行同步，另一种是通过 Wifi 网络进行真机同步，Wifi 方式更为契合实际开发需要，为了降低新手阅读学习的复杂度，本文重点介绍如果通过 Wifi 方式进行真机联调。

 WIFI 真机联调的操作流程：

4.2.1 编译测试应用安装包

打开编译自定义 Loader 页面 

编译自定义 Loader  

安装自定义 Loader 到手机 ​ 

PS1：以上操作也可以自行在浏览器里去操作实现，具体为使用浏览器登录官网，在控制台里选择「模块」- 「自定义 Loader」页面进行操作，是同样的效果。其实开发工具中调用的就是浏览器页面，两者是同一个 Web 页面。  ​

PS2: 真机调试可以使用真实的物理手机，也可以在电脑 PC 端安装模拟器软件代替手机进行开发调试。使用模拟器同步速度快，频繁同步也不伤手机，当不具备 WIFI 环境或局域网环境时，特别适合。不过需要注意因为是模拟软件，相对于真实手机有一定的兼容性问题，比如涉及使用原生功能(比如扫描二维码等)的页面，还是建议使用物理手机去调试。 ​ 

PS3：关于模拟的选择，因为苹果的 iOS 属于闭源系统，所以当前还是主要选择安卓模拟器进行代码联调，这里个人推荐使用网易开发的 MuMu 模拟器，实际开发使用效果很不错。下载 apk 安装包后，鼠标双击或者拖动到安装包到模拟器内即可完成安装（下图是 MuMu 模拟器安装测试 Loader 的截图）。 

 ​ 4.2.2 设备连接 

在 Studio3 开发工具中，点击顶部菜单 「终端」- 「通过 Wi-Fi 连接新的设备」

正确操作会弹出以下界面,这个界面不要关闭，后面的连接会用到 

 在手机中启动自定义 Loader 应用，可见到以下页面 

 双击灰色操作球，调起连接面板，这里就对应到在开发工具上显示的二维码设备连接界面了 

4.2.3 同步数据

建立连接成功后，在开发工具中鼠标右键点击根目录，然后「选择 WIFI 同步【全量】」（也可以使用快捷键操作，不同的操作系统快捷键并不相同，下图是在 MacOS 系统下的截图）。

 PS: 全量和增量的区别，全量是将开发工具内的应用代码全部覆盖到手机的应用上，进行全部替换。而增量是开发工具在同步数据之前会对比开发工具内的代码和应用内的页面代码，会进行页面对比，只替换那些不同的页面。首次同步建议使用全量，后续使用增量即可。

 同步数据完成后，应用会自动重启，显示最新的代码界面,如下图就是成功同步代码后的应用界面。 

PS：如果 Wifi 同步后没有反应，查看确认一下应用是否具备存储权限。当前主流的安卓系统都对应用权限加了限制，没有存储权限，应用无法保存更新后的代码，所以确保应用具备存储权限，不同的手机系统可能略有不同，大体是 「设置」-「应用」- 选择你的应用，点击进行详情页，然后点击权限进行查看修改

4.2.4 修改数据，体验下同步效果

让我们修改一下 html 路径下的 mian.html 文件 

 修改完成后记得先保存文件

 右键根目录或使用快捷键进行 Wif 增量同步 

 真机同步效果