РИТ++ 2017, AppsConf Зал Найроби + Касабланка, 5 июня, 11:00 Тезисы: http://appsconf.ru/2017/abstracts/2584.html Большинство современных мобильных приложений так или иначе работает с каким-то API (а зачастую и не с одним). Количество запросов при этом может достигать десятков в минуту и понимание того, что сейчас происходит в сетевом слое вашего приложения, становится непростой задачей. Я расскажу и покажу весь диапазон современных средств для мониторинга и отладки сетевых запросов: от самых простых до узкоспециальных - с плюсами/минусами каждого из инструментов и областями их применения.

1. Ловля сетями
Вымышленная история одного разработчика
1

2. Дмитрий Рыбаков
Руководитель мобильной разработки, Lamoda
Об авторе
dmitriy.rybakov@lamoda.ru
http://tech.lamoda.ru
2

3. Предисловие

4. Предисловие
Почти любое мобильное приложение общается с сервером
Очень часто по HTTP + JSON/XML
4

5. Предисловие
Василий П. —
мобильный разработчик
Динамично
развивающийся стартап
Тестовое задание
https://developer.github.com/v3/
5

6. До приложения

7. Браузер
Самое быстрое
решение всегда под
рукой
7

8. Браузер
Делаем красиво.
Плагины для Chrome
JSON Viewer
JSON Formatter
JSON Handle
и еще десятки…
8

9. curl
Любые действия с
URL в консоли
curl https://api.github.com/users/MikeCamino
9

