После не очень длительного исследования существующих решений, мой выбор пал на относительно новую возможность Google Chrome - Remote Debugging. Для того чтобы воспользоваться данным решением вам необходимо работать с версией Android 4.0 и выше (мобильная версия Google Chrome доступна только для сэндвича).
Настройте тестовую среду, выполнив следующие шаги:
1. Убедитесь, что у вас установлены: Android SDK и Chrome; ваше мобильное устройство настроено для разработки.
2. Подключите мобильное устройство к компьютеру по USB кабелю. Для коммуникации с устройством нам нужен Android Debug Bridge (adb), который включен в Platform Tools (Android SDK).
3. Для удобства добавьте Platform Tools (<sdk>/platform-tools/) к переменной окружения PATH.
4. В командной строке запустите команду adb devices. После запуска команды убедитесь, что ваше устройство появилось в отображенном списке. Если нет - убедитесь, что на вашем телефоне разрешена USB-отладка. Список выглядит примерно так:
6. Запустите в консоли следующую команду для того, чтобы активировать передачу через порт:
adb forward tcp:9222 localabstract:chrome_devtools_remote
7. Откройте Google Chrome браузер и загрузите страницу: localhost:9222
8. Вы увидите набор эскизов страниц, которые открыты в вашем мобильном браузере в данный момент. Выберите страницу, которую вы собираетесь отлаживать. Вот пример того, что вы должны увидеть в браузере:
9. Теперь вы можете начать отладку мобильного контента на своем рабочем компьютере в Developer Tools. Вы можете измерить время загрузки каждого элемента веб-страницы:
Остается только обратить ваше внимание на то, что при проведении измерений нужно учитывать кеширование страницы. Чтобы полностью исключить кеширование советую:
- Проводить отладку в инкогнито режиме мобильного браузера;
- Выключить кеширование в Developer Tools (шестеренка в правом нижнем углу):
Ну вот и все, удачной охоты на багов! :)
