로컬에서 웹 콘텐츠 및 HTTP 응답 헤더 재정의

Sofia Emelianova

로컬 재정의를 사용하면 HTTP 응답 헤더와 웹 콘텐츠(예: XHR 및 가져오기 요청)를 재정의하여 원격 리소스에 액세스할 수 없는 경우에도 모의 처리할 수 있습니다. 이렇게 하면 백엔드에서 변경사항을 지원할 때까지 기다리지 않고도 변경사항의 프로토타입을 제작할 수 있습니다. 로컬 재정의를 사용하면 페이지 로드 시 DevTools에서 변경한 내용을 유지할 수도 있습니다.

설문 조사 진행 방법:

• DevTools에서 변경하면 DevTools가 수정된 파일의 사본을 지정한 폴더에 저장합니다.
• 페이지를 새로고침하면 DevTools가 네트워크 리소스가 아닌 수정된 로컬 파일을 제공합니다.

제한사항

로컬 재정의는 네트워크 응답 헤더와 XHR 및 가져오기 요청을 포함한 대부분의 파일 형식에서 작동하지만, 다음과 같은 몇 가지 예외가 있습니다.

• 로컬 재정의가 사용 설정되면 캐시가 사용 중지됩니다.
• DevTools가 Elements 패널의 DOM 트리에서 변경한 변경사항을 저장하지 않습니다.
• Styles 창에서 CSS를 수정하고 해당 CSS의 소스가 HTML 파일인 경우 DevTools가 변경사항을 저장하지 않습니다.

대신 소스 패널에서 HTML 파일을 수정할 수 있습니다.

지역 재정의 설정

Network 패널에서 즉시 웹 콘텐츠 또는 응답 헤더를 재정의할 수 있습니다.

1. DevTools를 열고 Network 패널로 이동한 다음 재정의하려는 요청을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 Override header 또는 Override content를 선택합니다.
2. 아직 로컬 재정의를 설정하지 않았다면 상단의 작업 모음에 DevTools에 다음과 같은 메시지가 표시됩니다.
   1. 재정의 파일을 저장할 폴더를 선택합니다.
   2. 허용을 클릭하여 DevTools에 액세스 권한을 부여합니다.
3. 로컬 재정의를 설정했지만 비활성화한 경우 DevTools에서 자동으로 이를 사용 설정합니다.

4. 로컬 재정의를 설정하고 사용 설정하면 재정의하려는 항목에 따라 DevTools에서 다음을 실행합니다.

   • 웹 콘텐츠를 변경할 수 있는 소스 패널
   • 네트워크 > 헤더 > 응답 헤더의 편집기로 응답 헤더를 변경할 수 있습니다.

로컬 재정의를 일시적으로 사용 중지하거나 모든 재정의 파일을 삭제하려면 Sources > Overrides로 이동하여 check_box_outline_blank Enable Local Overrides(로컬 재정의 사용 설정) 체크박스를 선택 해제하거나 각각 block Clear(지우기)를 클릭합니다.

단일 재정의 파일 또는 폴더의 모든 재정의를 삭제하려면 소스 > 재정의에서 파일 또는 폴더를 마우스 오른쪽 버튼으로 클릭하고 삭제를 선택한 다음 대화상자에서 확인을 클릭합니다. 이 작업은 실행취소할 수 없으며 삭제된 재정의를 수동으로 다시 만들어야 합니다.

모든 재정의를 빠르게 보려면 네트워크 패널에서 요청을 마우스 오른쪽 버튼으로 클릭하고 모든 재정의 표시를 선택합니다. DevTools에서 Sources > Overrides로 이동합니다.

웹 콘텐츠 재정의

웹 콘텐츠를 재정의하려면 다음 단계를 따르세요.

1. 로컬 재정의를 설정합니다.
2. 파일을 변경하고 DevTools에 저장합니다.

예를 들어 CSS가 HTML 파일에 있지 않는 한 소스의 파일 또는 요소 > 스타일의 CSS를 수정할 수 있습니다.

DevTools는 수정된 파일을 저장하고 Sources > Overrides에 나열하며 관련 패널 및 창(Elements > Styles, Network, Sources > Overrides) 옆에 아이콘을 표시합니다.

