Следите за «сердцебиением» ваших Android-приложений с помощью Stetho

Я работаю с вебом так же часто, как и с мобильными приложениями. В вебе инструменты разработчика, такие как Chrome Developer Tools, предлагают нечто большее, чем просто отладчик кода.

Мониторы сетевых запросов и визуализаторы макета упрощают не только просмотр исполняемого кода, но и обеспечивают более целостный опыт отладки. Мне не хватало такого универсального подхода, когда приходилось исправлять баги в своих Android-приложениях.

Android Monitor не предоставляет всех необходимых инструментов для проверки сетевого трафика, просмотра базы данных приложения или иерархии представлений. В этой статье я покажу, как использовать Chrome Developer Tools для отладки Android-приложений.

— В этом руководстве я буду использовать Android Studio, но вы можете работать в любой удобной IDE.

— Google Chrome, чтобы открыть Chrome Developer Tools.

Ранее в статье «Исследуя просторы Realm» мы создали приложение для заметок под названием Realm Notes. Мы будем использовать его здесь, так что вы можете либо следовать инструкциям из той статьи, чтобы создать приложение, либо клонировать репозиторий. Эти концепции можно применить и к любым другим существующим приложениям.

В терминале выполните следующую команду в нужной директории. Я обычно делаю это из ~/Projects/Android:

Теперь откройте проект в Android Studio и запустите его, нажав на зелёную кнопку запуска или сочетание клавиш CTRL+R. Приложение должно запуститься на вашем телефоне или эмуляторе.

Теперь внесём несколько изменений в приложение, чтобы добавить новую функциональность.

Добавим изображения рядом с заметками, которые помогут вспомнить, о чём была заметка.

Начнём с добавления Picasso в зависимости. Picasso — это библиотека с открытым исходным кодом, которая помогает загружать изображения в приложения.

Откройте файл *build.gradle* уровня приложения и добавьте Picasso как зависимость.

Android Studio предложит синхронизировать Gradle — позвольте ему это сделать.

Откройте *app/manifests/AndroidManifest.xml* и добавьте разрешение на доступ к интернету. Оно понадобится для загрузки иконок при запуске приложения.

Теперь откройте *app/res/layout/note_item.xml* и оберните существующий *LinearLayout* горизонтальным *LinearLayout*, а также добавьте *ImageView*, чтобы отображать иконку перед каждой заметкой.

Нам нужно загружать изображения из интернета в каждый *ImageView* для заметок. Откройте *app/java/uk.co.placona.realmnotes**/MainActivity.java* и в начале класса создайте переменную-член mPicasso.

В методе onCreate инициализируйте Picasso с параметрами по умолчанию.

В классе *NoteRecyclerViewAdapter* мы укажем адаптеру загружать случайное изображение для каждой заметки.

В начале этого класса создайте вспомогательную переменную для URL иконки. Так будет проще изменить провайдера позже.

В классе *ViewHolder* добавьте ссылку на *ImageView*, который мы только что добавили в макет.

Наконец, в методе *onBindViewHolder* укажите Picasso загружать URL для каждого *ImageView*.

Запустите приложение снова и добавьте пару заметок.

Но есть проблема. Если несколько раз открыть URL, который использует наше приложение, в браузере, вы заметите, что он возвращает случайные изображения при каждом запросе. Однако в приложении всегда отображается одно и то же изображение. Включение логов Picasso также показывает, что URL загружается дважды:

Но на самом деле он не загружается дважды.

## Пора разобраться

Логи показывают, что мы делаем несколько запросов к URL для получения изображений. Если это действительно так, то у нас должны быть разные изображения для каждого запроса.

Попытка создать новое изображение или закрытие и повторное открытие приложения всегда приводят к отображению одних и тех же изображений.

Установим Stetho, чтобы увидеть HTTP-запросы, которые делаются для каждого изображения.

Снова откройте *build.gradle* уровня приложения и добавьте зависимость для Stetho. Также добавим один из сетевых помощников Stetho, чтобы перехватывать HTTP-запросы из приложения.

Снова позвольте Android Studio выполнить свою работу, а затем откройте *app/java/uk.co.placona.realmnotes**/MainActivity.java* и добавьте следующее в метод onCreate:

Если вы запустите приложение сейчас, то не заметите особых изменений, но благодаря Stetho вы получите доступ к некоторым частям вашего приложения через Chrome Developer Tools.

В Google Chrome введите в адресную строку: chrome://inspect/. В списке устройств вы должны увидеть устройство, на котором запущено приложение.

Нажмите *inspect*, и откроются инструменты разработчика Chrome. Если перейти на вкладку *Network*, вы ожидаете увидеть сетевые запросы, которые делает ваше приложение, верно? Но нужно добавить ещё пару вещей.

Stetho поставляется со своим сетевым перехватчиком, и чтобы передавать запросы в devtools, нужно убедиться, что все они проходят через Stetho. Для этого изменим инициализацию Picasso с:

На:

Подробнее о сетевых перехватчиках можно прочитать в документации OKHttp. OKHttp — это базовая библиотека, которую Picasso использует для выполнения HTTP-запросов.

Когда вы запускаете приложение, возможно, вы не успеете открыть инспектор до загрузки изображений, поэтому просто перейдите на вкладку *Network* и, находясь там, поверните устройство или, если вы используете эмулятор, нажмите кнопку поворота.

Теперь обратите внимание на интересную деталь в гифке выше. Несмотря на то что у меня загружаются два изображения, создаётся только один HTTP-запрос, независимо от количества заметок. Добавление новой заметки также не влияет на это — приложение не делает новых HTTP-запросов.

Оказывается, Picasso кэширует URL, и пока он не меняется, новый запрос не выполняется на протяжении всего жизненного цикла Activity. Это хорошо, так как уменьшает количество HTTP-запросов, но мешает случайности иконок в наших заметках.

Я немного покопался в этом вопросе и написал статью об этом, которую вы можете прочитать здесь. Но если кратко, то нам просто нужно немного изменить URL.

Измените метод *onBindRealmViewHolder* следующим образом:

Мы изменили URL так, чтобы он использовал позицию заметки в *RecyclerView* как часть URL, так что теперь он всегда будет выглядеть как https://unsplash.it/100/100?random&1 в зависимости от позиции заметки. Запустите приложение снова.

Обратите внимание, что теперь при загрузке приложения создаётся два сетевых запроса. Отлично, мы решили эту проблему, проанализировав каждый запрос.

Stetho также позволяет просматривать элементы нашей активности. Если мы захотим проверить иерархию виджетов в приложении, мы можем сделать это, перейдя на вкладку *Elements*.

Не волнуйтесь, существует библиотека, которая помогает добавить провайдер для Realm. Откройте *build.gradle* уровня проекта и добавьте следующее:

Позвольте Android Studio выполнить свою работу и вернитесь в *app/java/uk.co.placona.realmnotes**/MainActivity.java*. Мы изменим способ инициализации Stetho, чтобы не использовать только значения по умолчанию.

Запустите приложение снова, и теперь вы сможете увидеть свою базу данных в разделе *Resources*. Возможно, для этого потребуется удалить и переустановить приложение при первом изменении.

Мне всегда казалось, что чего-то не хватает при отладке мобильных приложений. Если вы, как и я, мобильный разработчик, которому не хватает некоторых инструментов, доступных в вебе, надеюсь, эта статья будет вам полезна.

Stetho — отличный инструмент, и я с нетерпением жду, чтобы узнать, как он облегчил вам отладку. Свяжитесь со мной в Twitter @marcos_placona или по электронной почте marcos@twilio.com, чтобы рассказать об этом подробнее.