10. curl
10
curl https://api.github.com/users/MikeCamino -i
Заголовки ответа
curl https://api.github.com/users/MikeCamino –i –H ”User-Agent: GitHub Test App”
Заголовки запроса
curl https://api.github.com/gists –i –H ”User-Agent: GitHub Test App” –X POST
Не только GET
curl https://api.github.com/gists –i –H ”User-Agent: GitHub Test App” –X POST –d “{
"description": "the description for this gist", "public": true, "files": {
"file1.txt": { "content": ”<6Kb of text>" } } }”
POST-запрос с телом

11. API tools
11
Soap UI
Много функций
Поддержка SOAP
Интерфейс из 2000-х
Очень медленно
Insomnia
Как редактор кода
Лаконичный интерфейс
Меньше функций, чем у
Postman
Postman
Все функции Insomnia
Автоматизация
тестирования API
Перегруженный
интерфейс
https://insomnia.rest/https://www.soapui.org/ https://www.getpostman.com

12. Postman
Комплекс для
тестирования API
Все платформы и
расширение для
Chrome
12

13. Postman
История, коллекции запросов и переменные
13

14. Postman
Параметры и заголовки запроса
14

15. Postman
Заголовки и форматирование ответа
15

16. Postman
OAuth 2
16

17. До приложения
17
Браузер
Всегда под рукой
Много плагинов
Только GET-запросы
CURL
Умеет почти все
Много ручного труда
Нет OAuth
API Tools
Коллекции запросов
Переменные и пресеты
Форматирование ответов
OAuth
https://curl.haxx.se

18. В коде приложения

19. Отладчик
Есть в IDE «из
коробки»
19
Контекст запроса
Стек вызовов

20. Отладчик
Куда поставить точку остановки?
20
1 // Создаем HTTP-клиента
2 OkHttpClient client = new OkHttpClient.Builder()
3 .build();
4
5 // Создаем запрос
6 Request rq = new Request.Builder()
7 .url("https://api.github.com/users/MikeCamino").build();
8
9 // Выполняем его асинхронно
10 client.newCall(rq).enqueue(new Callback() {
11 public void onFailure(Call call, IOException e) {}
12 public void onResponse(Call call, Response response) throws IOException {}
13 }

21. Отладчик
Куда поставить точку остановки? А вот куда
21
// Создаем HTTP-клиента
OkHttpClient client = new OkHttpClient.Builder()
.addInterceptor(new Interceptor() {
public Response intercept(Chain chain) throws IOException {
return chain.proceed(chain.request());
}
})
.build();
// Создаем запрос
Request rq = new Request.Builder()
.url("https://api.github.com/users/MikeCamino").build();
// Выполняем его асинхронно
client.newCall(rq).enqueue(new Callback() {
public void onFailure(Call call, IOException e) {}
public void onResponse(Call call, Response response) throws IOException {}

22. Логирование запросов
Android + OkHttp 3 + Logging Interceptor. Подключение
22
compile 'com.squareup.okhttp3:logging-interceptor:3.8.0'
HttpLoggingInterceptor logging = new HttpLoggingInterceptor();
logging.setLevel(Level.BODY);
OkHttpClient client = new OkHttpClient.Builder()
.addInterceptor(logging)
.build();
build.gradle
Java
https://github.com/square/okhttp/tree/master/okhttp-logging-interceptor

23. Логирование запросов
Android + OkHttp3 + LoggingInterceptor. Результат
23
D/OkHttp: --> GET https://api.github.com/users/MikeCamino http/1.1
D/OkHttp: --> END GET
D/OkHttp: <-- 200 OK https://api.github.com/users/MikeCamino (1127ms)
D/OkHttp: Server: GitHub.com
D/OkHttp: Date: Thu, 01 Jun 2017 10:43:17 GMT
D/OkHttp: Content-Type: application/json; charset=utf-8
D/OkHttp: Status: 200 OK
D/OkHttp: Transfer-Encoding: chunked
D/OkHttp:
{"login":"MikeCamino","id":1525248,"avatar_url":"https://avatars0.githubusercontent.
com/u/1525248?v=3","gravatar_id":"","url":"https://api.github.com/users/MikeCamino",
"html_url":"https://github.com/MikeCamino","followers_url":"https://api.github.com/u
sers/MikeCamino/followers","following_url":"https://api.github.com/users/MikeCamino/
following{/other_user}","gists_url":"https://api.github.com/users/MikeCamino/gists{/
gist_id}","starred_url":"https://api.github.com/users/MikeCamino/starred{/owner}{/re
po}","subscriptions_url":"https://api.github.com/users/MikeCamino/subscriptions","or
ganizations_url":"https://api.github.com/users/MikeCamino/orgs","repos_url":"https:/

24. Логирование запросов
iOS + Response Detective. Подключение
24
let configuration = URLSessionConfiguration.default
ResponseDetective.enable(inConfiguration: configuration)
let session = URLSession(configuration: configuration)
Общая конфигурация
URLSession
let manager = Alamofire.Manager(configuration: configuration)
AlamoFire
https://github.com/netguru/ResponseDetective

25. Логирование запросов
iOS + Response Detective. Результат
25
<0x000000000badf00d> [REQUEST] GET https://api.github.com/users/MikeCamino
├─ Headers
├─ Body
│ <none>
<0x000000000badf00d> [RESPONSE] 200 (NO ERROR)
https://api.github.com/users/MikeCamino
├─ Headers
│ Server: GitHub.com
│ Date: Thu, 01 Jan 1970 00:00:00 GMT
│ Content-Type: application/json
├─ Body
│ {
│ "args" : {
│ },
│ "headers" : {
│ "User-Agent" : "ResponseDetective/1 CFNetwork/758.3.15 Darwin/15.4.0",
│ "Accept-Encoding" : "gzip, deflate",

26. Внешние отладчики
26
Chrome
Developer Tools
Facebook
Stetho
Android
Square Pony
Debugger
iOS
http://facebook.github.io/stetho/ https://github.com/square/P
onyDebugger

27. Facebook Stetho (Android)
Подключение
27
debugCompile ("com.facebook.stetho:stetho:1.5.0")
debugCompile ("com.facebook.stetho:stetho-okhttp3:1.5.0")
public class MyApplication extends Application {
public void onCreate() {
super.onCreate();
Stetho.initializeWithDefaults(this);
}
}
build.gradle
Java

28. Square Pony Debugger (iOS)
Подключение
28
pod 'PonyDebugger', '~> 0.4.3'
ponyd serve --listen-interface=127.0.0.1
CocoaPods
Start gateway server
PDDebugger *debugger = [PDDebugger defaultInstance]; // Debugger singleton
[debugger autoConnect];
[debugger enableNetworkTrafficDebugging];
Application code

29. Stetho / Pony. Запросы
Список запросов
29
Последовательность
Размер и время
Таймлайн

30. Stetho / Pony
Форматирование
ответов:
JSON
XML
Картинки
30

31. Stetho / Pony
Иерархия View
31

32. Stetho / Pony
Просмотр данных
SQLite
CoreData
32

33. Во время разработки
33
Отладчик
Всегда под рукой
Все детали и контекст
Медленно и по одному
Логирование
Любые свои запросы
Вместе с другими логами
Только текстовые ответы
Засоряет логи
Stetho / Pony
Все свои запросы
Куча деталей
Форматирование ответов
Не только сеть
Требуют настройки

34. Без кода приложения

35. Без кода приложения
Отладочные прокси
35
Устройство Прокси Сервер

36. Отладочные прокси
36
На устройстве
Packet Capture
Только Android
На локальной машине
Charles Proxy
Fiddler
Burp
В облаке
Cloud Middleman

37. Charles
Android
iOS
Реальные
устройства
Эмуляторы
37

38. Charles
Весь трафик
устройства
Картинки
Сторонние библиотеки
Шифрованный трафик
38

39. Отладочные прокси
Без дешифрования трафика
39
Устройство Прокси Сервер
Сертификат сервера Сертификат сервера

40. Отладочные прокси
Дешифрование трафика
40
Устройство Прокси Сервер
Сертификат прокси Сертификат прокси

41. Charles
Весь трафик
устройства
В том числе и HTTPS
41

42. Отладочные прокси
Владеют всем трафиком устройства
42
Устройство Прокси Сервер
Модификация запросов и
ответов
Троттлинг и точки останова
Запись и реплеи

43. Без кода приложения
43
Charles
Все платформы
$50 за лицензию
Fiddler
Бесплатный
Только Windows
Cloud Middleman
Не требует установки
Доступен отовсюду
Ограниченые
возможности

44. В заключение

45. В заключение
45
До приложения
Специальные
инструменты для
тестирования API
В коде приложения
Логирование запросов
Внешние отладчики
Без кода приложения
Отладочные прокси

46. Спасибо!
Дмитрий Рыбаков Руководитель мобильной разработки, Lamoda
email dmitriy.rybakov@lamoda.ru
http://tech.lamoda.ru