Thursday, August 30, 2012

Google Chrome Remote Debugging для тестирования производительности мобильного веб-приложения

Недавно на проекте возникла интересная задача. Разрабатываем мы мобильное веб-приложение. Нужно было измерить время загрузки отдельных элементов страницы (*.js, *.css, *.png файлы) для разных типов подключений: WiFi, Edge, 3G.

После не очень длительного исследования существующих решений, мой выбор пал на относительно новую возможность 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-отладка. Список выглядит примерно так:


5. На мобильном устройстве запустите браузер Chrome. Откройте Настройки -> Инструменты разработчика и выберите галочку Включить веб-отладку через USB.

6. Запустите в консоли следующую команду для того, чтобы активировать передачу через порт:

adb forward tcp:9222 localabstract:chrome_devtools_remote 

7. Откройте Google Chrome браузер и загрузите страницу: localhost:9222

8. Вы увидите набор эскизов страниц, которые открыты в вашем мобильном браузере в данный момент. Выберите страницу, которую вы собираетесь отлаживать. Вот пример того, что вы должны увидеть в браузере:

  
9.  Теперь вы можете начать отладку мобильного контента на своем рабочем компьютере в Developer Tools. Вы можете измерить время загрузки каждого элемента веб-страницы:



Остается только обратить ваше внимание на то, что при проведении измерений нужно учитывать кеширование страницы. Чтобы полностью исключить кеширование советую:
    - Проводить отладку в инкогнито режиме мобильного браузера;
    - Выключить кеширование в Developer Tools (шестеренка в правом нижнем углу):

Ну вот и все, удачной охоты на багов! :)

6 comments:

  1. Interesting post. Thanks for kick-starter.

    Have you tried to use TimeLine to record events and see rendering, scripting and painting timing?

    IMHO scripting would be fair enough cause ALL mobile browsers as well as Chrome using WebKit (just need to make sure your current Chrome (mobile one) version using same WebKit version as native browser) -- Mobile WebDevs please correct me if I'm wrong.

    ReplyDelete
    Replies
    1. Sure, I used TimeLine. Actually it shows loading, scripting and rendering timing...

      Also I measured loading time in desktop Chrome version and in mobile one - just for comparison. Desktop page loading speed is definitely higher.

      Delete
  2. Создать приложение это одно, но без продвижения оно будет находиться где то далеко в топе (это в лучшем случае что оно в топ попадет). Ребята из http://apppromo.net/ знают свои обязанности и готовы заниматься продвижением в топ вашего приложения.

    ReplyDelete
  3. I am a web designer, and I designed a project on mental health dissertation topics. So I checked the performance of my website with Google Chrome Remote Debugging and got very good results.

    ReplyDelete
  4. This article provides valuable insights into measuring loading time for web application elements on different connections. Utilizing Google Chrome's Remote Debugging for Android 4.0 or higher proves to be an effective solution. For those seeking assistance with marketing assignments, consider hiring a skilled marketing assignment writer to ensure the successful completion of your academic projects.

    ReplyDelete
  5. This article offers insightful information about calculating the time it takes for web application pieces to load across various connections. The workaround that works best is to use Google Chrome's Remote Debugging for Android 4.0 or higher. To ensure success, individuals looking for help with CV writing might want to think about working with a professional CV writing service in Dubai. For Success.

    ReplyDelete