fiddler: 웹 디버깅 프록시
DESCRIPTION
웹 디버깅 프록시인 피들러에 대한 소개와 활용법TRANSCRIPT
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