Whistle 도구로 디버깅하는 방법

📝 원클릭 설치

이 Whistle 설치 튜토리얼 을 참고하세요.

🖖 모바일 시나리오를 디버깅하는 방법

환경을 준비한 뒤 다음 단계를 따릅니다.

1단계: 네트워크 프록시 구성

동일한 로컬 네트워크, 즉 같은 WiFi에 연결되어 있는지 확인합니다.
WiFi 프록시 설정을 하고, 아래에서 프록시 정보를 가져와 Server와 Port를 연결합니다.

2단계: 인증서 설치

인증서를 올바르게 설치합니다. 「HTTPS」를 클릭해 QR 코드를 스캔하거나, 브라우저에서 위의 「IP:Port」 주소를 엽니다.

Android: CA 인증서 설치 진입점. 「인증서」로 검색합니다.

iOS: 인증서 설치 진입점. 「Profiles & Device Management」

앱 디버깅을 위해 프록시를 연결하는 방법

아래는 TikTok 앱의 WebView 화면을 디버깅하는 예입니다

기본 구성:

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 진입점을 찾아 현재 WebView의 Useragent를 확인합니다. 예: 「Settings and Privacy」 / 「Support」 / 「Help Center」
support.tiktok.com/ redirect://https://www.whatsmyua.info
# 비즈니스 시나리오로 리다이렉트해 실행
# support.tiktok.com/ redirect://https://www.xxx.com/xxx

프록시 전에 표시되는 내용:

프록시 성공 후 리다이렉트된 페이지:

vConsole, eruda, mdebug 같은 H5 페이지 디버깅 도구 플러그인을 통합하는 방법

플러그인 설치


npm i -g whistle.inspect

플러그인 구성


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