Использование Chrome на мобильном устройстве для чтения HTML-файлов на ПК через USB?

Question

В настоящее время я занимаюсь разработкой приложения для веб-страницы и хочу протестировать его на своем мобильном устройстве (в частности, на Android).Мне нужно запустить его на реальном устройстве, и просто проверить его с помощью эмулятора на ПК Chrome недостаточно.Я знаю, как использовать ADB для проверки результатов выполнения на ПК, когда я открываю URL на своем телефоне, что очень полезно;однако каждый раз, когда я изменяю веб-страницу, мне все равно нужно загружать файлы на удаленный сервер, чтобы Chrome на моем телефоне открывал его.Интересно, есть ли способ использовать мой телефон для прямого открытия файла HTML на моем ПК, когда они подключены через USB?Спасибо.

Answer 1

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

Сначала подключите ваше устройство, как обычно, как в ответе Ангуса.Уловка - другая особенность Chrome DevTools, переадресация портов.Перейдите на вкладку Удаленные устройства , затем Настройки и установите флажок Переадресация порта .Я буду использовать порт 8000 для обеих сторон здесь, но вы можете изменить их, если хотите.Нажмите Добавить правило и заполните 8000 для порта устройства и localhost:8000 для локального адреса.Подтвердите, и ваш порт переадресации настроен.

Что касается сервера, если вы просто хотите простое зеркало каталога, я рекомендую использовать что-то вроде Модуль Python SimpleHTTPServer (http.server в Python 3), который вы можете запустить следующим образом из целевого каталога:

python -m SimpleHTTPServer
python3 -m http.server

После запуска сервера вы можете открыть новую вкладку на телефоне или в Chrome с URL-адресом localhost:8000 или любым другимпорт, который вы использовали для устройства.Все файлы в этой структуре будут доступны.

Подробнее: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server

Answer 2

Ответ: Chrome’s Remote Debugging

Удаленная отладка Chrome позволяет вам подключить инструменты разработчика Chrome вашего компьютера к устройству Android под управлением мобильного Chrome.Благодаря этому у вас есть полный доступ к инструментам разработчика Chrome для вашего мобильного браузера!

Что вам потребуется:

Браузер Chrome на вашем компьютере Мобильный браузер Chrome работает на вашем устройстве Android (Android 4.0 и выше) USB-кабель (и, возможно, драйверы для вашего мобильного устройства уже установлены на вашем компьютере)

Шаг 1. Найдите мобильное устройство с помощью Chrome

Подключите мобильное устройство ктвой компьютер.На мобильном устройстве перейдите в «Настройки»> «Параметры разработчика» и включите отладку по USB.

Не видите параметры разработчика?Перейдите в «Настройки»> «О телефоне» и несколько раз нажмите «Номер сборки».Вы должны получить подсказку с количеством оставленных кликов, чтобы «стать разработчиком» ?.

На вашем компьютере запустите Chrome, а затем инструменты разработчика (Cmd / Ctrl + Opt / Alt + i).).В строке с различными вкладками нажмите на три точки справа, чтобы загрузить дополнительные параметры.Там в разделе «Дополнительные инструменты» вы найдете опцию «Удаленные устройства».

Подключите мобильное устройство к компьютеру;это немедленно бросило бы приглашение авторизации на это.Пока вы не разрешите это, устройство будет в состоянии Pending Authorization в инструментах разработки.Нажмите OK.

Пока вы не подтвердите, устройство будет в состоянии «Ожидание авторизации». Теперь устройство авторизовано и готово к работе!Инструменты разработчика Chrome теперь должны перечислить имя и тип вашего устройства.

Шаг 2. Проверка

После того, как вы закончите настройку, вы можете проверять вкладки непосредственно наChrome вашего компьютера!

Запустите Chrome на вашем мобильном устройстве.Нажмите на название вашего устройства в Chrome Developer Tools на вашем компьютере.В нем должны быть перечислены различные вкладки, которые вы открыли на своем мобильном устройстве.Нажмите кнопку «Проверить» для вкладки, которую вы хотите отладить.Chrome должен открыть новое окно с версией вкладки вашего мобильного браузера в режиме реального времени слева и всеми обычными инструментами разработчика справа.

И это все!10

Теперь у вас есть доступ ко всем возможностям отладки инструментов разработчика ... теперь для вашего мобильного устройства!

Источник и учебник с изображениями: Отладка вашего сайта на мобильном устройстве