Fiddler를 활용한 모바일 웹 디버깅

안녕하세요. 오늘은 Fiddler를 통해 모바일 웹을 디버깅 하는 법에 대해서 포스팅 해보도록 하겠습니다. 보통 웹 업무를 하다보면 fiddler를 많이 사용하게 되는데 이번 작업을 하던 중 모바일 웹에서 기능 수정 한 부분에 대해서 확인해야 하는 상황이 있었습니다. 하지만 어떻게 해야 할지 도무지 감도 안 오고 그저 생각나는 방법은 '알파나 베타에 수정한 부분을 배포해서 확인을 해야하나?'였습니다. 하지만 fiddler를 사용하면 로컬환경에서도 모바일 웹을 디버깅 할 수 있다는 점! 지금 부터 시작하도록 하겠습니다.   1. Filddler란 무엇이냐  : "웹 트래픽을 모니터링, 조사, 조작할 수 있는 확장 기능을 갖춘 프리웨어 디버깅 프록시"라고 정리 되어 있는 글을 본 적이 있는데 말 자체가 너무 어렵네요. 단순히 말해 클라이언트와 서버가 요청과 응답을 한 번씩 주고 받은 세션의 목록을 보여주는 프리웨어라고 볼 수 있습니다. 말은 이렇게 단순히 했지만 피들러로 할 수 있는 일들은 어마어마 하다는 거  피들러로 할 수 있는 일    ⊙ 브라우저, 클라이언트 프로그램, 서비스 등에서 오고 가는 웹 트래픽을 볼 수 있다.    ⊙ 자동 또는 수동적인 방법으로 어떠한 응답이나 요청도 수정할 수 있다.    ⊙ HTTPS 트래픽을 복호화하여 살펴보거나 수정하는 것도 가능하다.    ⊙ 캡쳐한 트래픽을 저장하여 보관해 두고 후에 불러올 수도 있다. 다른 컴퓨터의 트래픽도 이런 식으로 다룰 수 있다.    ⊙ 클라이언트 프로그램으로 가는 응답을 이전에 캡쳐해 두어 서버가 오프라인 상태라 해도 응답을 재현할 수 있다.    ⊙ 맥/리눅스 시스템, 스마트폰, 태블릿 컴퓨터 등을 포함한 대부분의 PC와 모바일 기기에서 발생한 웹 트래픽을 디버깅할 수 있다.    ⊙ TOR 네트워크 등 프록시 서버에 업스트림(upstream)을 연결(chain)할 수 있다.    ⊙ 클라이언트 컴퓨터나 모바일 기기를 다시 설정하지 않고도 역 프록시(reverse proxy)로 동작하여 트래픽을 캡쳐할 수 있다.    ⊙ 피들러 스크립트나 .NET 기반 확장 모듈을 통해 새로운 기능을 추가할 수 있어 더 강력해질 수 있다.    그림을 통해 보면 내가 요청한 페이지에 대한 세션 정보와 해당 서버측에서 넘어온 세션 정보 등을 파악 할 수 있습니다. 그럼 이제 본격적으로 모바일 웹을 디버깅 하기 위해서는 어떤 설정들이 필요한지 알아 보도록 합시다.  2. 모바일 웹을 디버깅하기 위한 Fiddler의 설정 첫 번째  Fiddler를 키고  상단의 Tools > Fiddler Options 를 클릭하면 밑과 같은 창이 뜨는데 Connections 탭에서 Allow remote computers to connect 칸에 체크를 해줍니다. 말 그대로 외부 기기가 연결될 수 있도록 허용해주는 설정입니다.   2. 모바일 웹을 디버깅하기 위한 Fiddler의 설정 두 번째 ( 모바일 와이파이 설정 셋팅 )  Fiddler에서 위와 같은 설정을 맞췄다면 이제 해당 Fiddler에 붙기 위해 사용하고 있는 와이파이 설정을 해줘야 합니 다. 와이파이 설정을 들어가 고급 옵션 표시 항목에 체크를 하면 다음과 같은 화면을 볼 수 있습니다. 프록시를 수동으 로 바꿔주고 프록시 호스트 이름에 fiddler가 설치된 PC의 IP를 입력해 줍니다. 그리고 프록시 포트 부분에는 위의 그 림에서 Fiddler listens on port란에 쓰여있는 포트번호를 적어주고 저장해주면 됩니다.     3. 모바일 웹을 디버깅하기 위한 Fiddler의 설정 세 번 째 ( 로컬 환경으로 호스트 셋팅 ) 실제로 모바일 화면에서 웹을 띄워 내가 작성한 코드가 잘 수정되었는지 확인하기 위하여 fiddler에서 Host를 맞춰 줍니다. Fiddler 상단의 Tools를 누르면 HOSTS...라는 항목이 보이고 클릭하게 되면 Host Remapping이라는 창이 뜨게 되고 여기에 호스트 설정을 해주면 됩니다.     4. 모바일에서 접속해 보기  실제로 모바일로 작업하고자 하는 url에 접속하게 되면 fiddler에 내가 보낸 요청들의 세션이 찍히는 것을 볼 수 있다. 또한 로컬에서 디버깅으로 프로젝트를 띄워논 후 모바일로 해당 페이지에 접속하게 되면 디버깅이 걸려 들어오는 것 까지 확인할 수 있었다.    이렇게 Fiddler를 통해 모바일 웹을 테스트 할 수 있는 방법에 대해서 알아보았다. 혹시나 와이파이 설정 및 fiddler 설정을 다했는데도 제대로 접속이 안되는 경우 디바이스를 재부팅하거나 피들러를 다시 껏다 킨 후 다시 접속해 보기 바란다. 이상으로 이번 포스팅을 마치겠다.