같은 네트워크(와이파이)가 아니어도 USB 케이블 연결로 가능
무조건 같은 네트워크 + Web Inspector 활성화 되어있어야함.
ngrok으로 로컬 PC port를 인터넷에 Expose
> 윈도우에서 아이폰 Safari Web Inspector 활성화 불가
로컬 Server의 Port를 인터넷으로 Expose 해준다.
미로그인 시 8시간 세션만 제공
https://e998-211-36-157-202.jp.ngrok.io
chrome://inspect
접속chrome://inspect
에서 로그 확인가능.방화벽 정책 확인
제한이면 풀어줘야함
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에서 사용 불가, 사용하려면 해제해야함
<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
https://developer.chrome.com/docs/devtools/remote-debugging/
https://raygun.com/blog/debug-android-chrome/
https://davidlozzi.com/2022/03/23/debugging-safari-chrome-on-your-iphone-ipad-ios-device/
https://developer.mozilla.org/en-US/docs/Learn/Server-side/Node_server_without_framework