APP开发平台 > Blog > APICloud开发者进阶之路 | 调试技巧

值此中秋佳节来临之际,

为了让大家团团圆圆的过中秋,

本周五

仍按照惯例分享

《30天,App开发从0到1》

上周我们分享到第十一章

(温习一下:APICloud开发者进阶之路 | 性能优化探索)

今天,干货重点是第十二章——调试技巧!

学习过程中如果遇到疑点,

不要慌,去APICloud论坛提问噢,

同学们和老师在这等你!


主讲内容


本章将介绍常用的调试技巧,其内容更适合已有项目开发经验的开发者阅读。


示例 1 和示例 2 讲述了 Charles 抓包软件的使用,学会数据抓包对项目开发调试很有帮助。


示例 3 和示例 4 讲述了 iOS 和 Android 的断点调试技巧,这种调试技巧在项目开发中非常 实用,建议好好掌握。


学习目标


(1)如何使用 Charles 查看网络请求。

(2)如何使用 Charles 模拟网络请求。

(3)如何使用 Safari 断点调试 iOS 应用。

(4)如何使用 Chrome 断点调试 Android 应用。

(5)如何使用 MarkMan 工具来快速标注设计图。


12.2 使用Charles模拟网络请求


Charles 还可以用来模拟网络接口。借助于 Charles,可以有效降低前端开发和服务端开发的 耦合性。只要有了接口文档,前端和后端就可以独立并行开发。在开发工程中,前端工程师可 以使用 Charles 自行模拟各种数据结构来完善页面的各个逻辑和功能。对于 HTTP 和 HTTPS 请 求,模拟数据的方式相似,下面仅以 HTTP 请求为例。


12.2.1 请求示例代码


这里仍以下面这段 HTTP 网络请求代码为例:


api.ajax({ url:

'http://d.apicloud.com/mcm/api/module?filter={"where":{"name":"baiduLocation"},"skip":0,"limit":20}',method: 'get',

"headers": {

"X-APICloud-AppId": "A6066862334734",

"X-APICloud-AppKey": "af51d64f9a25cf5911823d89802e849b465fe5f6.1511323227684"

},

}, function(ret, err) {

if (ret) {

api.alert({ msg: JSON.stringify(ret) });

} else {

api.alert({ msg: JSON.stringify(err) }); }); }


正常情况下,此请求的返回值类似如下代码:


[{"id": "5a14e2faae5b8d5a6f651e33",

"name": "baiduLocation",

"app_count": 16686, "createdAt": "2017-11-22T02:37:46.032Z",

}]"updatedAt": "2017-11-22T02:42:01.977Z"


12.2.2 构建模拟数据


有关网络请求,本书以常用的 JSON 结构为例。首先需要新建一个 .json 文件来保存模拟数 据。模拟数据可以根据与服务器端约定的接口文档自行编写,也可以直接保存已有的网络接口 的返回值。


此文件被记为 mock.json,如图 12-9 所示。


微信图片_20180921222454.jpg

图 12-9


12.2.3 使用本地文件作为接口返回值


右键点击想要自定义其返回值的接口,选择“Map Local....”,如图 12-10 所示。

微信图片_20180921222514.jpg

图 12-10


在新打开的弹窗中,点击“Choose”按钮,来选择准备用来作为接口返回值的文件 mock. json,如图 12-11 所示。


微信图片_20180921222518.jpg

图 12-11


适当修改 mock.json 为以下内容:


[{"id": "5a14e2faae5b8d5a6f651e33",

"name": "APICloud",

"app_count": 999, "createdAt": "2017-11-22T02:37:46.032Z",

}]"updatedAt": "2017-11-22T02:42:01.977Z"


此时在 app 中重新进行网络请求,可以看到网络请求的返回值已经发生了变化。当然也可 以在 Charles 中,右键点击选中某个网络请求,然后选择“Repeat”来重新发送一次网络请求, 如图 12-12 所示。


微信图片_20180921222521.jpg

图 12-12


微信图片_20180907203650.jpg


更多app资讯,请关注www.apicloud.com

提交app定制需求,了解报价和周期:

https://app.apicloud.com/index?uzchannel=500

An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements