반응형

웹 브라우저의 경우 각 브라우저 별 개발자 도구가 잘 갖춰져 있어 서버로부터 넘어온


자바스크립트 및 css, html파일 등을 확인해 바로바로 수정/조작 해 볼 수 있지만


스마트폰에서 css도 조작하거나 깨진 마크업이 왜 그런지 확인해보고 싶지만 엄한 폰에다 대고 우클릭하고 요소검사를 해볼 수 없으니


정말 막막하죠.. 그래도 해결책은 있는 법! 


웹이든 모바일이든 네트워크를 통하는 모든 세션들을 검사해볼 수 있는 Fiddler아시나요? 


Fiddler가 가진 기능은 정말 엄청나네요 (심지어 https 통신도 잡아낼 수 있습니다!!!)


*Fiddler는 윈도우에서만 사용가능합니다. 


*맥이나 기타 OS에서는 프록시(윈도우를 통해 우회)를 통해서 가능하긴 합니다. (아래 프록시 연결에 설명드리겠습니다.)


어찌됬건 이제 모바일 디바이스로 전송되는 세션(html, css, javascript 파일들을 포함한 네트워크를 통하는 모든 데이터)을 Fiddler를 통해 잡아보겠습니다! 


1. fiddler 다운로드 를 클릭하세요



2. 다운로드한 파일 설치합시다.! 그냥 next 연타 하시면 되겠습니다.


3.  Fiddler 실행! 실행하면 아래와 같은 창이 뜹니다. 



여기서 왼쪽 부분이 세션 목록으로 네트워크로 전송하거나 받은 모든 세션이고, 


오른쪽은 기능 탭으로 특정 세션을 선택하면 그 세션에 대한 상세 내역이 나옵니다.


피들러를 실행한 뒤 인터넷 창을 켜보면 순식간에 어마어마한 세션들이 전송됨을 확인할 수 있습니다.


(트래픽을 멈추고 싶을 때 F12 또는 File> Capture traffic으로 멈출 수 있습니다.)


4. 모바일 디바이스를 위한 프록시 설정


*프록시: 여기서 말하는 프록시는 간단히 말해 검문소로 생각하시면 됩니다. (비유가 적절하지 않을 순 있지만 이해를 위해;;) 


스페이스 닷원 건물에 나가거나 들어오려면 입구(검문소)를 지나야 하듯 


네트워크를 통하는 모든 녀석이 Fiddler를 통해 나가고 들어온다고 생각 할 수 있습니다


Fiddler Menu창에서 Tools > Fiddler Options 선택



세번째 Connections 탭 선택 후 'Allow remote computers to connect' 체크 활성화시켜주시고, 


fiddler listens on port: 부분에 8888 (기본)으로 해주시면 됩니다.




여기까지 윈도우에서 설정하는 것이 끝입니다. 


Fiddler를 한번 껏다가 다시 켜 줍니다.(중요)


그 다음은 모바일이나 맥(아이폰 또는 안드로이드)에서 설정해주는 일만 남았습니다.


모바일 디바이스 프록시 설정


iPhone/iPad


1. 설정

2. 네트워크

3. wifi

4. 연결된 네트워크에서 우측 화살표 선택

5. 밑으로 내리면 "http 프록시" 부분이 있는데 기본 '끔' 에서 "수동"으로 변경

6. 서버 부분에 Fiddler를 설치한 PC ip 입력

7. 포트 부분에 8888 입력


안드로이드


1.환경설정

2.Wi-Fi

 3.연결된 무선네트워크를 길게 누르고 있으면 뭔가 뜨는데 '네트워크 설정 변경'을 선택


4.최하단 고급옵션표시 체크

5.'프록시 설정'을 '수동' 으로 변경


6. '프록시 호스트 이름'에 Fiddler를 설치한 PC의 IP 입력,


7. '프록시 포트'에 8888 입력


8. 나머지는 건들것 없지만 사내 네트웍이므로 계정/비밀번호를 입력해줘야 합니다.



1. 시스템 환경설정

2. 네트워크

3. (연결된 네트워크에서) 고급

4. '프록시탭' 선택

5. 웹프록시(HTTP) 체크

6. 프록시 서버의 주소와 포트번호를 입력

7. 아이디와 계정을 입력


이렇게 설정을 하고 모바일에서 Daum앱으로 접속 하면 Fiddler에 m.daum.net에서 온 세션들이 막 보입니다!!



먼저 m.daum.net에서 넘겨 받은 html을 선택하고 오른쪽 기능 탭에서 'Inspectors'를 선택하면



우측 윗부분이 제가 요청한 내용이고 아래 부분이 다음 서버가 응답한 내용입니다.


보라색이 css 녹색이 javascript 파랑색이 html이고 회색이 image입니다. 


이 외에도 특정 파일만 걸러내는 필터라든가 breakpoint 등이 있습니다.



반응형

+ Recent posts