9102, вы все еще не можете отладить реальную машину на мобильном терминале?

Сложность отладки на мобильных устройствах

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

Итак, есть ли способ сделать отладку адаптации мобильного терминала такой же интуитивно понятной, как отладка ПК-терминала? Эта статья призвана предоставить вам методы отладки на мобильной стороне, надеясь открыть для вас новую дверь.

В этой статье будут представлены три реальных метода отладки машины, вы можете выбрать свой любимый ~

Другие статьи можно нажать: GitHub.com/Иветт Л.А. Ю/Б…

Метод отладки реальной машины мобильного терминала

отладка реальной машины в хроме
отладка
отладка шпионского отладчика

Кратко объясните преимущества и недостатки каждого метода:

Первый тип: отладка реальной машины Chrome, существует большое ограничение, заключающееся в том, что при первом использовании chrome://inspect/#devices chrome фактически необходимо загрузить некоторые инструменты для поддержки, эти инструменты недоступны во внутренней сети, Нужно пройти через стену. Но самое большое преимущество: просто и быстро.

Второй: метод отладки weinre, установка и приложение не сложны, и он подходит для отладки на всей платформе, то есть можно отлаживать любой браузер любого мобильного телефона, но мобильный телефон и компьютер должны быть под тот же сегмент сети.

Третий тип: spy-debugger, установка немного сложнее, spy-debugger интегрирует weinre, но также добавляет инструмент захвата пакетов, который наиболее удобен в использовании.

Начнем с подробного описания того, как использовать эти три метода отладки:

1. Отладка реальной машины Chrome

Загрузите браузер Chrome на мобильный телефон, подключитесь к ПК с помощью USB и включите режим отладки USB мобильного телефона. Затем откройте браузер Chrome на ПК, введите в адресной строке: chrome://inspect, отметьте «discovery usb device». Затем просмотрите веб-страницу на мобильном телефоне, вы увидите следующую страницу, нажмите «Проверить» для отладки. (Поскольку мой рабочий компьютер добавлен в домен, потому что этот метод нельзя использовать, если есть детская обувь в той же ситуации, что и я, вы можете рассмотреть возможность использования двух других методов отладки)

2. Отладка реальной машины

Weinre (WebInspector Remote) — это инструмент удаленной отладки, основанный на Web Inspector (Webkit). С помощью сети можно напрямую отлаживать удаленные страницы, работающие на мобильных устройствах, на ПК.

Локальный сервер: вы можете использовать http-сервер, tomcat и т. д., или вы можете использовать службы, интегрированные в компилятор.

установить

Установить глобально: npm install –g weinre

Частичная установка: npm install weinre

Начало: weinre --httpPort 8090 --boundHost -all-

Если это локальная установка, вам нужно добавить node_modules/.bin/ впереди

Я считаю, что фронтенд детской обуви будет использовать инструмент управления пакетами npm.Для этого инструмента я не буду его расширять.Если npm не установлен, установите его самостоятельно.

описание параметра запуска weinew:

httpPort: установите номер порта, используемый Wninre, по умолчанию 8080.
boundHost: [имя хоста | Ip | -all-]: по умолчанию — «localhost».
debug [true | false]: эта опция похожа на --verbose и выводит больше информации. По умолчанию ложно.
readTimeout [секунды] : тайм-аут для отправки сервером информации цели/клиенту, по умолчанию 5 секунд.
deathTimeout [секунды] : значение по умолчанию в 3 раза превышает время ожидания чтения.Если страница не отвечает по истечении этого времени, соединение будет разорвано.

Порт 8080 используется часто, поэтому я решил указать порт 8090.

После запуска weinre мы вводим в браузере localhost: 8090. Отображается следующий интерфейс, указывающий на то, что запуск прошел успешно.

Щелкните пользовательский интерфейс клиента отладки, чтобы открыть страницу отладки.

Содержимое текущих целей пусто.

Теперь нам нужно выполнить еще одну операцию, добавить скрипт на страницу, которую мы хотим отлаживать.

