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

로컬 재정의를 사용하면 백엔드, 서드 파티 또는 API의 지원을 기다릴 필요 없이 변경사항 및 수정사항의 프로토타입을 제작하고 테스트하여 워크플로를 차단 해제할 수 있습니다.

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

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

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

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

작동 방식

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

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

제한사항

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

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

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

로컬 재정의 설정

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

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

4. 로컬 재정의가 설정되고 사용 설정되면 재정의하려는 항목에 따라 DevTools에서 다음 위치로 이동합니다.

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

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

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

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

웹 콘텐츠 재정의

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

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

예를 들어 CSS가 HTML 파일에 있는 것이 아니라면 소스의 파일 또는 요소 > 스타일의 CSS를 수정할 수 있습니다.

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

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

XHR 또는 가져오기 요청을 재정의하여 원격 리소스를 모의 처리합니다.

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

1. 로컬 재정의 설정
2. Network에서 XHR/fetch 요청을 필터링하고 필요한 요청을 찾아 오른쪽 클릭한 다음 Override content를 선택합니다.
3. 가져온 데이터를 변경하고 파일을 저장합니다.
4. refresh 페이지를 새로고침하고 적용된 변경사항을 확인합니다.

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

로컬 변경사항 추적

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

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

HTTP 응답 헤더 재정의

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

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

• 교차 출처 리소스 공유 (CORS) 헤더
• Permissions-Policy 헤더
• 교차 출처 격리 헤더

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

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

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

   

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

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

   

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

   네트워크 패널에는 수정된 헤더가 녹색으로 강조 표시되고 삭제된 재정의는 빨간색으로 취소선이 표시됩니다. 또한 헤더 탭에는 헤더가 재정의되었음을 알리는 도움말이 포함된 보라색 점 아이콘이 표시됩니다.

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

모든 응답 헤더 재정의 수정

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

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

   

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

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

   

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

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

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

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

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