또한 Network 패널에는 재정의된 웹 콘텐츠가 있는 요청의 Response 탭 옆에 도움말이 있는 보라색 점 아이콘이 표시됩니다.

XHR을 재정의하거나 가져오기 요청을 통해 원격 리소스 모의 처리

로컬 재정의를 사용하면 백엔드에 액세스할 필요가 없으며 백엔드에서 변경사항을 지원할 때까지 기다릴 필요가 없습니다. 즉석에서 모의 실험 및 실험:

1. 로컬 재정의를 설정합니다.
2. 네트워크에서 XHR/가져오기 요청을 필터링하고 필요한 요청을 찾아 마우스 오른쪽 버튼으로 클릭한 다음 콘텐츠 재정의를 선택합니다.
3. 가져온 데이터를 변경하고 파일을 저장합니다.
4. refresh 페이지를 새로고침하고 변경사항이 적용된 것을 확인합니다.

이 워크플로를 알아보려면 다음 동영상을 시청하세요.

로컬 변경사항 추적

변경사항 창 탭 한곳에서 웹 콘텐츠에 적용한 모든 변경사항을 추적할 수 있습니다.

HTTP 응답 헤더 재정의

네트워크 패널에서 웹 서버에 액세스하지 않고도 HTTP 응답 헤더를 재정의할 수 있습니다.

응답 헤더 재정의를 사용하면 다음을 포함하되 이에 국한되지 않는 다양한 헤더의 수정사항을 로컬에서 프로토타입으로 제작할 수 있습니다.

• 교차 출처 리소스 공유 (CORS) 헤더
• 권한-정책 헤더
• 교차 출처 격리 헤더

응답 헤더를 재정의하려면 다음 안내를 따르세요.

1. 로컬 재정의를 설정하고 예를 들어 이 데모 페이지를 검사합니다.
2. 네트워크로 이동하여 요청을 찾아 마우스 오른쪽 버튼으로 클릭하고 헤더 재정의를 선택합니다. DevTools에서 Headers > Response Headers 편집기로 이동합니다.

3. 응답 헤더 값 위로 마우스를 가져가 커서를 위치시킵니다.

   

   또는 응답 헤더 편집기를 사용 설정하려면 응답 헤더 값 위로 마우스를 가져가서 edit 수정을 클릭합니다.

4. 헤더를 수정하거나 새 헤더를 추가합니다.

   

   • 헤더 값을 수정하려면 해당 값을 클릭합니다.
   • 새 헤더를 추가하려면 add 헤더 추가를 클릭합니다.
   • 헤더 재정의를 삭제하려면 옆에 있는 delete를 클릭합니다. 이렇게 하면 추가한 헤더가 삭제되거나 수정된 값이 원래 값으로 되돌아갑니다.

   Network 패널에는 수정된 헤더가 녹색으로 강조표시되고 삭제된 재정의는 빨간색과 줄이 그어진 상태로 표시됩니다. 또한 Headers 탭에는 헤더가 재정의되었음을 알려주는 도움말과 함께 보라색 점 아이콘이 표시됩니다.

5. refresh 페이지를 새로고침하여 변경사항을 적용합니다.

모든 응답 헤더 재정의 수정

한곳에서 모든 헤더 재정의를 수정하려면 다음 안내를 따르세요.

1. 응답 헤더 섹션 옆에 있는 .headers를 클릭합니다.

   

   DevTools에서 Sources > Overrides에 있는 상응하는 .headers 파일로 이동합니다.

2. .headers 파일을 수정합니다.

   

   • 새 재정의 규칙을 추가하려면 재정의 규칙 추가를 클릭합니다. 여기서 규칙은 헤더 및 값의 집합과 이를 적용할 단일 또는 여러 요청으로 구성됩니다.

   • 규칙에 헤더-값 쌍을 추가하려면 다른 쌍 위로 마우스를 가져가 add를 클릭합니다.

   • 헤더 값을 되돌리려면 추가된 헤더나 규칙을 삭제하고 그 위로 마우스를 가져가 delete를 클릭합니다.

3. Command / Control + S를 사용하여 .headers 파일을 저장합니다.

4. refresh 페이지를 새로고침하여 변경사항을 적용합니다.