Fiddler를 사용 하 여 프런트 엔드 생산성 (케이스)

이전 기사 (소개), 우리는 fidhttp://www.aliyun.com/zixun/aggregation/16504.html와 간단한 접촉 했다 "> dler 웹 디버거". 아마도 당신은 피 들러 디버깅에 사용할 HTTP 관련,이 하나에 우리 피 들러 매직의 예제에서 배울 것입니다 하기 시작 했습니다.

서버 문제에 css/javascript 파일을 수정 하려면 필요 발견 우리의 프런트 엔드 개발의 일상 업무에 그것은 일상 이다. 일반적으로, 우리는 파일을 수정 하 고 다음 다시 게시, 쉽게 프로덕션 환경의 안정성에 영향을 미칠 수 있는 필요가 있다. 더 일반적으로, 우리는 파일을 수정 하 고 개발 환경에서 유효성을 검사 후 프로덕션 환경에 게시. 비록 안전, 하지만 더 성가신. 피 들러의 HTTP 데이터를 수정할 수 있는 기능, 우리는 "수정-확인-게시" 프로덕션 환경에 따라 매우 민첩 합니다.

우리는이 페이지와 문제를 발견, 가정 참조 된 JS 파일 (http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102)을 수정 해야 합니다.

팁:이 캐시 된 콘텐츠 (결과 코드는 200) 반환 다음 단계를 저장할 수 있도록 좋습니다. 그것은 당신이 200이 아닌 경우 중요 하지 않습니다, 그리고 당신은 그냥 로컬 하드 드라이브에이 파일을가지고 있다.

이 JS 세션에서 마우스 오른쪽을 클릭, 선택 "저장-응답-응답 본문...", JS 파일의 내용을 로컬에 저장. 위치를 기억 하 고 우리가이 저장 된 파일을 사용 합니다.

자동 응답 탭 설정을 엽니다. 인터페이스에서 두 확인란 보이나요? 첫 번째 설정 또는 자동 리디렉션을 사용 하지 않도록 설정 하는 것입니다 그리고 우리 아래 리디렉션 규칙을 추가할 수 있습니다. 두 번째 체크 박스에는 때 우리가 다루고 있는 조건을 충족 하지 않는 요청을 영향을 주지 않습니다.

우리 "추가..." 버튼을 통해 수동으로 규칙을 추가할 수 있습니다 하지만이 URL은 이미 우리의 세션 목록에 직접 끌어 올 수 있습니다. 왼쪽에 세션 목록에서 세션 당신이 첫 번째 단계에서 발견 하 고 자동 회신 탭을 끌어 선택 합니다. 이이 URL에 대 한 규칙을 만듭니다.

그 피 들러 도움이 생성 하는 규칙은:

를 반환 세션 4로 정확 하 게 동일한 콘텐츠를 사용 하 여

우리는이 규칙을 수정 해야

반환 본문 내용으로 로컬 파일을 선택 하려면 "파일... 찾기"를 선택 합니다.

우리 그냥 저장 하는 파일을 선택 합니다.

브라우저 페이지를 새로 고침,이,이 세션의 배경 같은 경우 세션 목록 보고는 회색, 그래서 축 하, 로컬 파일을 성공적으로이 요청 넘어 옴!

팁: 브라우저 파이어 폭스를 사용 하는 경우 먼저 캐시를 지우려면 임시 파일, 때문에 기억 파이어 폭스 캐시 되는 실제, 판사 파일의 캐시 만료 되지 않은, 그것은 요청을 전송 하지 것입니다, 피 들러 얻을 수 없을 때.

테스트를 위해 로컬 파일 수정

우리 지역 JS 파일에 경고 ('Hello')를 추가

브라우저를 새로 고침, 다음 성공 밖으로 경고 하는 경우 효과 참조 하십시오.

계속 파일을 수정 하 고 테스트, 후 우리 후 문제를 성공적으로 복구 되었습니다 수정된 된 파일을 게시할 수 있게 됩니다.

요약: 자동 리디렉션을 피 들러의 가장 실용적인 기능, 어디에 규칙을 설정할 수 있습니다, 자유롭게 검색 (기본값)을 사용 하 여 정확한 일치 (EXACT), 정규식 (REGEX)을 일치. 처리 방법 파일을 사용 하도록 선택할 수 있습니다 또한 데이터 스트림 일시 중지 적절 한 시기를 선택할 수 있습니다 (* bpu, * bpafter), 수동 개입. 위의 단계 우리 웹 디버깅에 대 한 로컬 파일을 HTTP 요청을 리디렉션하는 방법을 설명 했다. 이 디버깅 방법 확인 라인에 게시할 필요는 없습니다, 성공 하지 수정 방지, 사용자는 위험에 영향을, 또한 복잡 한 개발 서버에 개발 환경을 구축 하지 않아도, 빠른 웹 디버깅 하는 데 매우 적합 합니다.

확장된 읽기: