localhost 개발하는거 폰에서 보는 법

실제로 폰에서 테스트하면서 실시간으로 로그를 보고싶을때가 있음. 이때 쓰는 조흔 방법을 써봄.

 

1. 해당 사이트 들어감

chrome://inspect/#devices

저걸 그대로 주소창에 치면 된다.

 

그리고 usb 케이블과 핸드폰을 연결하면 좀 기다리면 아래와 같이 뭔가가 뜬다.

폰과 컴퓨터는 같은 네트워크여야함

 

 

2. inspect 누름

그러면 새로운 창이 뜨는데 아래와 창이 화면과 로그를 볼 수 있음. 이제 핸드폰으로 이것저것 해보면 로그가 찍힘.

 

단점은 뭔가... 좀 느림. 한창 이거 볼때는 괜찮은데 탭 껐다가 다시 켰다가 하면 뭔가 인식하는데 한참 걸려서 개빡침.

 

번외) 핸드폰으로 localhost:3000, 8080들어가니까 안뜨는데 어캄?ㅜ

cmd창 - ipconfig 입력 - IPv4 주소랑 포트를 조합해서 폰으로 접속하면 된다.

만약 내 아이피가 122.133.0.1이고 localhost:8080으로 개발하고 있었다면 122.133.0.1:8080으로 들어가면 된다. 그리고 폰과 컴터는 같은 인터넷 연결하기.

 

 

+vite에서 접속하는 법

vite로 된 프로젝트를 켜고 localhost:3000 대신 122.133.0.1:3000이렇게 접속하면 안될 것이다. 이 경우 package.json을 바꿔줘야함.

"scripts": {
  "dev": "vite --port 3000 --host 122.133.0.1",
 },

이렇게 하면 될것이로다.