Как отлаживать с помощью инструмента Whistle?

📝 Установка в один клик

См. этот учебник по установке Whistle .

🖖 Как отлаживать мобильные сценарии

После подготовки окружения выполните следующие шаги:

Шаг 1: Настроить сетевой прокси

• Убедитесь, что вы в одной локальной сети, то есть подключены к одному и тому же WiFi.

• Настройте прокси WiFi: возьмите сведения о прокси ниже и свяжите Server и Port.

  

Шаг 2: Установить сертификат

Установите сертификат корректно: нажмите «HTTPS», чтобы отсканировать QR-код, или откройте браузер и перейдите по адресу «IP:Port» выше.

Android: точка установки CA-сертификата, поиск по слову «сертификат»

iOS: точка установки сертификата, «Profiles & Device Management»

Как связать прокси для отладки приложений?

Ниже — пример отладки интерфейса WebView в приложении TikTok

Конфигурация по умолчанию:

Добавить группу Rules:

# Весь трафик идёт через локальный прокси; здесь нужен VPN
* socks://127.0.0.1:4781
# Конфигурация для TikTok
disable://capture *.tiktok.com *.tiktokv.com *.byteoversea.com *.apple.com *.tiktokv.us *.us.tiktokv.com
# Найти вход в WebView, проверить Useragent текущего WebView, примеры: «Settings and Privacy» / «Support» / «Help Center»
support.tiktok.com/ redirect://https://www.whatsmyua.info
# Перенаправить для выполнения бизнес-сценария
# support.tiktok.com/ redirect://https://www.xxx.com/xxx

Содержимое до прокси:

Страница после успешного прокси и перенаправления:

Как интегрировать плагины инструментов отладки H5-страниц вроде vConsole, eruda, mdebug?

Установить плагин

npm i -g whistle.inspect

Настроить плагин

www.baidu.com/ whistle.inspect://eruda
www.baidu.com/ whistle.inspect://vconsole
www.baidu.com/ whistle.inspect://mdebug