<script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>

Не забудьте заменить localhost на свой IP-адрес.

Затем мы запускаем сервер локально, это может быть сервер, интегрированный в IDE, или http-сервер, я использую http-сервер После запуска мы получаем доступ к веб-странице для отладки на мобильном телефоне. Затем вы обнаружите, что записи были добавлены в цели.

На этом этапе мы можем нажать «Элементы» для отладки.

Когда вы измените стиль, он сразу же вступит в силу на мобильном телефоне, а также вы сможете просматривать информацию консоли, единственное, что вы не можете выполнять отладку точек останова.

Наконец, не забудьте удалить встроенный скрипт после отладки.

В дополнение к этому методу также введено сохранение куска JS-кода на мобильном телефоне, и когда вам нужно отладить страницу, нажмите, чтобы выполнить JS, но теперь браузер больше не поддерживает этот метод из соображений безопасности. Метод по умолчанию — поиск, а не выполнение, поэтому это нежелательно.

3. шпион-отладчик, отладка реальной машины

Наконец, давайте представим метод шпиона-отладчика. С помощью этого метода нам больше не нужно самим добавлять и удалять скрипты.

Spy-debugger интегрирует weinre внутри и перехватывает весь код js, требуемый html, для автоматического внедрения weinre через прокси. Упрощает необходимость для weinre добавлять код js на каждую отлаживаемую страницу. Принцип шпионского отладчика заключается в том, чтобы перехватывать все запросы html-страницы для внедрения кода js, требуемого weinre. Сделайте отладку страницы более удобной.

характеристика:

Отладка страницы + захват пакетов
легко использовать
HTTPS поддерживается.
spy-debugger объединяет weinre, node-mitmproxy и AnyProxy.
Автоматически игнорировать запросы https, инициированные собственными приложениями, и перехватывать только запросы https, инициированные webview. Это не влияет на собственные приложения, использующие технологию закрепления SSL.
Может использоваться с другими прокси-инструментами (по умолчанию используется AnyProxy)

Установка и использование Spydebugger

Установка: Установить глобально npm install –g spy-debugger
Начало: шпион-отладчик
Настройте HTTP-прокси вашего телефона

Адрес агента — это IP-адрес ПК, а порт агента — порт запуска шпиона-отладчика (порт по умолчанию: 9888).Порт по умолчанию — 9888.

Если вы хотите указать порт: spy-debugger –p 8888

Шаги настройки Android: Настройки - WLAN - долгое нажатие для выбора сети - изменить сеть - дополнительно - настройки прокси - вручную

Шаги настройки прокси-сервера iOS: Настройки - Беспроводная локальная сеть - Выбрать сеть - Руководство по HTTP-прокси
Сертификат установки мобильного телефона (корневой сертификат CA node-mitmproxy)

Шаг 1: Создайте сертификат:

Создайте корневой сертификат ЦС.Корневой сертификат создается в каталоге /Users/XXX/node-mitmproxy/ (Mac).
```
spy-debugger initCA
```
Шаг 2: Установите сертификат:

Перенесите файл node-mitmproxy.ca.crt из папки node-mitmproxy на телефон и нажмите «Установить».

Шпион-отладчик запускает интерфейс, аналогично после обновления страницы на мобиле будут записи в таргетах

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

Суммировать:

chrome inspect имеет ограниченные сценарии применения
Weinre прост в установке, вам нужно добавлять и удалять скрипты во время использования, это не применимо, если есть много страниц отладки.
Установка шпиона-отладчика немного сложнее, но сам процесс его использования очень приятен.

Спасибо, что потратили свое драгоценное время на чтение этой статьи. Если эта статья немного помогла вам или вдохновила вас, не скупитесь на лайки и звезды. Это, безусловно, самая большая мотивация для меня двигаться вперед.GitHub.com/Иветт Л.А. Ю/Б…

Рекомендуется обратить внимание на мой публичный номер