• Перейти к основной навигации
  • Перейти к основному содержанию
  • Перейти к основной врезке
  • Перейти в конец страницы

ТехЛила

Bleeding Edge, Всегда

  • Главная
  • О нас
  • Контакты
  • Сделки и предложения
Логотип Техлила
Поделиться
Твитнуть
Поделиться
шпилька
4 Акции
CMS или HTML
Следующий

CMS или HTML: что следует выбрать малому бизнесу для своего веб-сайта

Как удаленно отлаживать веб-приложения на Android

ТехЛила Для смартфонов Android

Как удаленно отлаживать веб-приложения на Android

Аватара Вирендра Раджпут Вирендра Раджпут
Последнее обновление: 9 января 2022

Сегодня Интернет чаще просматривается на мобильных телефонах, чем на настольных компьютерах. Поскольку устройства стали действительно портативными, а размеры экранов меньше. Поэтому, если вы разрабатываете веб-приложение, вы просто не можете избежать поддержки мобильных телефонов (Android или iOS). Неработающие или некачественно выглядящие сайты на мобильных экранах действительно могут нанести ущерб вашей репутации в Интернете. Пользовательский интерфейс на телефонах полностью отличается от настольных. Поэтому разработчикам приходится специально разрабатывать приложения для адаптации к экрану мобильных устройств.

Google Chrome Dev предоставляет инструменты, которые позволяют вам проверять, отлаживать и анализировать работу на устройстве, и вы можете использовать инструменты Chrome Dev на локальном компьютере для отладки приложения на мобильном устройстве. В этом руководстве мы узнаем, как настроить локальную машину разработки для удаленной отладки на Android. Мы будем выполнять отладку через USB-соединение между вашим мобильным устройством и вашей локальной машиной разработки.

Для продолжения удаленной отладки вам потребуется следующее:

  1. Мобильный телефон или планшет Android с установленным Chrome для Android 28 (его можно установить с здесь).
  2. USB-кабель для подключения устройства Android к локальной машине разработки. Также убедитесь, что у вас установлены необходимые диски для подключения мобильного Android-устройства к компьютеру.
  3. Проверить Список OEM-драйверов USB и подберите для себя подходящие драйверы.
  4. Chrome 28+ установлен на вашем локальном компьютере для разработки.
  5. Убедитесь, что на вашем локальном компьютере для разработки установлено расширение ADB Chrome. Вы можете установить его из здесь.

В этом руководстве мы будем использовать Sony Xperia L (устройство Android) и Windows 7 на нашей локальной машине для разработки. Итак, начнем с удаленной отладки:

1. Сначала убедитесь, что на вашем устройстве Android включен режим отладки.

Если вы не включили, обратитесь к этому:

  • Для пользователей Android 4.2 см .: http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
  • Остальные из них могут относиться к: http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.

Для получения дополнительной информации о настройке Android-устройства для разработки, пожалуйста, обратитесь: http://developer.android.com/tools/device.html#setting-up.

2. Подключение вашего Android-устройства.

Теперь подключите устройство Android к локальной машине разработки с помощью кабеля USB. После того, как вы подключили свое устройство Android, вам необходимо включить веб-отладку по USB на своем телефоне, запустив Chrome на своем Android, затем -> Настройки -> Инструменты разработчика -> Выберите Включить веб-отладку по USB.

Инструменты разработчика Android

При выборе этого параметра, если вам будет предложено подтвердить подключение к машине разработки, выберите ОК.

3. Отладка

После установки расширения ADB вы увидите серый значок Android рядом с меню Chrome. Теперь щелкните значок Android и выберите -> Запустить ADB. Теперь он должен стать зеленым и отобразить количество подключенных устройств в настоящее время. Затем щелкните значок и выберите -> Просмотреть цели проверки. Это должно открыть новую вкладку и показать количество подключенных устройств Android и текущих открытых вкладок на них.

Проверить с помощью инструмента разработки Chrome

Теперь выберите вкладку из списка, которую вы хотите отладить. Это откроет новое окно с инструментами разработчика.

Панель инструментов разработчика

Теперь проверьте какой-то элемент на странице, и этот элемент будет выделен на мобильном устройстве Chrome в режиме реального времени.

Выделенный элемент в Chrome Mobile
Выделенный элемент на снимке экрана мобильного устройства Chrome

Таким образом, вы можете исправить ошибки, специфичные для устройства, путем отладки с помощью инструментов разработчика. Вы можете выполнять команды из инструментов Dev, которые будут выполняться на мобильном устройстве Chrome. Также просматривайте различные панели, такие как Сеть, Ресурсы, Временная шкала, Профили, Аудиты.

Cеть

Теперь вы можете исправлять ошибки, специфичные для мобильных устройств, и отлаживать мобильные приложения в режиме реального времени вместо того, чтобы развертывать приложение на сервере, а затем обращаться к нему с телефона и выполнять отладку. Google Chrome Dev предоставляет эти инструменты, которые решают настоящую проблему для разработчиков, создающих приложения, совместимые с устройствами.

Поделиться
Твитнуть
Поделиться
шпилька
4 Акции

