fiddler: 웹 디버깅 프록시

Fiddler :웹 디버깅 프록시

김태곤

피들러?

Fiddle [fídl] :

{타동사}

1. [곡을] 바이올린으로 켜다.

2. [장부, 숫자 등을] 속이다, 조작하다.[장부, 숫자 등을] 속이다, 조작하다.

[웹 트래픽을] 속이다, 조작하다.

클라이언트

요청

응답

서버

피들러

모니터링 / 조사트래픽 조작 기능 확장

Fiddler [fídlər] :

{명사}

웹 트래픽을 모니터링, 조사, 조작할 수 있는 확장 기능을 갖춘 프리웨어 디버깅 프록시

{명사}

웹 트래픽을 모니터링, 조사, 조작할 수 있는 확장 기능을 갖춘 프리웨어 디버깅 프록시

0. 사용자 인터페이스

세션 목록

클라이언트와 서버가 요청과 응답을 한 번씩 주고 받은 세션의 목록

기능 탭

선택한 세션 조사, 세션 필터링, 로그, 요청 작성 등의 기능을 제공

빠른 실행

단축키(Alt+Q)를 누른 후 명령어를 직접입력하여 기능을 빠르게 실행

1. 모니터링 및

트래픽 조사

F12를 누르거나 File > Capture Traffic을 클릭하면트래픽 캡쳐를 끄거나 켠다.

요청

응답

gzip 압축 등 HTTP 인코딩 해제

보고����������� ������������������  싶은����������� ������������������  정보에

맞추어����������� ������������������  조사기����������� ������������������  선택����������� ������������������  

SyntaxView����������� ������������������  확장기능

클라이언트

요청

응답

서버

HTTP 통신

클라이언트

접속요청

접속응답

서버

HTTPS 통신

실제 데이터 통신

-_-?

안 보여요 (feat. 강민경)

Tools > Fiddler Options > HTTPS 탭

HTTPS도����������� ������������������  캡쳐

필요없는����������� ������������������  트래픽

넌 나에게

쓰레기도 줬어

Rules > Hide CONNECTs

Filters 탭을 사용하면트래픽을 손쉽게필터링 할 수 있다.

예) JS / CSS 차단,플래시 차단 등

드래그하여����������� ������������������  보고����������� ������������������  싶은����������� ������������������  창에����������� ������������������  드롭

2. 트래픽 조작

중단점 (Breakpoint)

요청 또는 응답을 조작할 수 있도록 세션을일시적으로 중단시키는 지점.

중단점 (Breakpoint)

1. Rules > Automatic breakpoints 메뉴

2. 빠른 실행 상자에 bpu 또는 bpa 명령

3. Filters 탭

4. AutoResponder

5. 피들러 스크립트/확장 기능 사용

AutoResponder

미리 정한 규칙에 일치하는 서버의 응답을임의의 템플릿으로 자동 대체하는 기능.

예) 로컬 파일, 다른 서버의 자원, 404 에러

AutoResponder

훨씬 더 간단하게 응답을 수정할 수 있다.

3. 확장 기능

피들러 스크립트(JScript.NET)

.NET 어셈블리

확장기능을 만드는 두 가지 방법

피들러 스크립트로 할 수 있는 일 요청 / 응답 세션을 숨길 수 있다.

헤더나 본문을 수정할 수 있다.

메뉴를 추가할 수 있다.

외부 프로그램을 실행할 수 있다.

Rules > Customize Rules... 실행

RulesString("MyStringRule", true)RulesStringValue("MyMenuText1", "MyValue1")RulesStringValue("MyMenuText2", "MyValue2")RulesStringValue("한국어메뉴3", "값3")public static var m_StringRule: String = null;

특성에는����������� ������������������  세미콜론����������� ������������������  사용안함

커스텀 메뉴 추가

if ( !Utilities.IsBinaryMIME(oSession.oResponse.MIMEType) ){ oSession.utilDecoreResponse(); oSession.utilReplaceInResponse("-moz-", "-ms-"); oSession.utilReplaceInResponse("-webkit-", "-ms-");}

CSS의 vendor prefix 수정

OnBeforeResponse...

울지마세요, 파일을 지우면 리셋되니까요.

4. 활용팁

모바일 기기 디버깅

텍스트외부에서의 접속을 허용

Tools > Fiddler Options > Connections

설정 > Wi-Fi > 네트워크 선택 > HTTP PROXY

인터넷 속도 시뮬레이션

인터넷 속도가 느리면

어떻게 동작하나

Before

After

피들러를 리셋하는 법

Shift를 누르고 피들러 실행

마치며피들러 쓰세요.

두 번 쓰세요.

감사합니다김태곤 mygony.com

@taggon

리소스

- 피들러 완벽 가이드 (지앤선)

- 제목 글꼴 : 한나체 (배달의민족)

- 본문 글꼴 : 나눔바른고딕 (네이버)

- http://www.flickr.com/photos/swolfe/5752805429

- https://www.iconfinder.com/iconsets/picons-social

- https://www.iconfinder.com/iconsets/49handdrawing

- https://www.iconfinder.com/icons/43414/apple_ipad_touch_screen_icon

- https://www.iconfinder.com/iconsets/free-wood-button-icons ( by Aha-soft )

- http://computercountry.ca/index.php?route=information/information&information_id=7

- http://www.flickr.com/photos/usnavy/5433829255

- http://www.flickr.com/photos/lenore-m/2514975647

- http://500px.com/photo/44613780

- http://www.flickr.com/photos/andercismo/2349098787

- http://500px.com/photo/7147613

- http://500px.com/photo/41126396

- http://www.flickr.com/photos/69203469@N00/10256644

- http://500px.com/photo/22404545

- http://www.flickr.com/photos/9844735@N07/8136442817

- http://500px.com/photo/31514675

- http://500px.com/photo/33898953