Инструменты разработчика Chrome для отладки мобильного Интернета на реальных устройствах

Вступление

Тестирование мобильного веб-приложения может стать затруднительным, особенно когда возникают такие проблемы, как запутанный код HTML / CSS / javascript, неправильно реализованный HTTPS, несоответствия браузера, производительность загрузки страницы и так далее. Более того, несколько таких вещей могут быть чрезвычайно мучительными при стремлении поддерживать максимально широкий спектр мобильных устройств. Итак, как вы преодолеваете эти проблемы? Использование инструментов веб-разработчика или расширений отладки облегчает отладку веб-приложения. Здесь мы поговорим о самом популярном из них - инструментах разработчика Google Chrome с открытым исходным кодом.

Инструменты разработчика Google Chrome - это консолидированная среда, встроенная в браузер Google Chrome. Он используется для веб-разработки, отладки, мониторинга, оптимизации и понимания веб-приложений или веб-сайтов. (Источник Google Chrome DevTools )

Вот некоторые из основных функций Chrome DevTools

• Проверяйте и редактируйте DOM и CSS вашего сайта в режиме реального времени
• Запускайте фрагменты кода с любой страницы
• Отладка запутанного кода
• Установите расширенные точки останова и отладьте JavaScript, используя графический отладчик
• Устранение неполадок безопасности
• Анализируйте время выполнения и производительность страницы, чтобы повысить скорость вашего приложения.
• Трассировка перерисовывается и перерисовывается при загрузке приложения

Chrome DevTools предоставляет практически все механизмы, необходимые для проверки, отладки и мониторинга производительности веб-приложения / мобильного веба. Он также предоставляет дополнительные возможности для моделирования мобильных устройств для тестирования и создания мобильных, адаптивных веб-сайтов. Вы даже можете отлаживать веб-контент на реальном Android-устройстве с компьютера разработчика. Но достаточно ли этого для тестирования вашего веб-приложения только на одном или двух устройствах?

Удаленная отладка с использованием Chrome DevTools в интеграции с лабораторией мобильных устройств pCloudy

Фрагментация устройства является очень реальной проблемой при тестировании веб-приложений на реальных устройствах, особенно для пользовательского интерфейса и функциональных тестов. Количество устройств с уникальными техническими характеристиками и собственными вариациями сборки увеличилось. На продвинутом уровне, чтобы полностью протестировать отзывчивость и производительность вашего веб-приложения на реальных устройствах, вам нужно будет экспериментировать с вашим сайтом на различных платформах, на разных форм-факторах устройства. Лаборатория мобильных устройств pCloudy предлагает полную интеграцию с Chrome DevTools для тестирования ваших приложений на реальных устройствах. Эта интеграция позволяет тестировать веб-приложения на множестве устройств Android с различными размерами и конфигурациями.

Вот как большинство разработчиков приложений тестируют свои веб-приложения

Проверяйте и редактируйте в реальном времени дизайн и содержание вашего сайта

Протестируйте и отредактируйте свой сайт в режиме реального времени, проверив все HTML и CSS на вашей странице. На панели элементов можно редактировать узел DOM в режиме реального времени, просто дважды щелкнув выбранный элемент и выполнив изменения.

Вы даже можете редактировать имена и значения свойств стиля в панели « Стили» . Изучите и отредактируйте параметры блочной модели.

Также возможно редактировать параметры блочной модели текущего элемента, изменяя значения top, bottom, left, right для свойств padding, border и margin текущего элемента, используя панель Computed.

Удаленная отладка на реальных устройствах для исправления ошибок в коде

Отладка зашифрованного кода: Сделайте ваш код читабельным и легко отлаживаемым даже после того, как вы его скомбинировали, минимизировали или скомпилировали. Вы можете легко изменить формат вашего свернутого кода, нажав {}.

Проверьте и оптимизируйте производительность веб-приложения

Панель «Сеть» позволяет увидеть, как отображается страница, а также время, необходимое для ее отображения от начала до конца. Для этого нажмите на панель «Сеть», нажмите на значок камеры и обновите страницу на устройстве.

Панель «Таймлайн» помогает вам записывать и анализировать все действия в приложении во время его работы. Это лучшее место для начала изучения проблем с производительностью в вашем приложении.

Чтобы сделать запись загрузки страницы, откройте панель «Таймлайн», откройте страницу, которую вы хотите записать, и перезагрузите страницу. Панель Timeline автоматически записывает перезагрузку страницы. Вы также можете записывать взаимодействия страниц на странице и просматривать сведения об исполнении через записанную временную шкалу.

Вот еще некоторые подробности, которые вы можете просмотреть с помощью временной шкалы записи.

• Запишите временную шкалу для анализа каждого события, которое произошло после загрузки страницы или взаимодействия с пользователем
• Просмотр запросов FPS, CPU и сети на панели обзора
• Нажмите на событие в таблице пламени, чтобы просмотреть подробную информацию о нем
• Увеличьте часть записи, чтобы упростить анализ

Заключение

«Использование правильных инструментов для правильной работы» - это старый афоризм, который применим ко всем областям, включая разработку программного обеспечения. Как мы уже видели, Chrome Developer Tools имеет несколько функций, которые помогают вам лучше разрабатывать, быстрее отлаживать и эффективно измерять производительность вашего веб-сайта или приложения. Обсуждаемые здесь функции являются одними из наиболее распространенных, которые используются разработчиками, дизайнерами и тестировщиками для написания, отладки, мониторинга и оптимизации веб-сайтов и веб-приложений. Использование этих функций в интеграции с Mobile Device Lab, например pCloudy, может трансмогрифицировать весь процесс создания, тестирования и запуска веб-сайтов и веб-приложений.