로컬 PC 서버를 모바일에서 디버깅하기

00_8_3·2022년 6월 13일
0

디버깅하기

윈도우 Node 서버를 IOS 사파리/크롬으로 디버깅

같은 망인가?

yes

아이폰 + 맥

같은 네트워크(와이파이)가 아니어도 USB 케이블 연결로 가능

no

1. 아이폰 + 윈도우

무조건 같은 네트워크 + Web Inspector 활성화 되어있어야함.

2. Ngrok

ngrok으로 로컬 PC port를 인터넷에 Expose

> 윈도우에서 아이폰 Safari Web Inspector 활성화 불가

해결 1. Ngrok 사용

로컬 Server의 Port를 인터넷으로 Expose 해준다.

미로그인 시 8시간 세션만 제공

사용방법

  1. node 서버 열기
    80포트
  2. ngrok http 80
    로컬 80포트로 접근 가능한 도메인을 제공해줌. 무료버전은 도메인이 계속 바뀜.

    https://e998-211-36-157-202.jp.ngrok.io

  3. 아이폰으로 도메인 접속
  4. 아이폰으로 크롬 chrome://inspect 접속
  5. ngrok 도메인에서 이벤트 발생 시 chrome://inspect 에서 로그 확인가능.

해결 2. wsl2 방화벽 해제 및 포트포워딩

방화벽 정책 확인
제한이면 풀어줘야함

PS C:\> Get-ExecutionPolicy
Restricted

PS C:\> Set-ExecutionPolicy RemoteSigned
PS C:\> Get-ExecutionPolicy
RemoteSigned

파워쉘스크립트 작성

아래의 ports에 열어둘 포트 작성
addr이더넷 어댑터 vEthernet (WSL)의 IPv4를 작성해주고

$remoteport = bash.exe -c "ifconfig eth0 | grep 'inet '"
$found = $remoteport -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';

if( $found ){
  $remoteport = $matches[0];
} else{
  echo "The Script Exited, the ip address of WSL 2 cannot be found";
  exit;
}

#[Ports]
#All the ports you want to forward separated by coma
$ports=@(80, 1000,2000,3000,5000);


#[Static ip]
#You can change the addr to your ip config to listen to a specific address
$addr='0.0.0.0';
$ports_a = $ports -join ",";


#Remove Firewall Exception Rules
iex "Remove-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' ";

#adding Exception Rules for inbound and outbound Rules
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort $ports_a -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort $ports_a -Action Allow -Protocol TCP";

for( $i = 0; $i -lt $ports.length; $i++ ){
  $port = $ports[$i];
  iex "netsh interface portproxy delete v4tov4 listenport=$port listenaddress=$addr";
  iex "netsh interface portproxy add v4tov4 listenport=$port listenaddress=$addr connectport=$port connectaddress=$remoteport";
}

파워셀에서 스크립트 실행 해주고 모바일로 Local PC IP로 접근시 wsl2 ip로 포워딩

PS C:\> ./test.ps1

포트 확인방법

$ netsh interface portproxy show all // 전체 보기
$ netsh interface portproxy reset // 초기화 방법

단점

cmd 또는 powershell과 WSL2를 번갈아 가며 사용하는 경우
portproxy로 잡혀있는 포트를 해제하거나 잡아주거나 하는 번거러움이 있음

wsl2 이더넷 ip로 포트포워딩 되어있는 포트를 powershell에서 사용 불가, 사용하려면 해제해야함

해결 3. weinre 사용하기

  • 2022-06-27 추가

<script src="http://192.168.x.x:8080/target/target-script-min.js"></script>

$ npm i -g weinre
$ weinre --boundHost 192.168.x.x // 내 pc ip, 기본포트 8080 // 디버깅 할 페이지와 다른 포트

PC 브라우저에 192.168.x.x:8080/client 접속 후
디버깅 할 페이지를 새로고침(모바일)하면 브라우저 페이지의 콘솔에서 디버깅 가능.

https://stackoverflow.com/questions/15956974/setting-up-weinre-remote-debugging

출처

AOS

https://developer.chrome.com/docs/devtools/remote-debugging/
https://raygun.com/blog/debug-android-chrome/

IOS

https://davidlozzi.com/2022/03/23/debugging-safari-chrome-on-your-iphone-ipad-ios-device/

node http 서버

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Node_server_without_framework

wsl2

https://webisfree.com/2021-07-14/wsl2-%EC%99%B8%EB%B6%80-remote-ip-%EC%A0%91%EC%86%8D-%EA%B0%80%EB%8A%A5%ED%95%98%EB%8F%84%EB%A1%9D-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%EB%B0%A9%ED%99%94%EB%B2%BD-%ED%95%B4%EC%A0%9C

https://blog.aaronroh.org/118

0개의 댓글