웹 디버깅 프록시인 피들러에 대한 소개와 활용법

1. Fiddler :
웹 디버깅 프록시
김태곤

2. 피들러?

3. Fiddle [fídl] :
{타동사}
1. [곡을] 바이올린으로 켜다.
2. [장부, 숫자 등을] 속이다, 조작하다.[장부, 숫자 등을] 속이다, 조작하다.

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

5. 클라이언트
요청
응답
서버
피들러

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

7. Fiddler [fídlər] :
{명사}
웹 트래픽을 모니터링, 조사, 조작할 수 있는 확
장 기능을 갖춘 프리웨어 디버깅 프록시
{명사}
웹 트래픽을 모니터링, 조사, 조작할 수 있는 확
장 기능을 갖춘 프리웨어 디버깅 프록시

8. 0. 사용자 인터페이스

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

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

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

13. 1. 모니터링 및
트래픽 조사

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

15. 요청
응답

16. gzip 압축 등 HTTP 인코딩 해제

17. 보고

18. 싶은

19. 정보에
맞추어

20. 조사기

21. 선택

23. SyntaxView

24. 확장기능

26. 클라이언트
요청
응답
서버
HTTP 통신

27. 클라이언트
접속요청
접속응답
서버
HTTPS 통신
실제 데이터 통신
-_-?

28. 안 보여요 (feat. 강민경)

29. Tools Fiddler Options HTTPS 탭

30. HTTPS도

31. 캡쳐

32. 필요없는

33. 트래픽

34. 넌 나에게
쓰레기도 줬어

35. Rules Hide CONNECTs

37. Filters 탭을 사용하면
트래픽을 손쉽게
필터링 할 수 있다.
예) JS / CSS 차단,
플래시 차단 등

38. 드래그하여

39. 보고

40. 싶은

41. 창에

42. 드롭

44. 2. 트래픽 조작

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

46. 중단점 (Breakpoint)
1. Rules Automatic breakpoints 메뉴
2. 빠른 실행 상자에 bpu 또는 bpa 명령
3. Filters 탭
4. AutoResponder
5. 피들러 스크립트/확장 기능 사용

47. AutoResponder
미리 정한 규칙에 일치하는 서버의 응답을
임의의 템플릿으로 자동 대체하는 기능.
예) 로컬 파일, 다른 서버의 자원, 404 에러

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

49. 3. 확장 기능

50. 피들러 스크립트
(JScript.NET)
.NET 어셈블리
확장기능을 만드는 두 가지 방법

51. 피들러 스크립트로 할 수 있는 일
요청 / 응답 세션을 숨길 수 있다.
헤더나 본문을 수정할 수 있다.
메뉴를 추가할 수 있다.
외부 프로그램을 실행할 수 있다.

52. Rules Customize Rules... 실행

53. RulesString(MyStringRule, true)
RulesStringValue(MyMenuText1, MyValue1)
RulesStringValue(MyMenuText2, MyValue2)
RulesStringValue(한국어메뉴3, 값3)
public static var m_StringRule: String = null;
특성에는

54. 세미콜론

55. 사용안함
커스텀 메뉴 추가

56. if ( !Utilities.IsBinaryMIME(oSession.oResponse.MIMEType) )
{
oSession.utilDecoreResponse();
oSession.utilReplaceInResponse(-moz-, -ms-);
oSession.utilReplaceInResponse(-webkit-, -ms-);
}
CSS의 vendor prefix 수정
OnBeforeResponse...

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

58. 4. 활용팁

59. 모바일 기기 디버깅
텍스트외부에서의 접속을 허용

60. Tools Fiddler Options Connections

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

62. 인터넷 속도 시뮬레이션
인터넷 속도가 느리면
어떻게 동작하나

63. Before

64. After

65. 피들러를 리셋하는 법
Shift를 누르고 피들러 실행

67. 마치며
피들러 쓰세요.
두 번 쓰세요.

68. 감사합니다
김태곤 mygony.com
@taggon

69. 리소스
- 피들러 완벽 가이드 (지앤선)
- 제목 글꼴 : 한나체 (배달의민족)
- 본문 글꼴 : 나눔바른고딕 (네이버)
- 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/informationinformation_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