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

로컬 재정의를 사용하면 백엔드, 서드 파티 또는 API에서 변경사항과 수정사항을 지원할 때까지 기다리지 않고도 프로토타입을 제작하고 변경사항과 수정사항을 테스트하여 워크플로를 차단 해제할 수 있습니다.

로컬 재정의를 사용하여 원격 리소스에 액세스할 수 없는 경우에도 원격 리소스를 모의 처리합니다. 요청 및 다양한 파일(예: HTTP 응답 헤더, 웹 콘텐츠(XHR 및 가져오기 요청 포함)에 대한 응답을 모의 처리할 수 있습니다.

예를 들어 로컬 재정의는 다음과 같은 사용 사례에 유용할 수 있습니다.

• 실제로 프로덕션 단계로 넘어가기 전에 모의 API를 사용하고 API 수정사항을 테스트합니다.
• 백엔드에서 사용할 데이터 구조를 이미 알고 있다면 새 UI 디자인의 프로토타입을 만듭니다.
• 성능 수정사항(예: CLS 제거)을 테스트하여 사전에 유의미한지 확인합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

로컬 재정의를 사용하면 페이지를 새로고침할 때도 DevTools에서 변경한 내용을 유지할 수 있습니다.

작동 방식

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

를 통해 개인정보처리방침을 정의할 수 있습니다.

소스 파일에 변경사항을 직접 저장할 수도 있습니다. 작업공간으로 파일 수정 및 저장하기를 참고하세요.

제한사항

로컬 재정의는 네트워크 응답 헤더와 XHR 및 가져오기 요청을 비롯한 대부분의 파일 형식에 적용되지만 몇 가지 예외가 있습니다.

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

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

로컬 재정의 설정

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

1. DevTools를 열고 네트워크 패널로 이동한 다음 재정의하려는 요청을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 헤더 재정의 또는 콘텐츠 재정의를 선택합니다.
2. 아직 로컬 재정의를 설정하지 않은 경우 상단의 작업 표시줄에 DevTools에서 다음과 같은 메시지가 표시됩니다.
   1. 재정의 파일을 저장할 폴더를 선택합니다.
   2. 허용을 클릭하여 DevTools 액세스 권한을 부여합니다.
3. 로컬 재정의가 설정되어 있지만 사용 중지된 경우 DevTools에서 자동으로 사용 설정합니다.

4. 로컬 재정의가 설정되고 활성화되면 재정의하려는 항목에 따라 DevTools가 다음 단계로 안내합니다.

   • 웹 콘텐츠를 변경할 수 있는 Sources 패널
   • 네트워크 > 헤더 > 응답 헤더의 편집기를 사용하면 응답 헤더를 변경할 수 있습니다.

로컬 재정의를 일시적으로 사용 중지하거나 모든 재정의 파일을 삭제하려면 소스 > 재정의를 클릭하고 check_box_outline_blank 로컬 재정의 사용 설정 체크박스를 선택 해제하거나 각각 block 지우기를 클릭합니다.

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

모든 재정의를 빠르게 보려면 Network 패널에서 요청을 마우스 오른쪽 버튼으로 클릭하고 Show all overrides를 선택합니다. DevTools에서 Sources(소스)로 이동합니다. > 재정의.

웹 콘텐츠 재정의

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

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

예를 들어 소스의 파일 또는 요소의 CSS > 스타일(CSS가 HTML 파일에 있는 경우 제외).

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

또한 재정의된 웹 콘텐츠가 포함된 요청의 응답 탭 옆에 네트워크 패널에 도움말이 포함된 보라색 점 아이콘이 표시됩니다.

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

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

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

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

로컬 변경사항 추적

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

또한 소스 > 재정의에서 저장된 파일을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Open in containing folder를 선택할 수 있습니다. 재정의 설정 중에 선택한 폴더가 열립니다. 여기에서 원하는 코드 편집기로 파일을 수정할 수 있습니다.

HTTP 응답 헤더 재정의

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

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

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

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

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

3. 응답 헤더 값 위로 마우스를 가져가서 해당 값에 커서를 놓습니다.

   

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

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

   

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

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

5. refresh 변경사항을 적용하려면 페이지를 새로고침하세요.

모든 응답 헤더 재정의 수정

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

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

   

   DevTools가 소스의 상응하는 .headers 파일로 이동합니다. > 재정의.

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

   

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

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

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

3. Command / Control + S를 눌러 .headers 파일을 저장합니다.

4. refresh 변경사항을 적용하려면 페이지를 새로고침하세요.