Раскрытие информации: Контент, опубликованный на TechLila, поддерживается читателями. Мы можем получать комиссию за покупки, совершенные по нашим партнерским ссылкам, без каких-либо дополнительных затрат для вас. Читайте наши Страница отказа от ответственности чтобы узнать больше о нашем финансировании, редакционной политике и способах поддержки.

Поделиться заботой

Поделиться
Твитнуть
Поделиться
шпилька
4 Акции
Аватара Вирендра Раджпут

Вирендра Раджпут

Вирендра Раджпут заядлый программист и хакер. Он является соучредителем Markitty. Он заядлый программист на Python, увлеченный взломом различных API. В свободное время любит работать над сайд-проектами.

Категория

  • Android
  • Веб-дизайн и разработка

Читатель взаимодействий

Что говорят люди

  1. Аватара Педро МигеляПедро Мигель

    Приятно знать о Chrome Dev. Предложение платформы разработчикам как для браузеров, так и для мобильных устройств (iOS и Android) увеличивается день ото дня. Спасибо за все подробные фотографии процесса отладки.

    Ответить
  2. Аватар MeethuМету

    Это действительно потрясающий и полезный пост. Отсюда мы можем понять четкие процедуры удаленной отладки веб-приложений на Android. Также изображения ясно и легко объясняют процедуру работы с Chrome Dev.

    Ответить
  3. Аватар Ван УайлдераВан Уайлдер

    Вау! Android - это круто!

    Не знал, возможно ли это вообще

    Ответить
  4. Аватара СтефанаStephan

    Думаю, это действительно полезный пост для всех пользователей Android. особенно в те времена много приложений для браузеров и обычно сбивают с толку пользователей.
    Все фотографии очень подробны, и их легко отслеживать на всех этапах.
    Спасибо за ваш обмен.

    Стефан Ву

    Ответить
  5. Аватара СатишаСатиш

    На самом деле этот пост очень полезен для отладки веб-приложений на Android. Не думал об этом.

    Ответить
  6. Аватар Карен ДэвидсонКарен Дэвидсон

    Это очень информативный пост. Теперь мы можем удаленно отлаживать веб-приложения на Android.

    Ответить
  7. Аватар Джеймса СтивенсаДжеймс Стивенс

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

    По словам Стефана, изображения очень подробны, что упрощает выполнение инструкций.

    Ответить
  8. Аватар Питера ФордаПитер Форд

    Я искал способ отладить свой Samsung Galaxy S3. Думаю, я попал в нужное место, потому что ваше руководство действительно помогло, и мне удалось успешно отладить свое устройство. Большое спасибо за помощь.

    Ответить
  9. Аватара Махеша ШриваставыМахеш Шривастава

    Вау! Я не знал, что вы можете сделать это с моим телефоном Android.

    Благодаря!

    Ответить
  10. Аватар БетаниБетани

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

    Ответить
  11. Аватар АлисииАлиса

    Здравствуйте,

    Спасибо, наконец-то я выполнил отладку удаленно, очень полезно.

    Ответить

Добавьте свой комментарий Отменить ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены * *

Первичная боковая панель

Популярное

Как увеличить скорость широкополосного доступа в Windows

10 лучших Android-лаунчеров 2021 года

Что делать после установки Windows 10 - советы и рекомендации по Windows 10

10 лучших поисковых систем, которые можно использовать для частного поиска в Интернете

55 интересных фактов о компьютерах, которые поразят вас

На что обращать внимание при покупке ноутбука - Руководство по покупке ноутбука

Fusion Drive против SSD - вещи, которые вам никто не говорит о Fusion и SSD Storage

Полезные инструменты

• Grammarly - Бесплатная проверка грамматики
• SEMRush – Лучший инструмент SEO, которому доверяют эксперты
• Setapp – Единая подписка для Mac и iOS

Актуальные темы

  • Android
  • Интернет
  • iPhone
  • Linux
  • Макинтош
  • Охранник
  • Соцсети
  • Технологии
  • Windows

Стоит проверить

10 лучших звуковых эквалайзеров для Windows 10 (выпуск 2022 г.!)

14 лучших скинов VLC, которые настоятельно рекомендуются и бесплатные

сноска Logo Текстовый логотип нижнего колонтитула

нижний колонтитул

О нас

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

В TechLila наша основная цель - предоставить уникальную информацию, такую ​​как советы и рекомендации по качеству, учебные пособия, практические руководства по Windows, Macintosh, Linux, Android, iPhone, безопасности и несколько различных подтем, таких как обзоры.

Ссылки

  • О нас
  • Свяжитесь с нами
  • Дисклеймер
  • Персональные данные
  • Условия

Подписаться

Пользовательская тема с использованием Genesis Framework

Облачный хостинг от Cloudways

Язык

en English
bg Българскиzh-CN 简体中文nl Nederlandsen Englishtl Filipinofr Françaisde Deutschid Bahasa Indonesiait Italianoja 日本語pl Polskipt Portuguêsro Românăru Русскийsr Српски језикes Españolsv Svenskatr Türkçeuk Українськаvi Tiếng Việt

© Авторские права 2012–2023 ТехЛила, Все права защищены.