로컬 모드

'로컬 모드'란 무엇인가요?

이 기능은 여러 매핑을 등록하여 사용자 정의 https:// URL을 통해 로컬 파일을 불러올 수 있게 합니다. 이를 통해 웹 페이지를 테스트하기 위해 HTTP 서버를 띄울 필요가 없어집니다. 이 덕분에 Secure Context(즉, https 사용)로 제한되는 API를 포함한 모든 웹 API를 쉽게 테스트할 수 있습니다. 또한 각 실험/프로젝트에 대해 많은 개별적인 출처(도메인)를 가지고 각각 전용 저장소/쿠키를 갖는 데 도움이 됩니다.

이 매핑은 Firefox에서만 접근 가능하며 (다른 프로그램이나 컴퓨터/로컬 네트워크의 악성 소프트웨어에서는 사용할 수 없습니다).

이 매핑은 DevTools가 열려 있을 때만 작동합니다.

'로컬 모드' 사용 방법

이 기능은 Firefox 153에 포함되었습니다.

DevTools의 옵션 패널에서 매핑을 등록할 수 있습니다:

The Local Mode settings in DevTools options panel

여기서 필요한 만큼 많은 매핑을 등록할 수 있습니다.

각 매핑은 다음을 정의합니다:

• 출처(도메인)
• https URL로 노출할 사용자 정의 출처.
• 로컬 폴더
  파일을 불러올 로컬 폴더.

스크린샷에서는 /home/alex/app에서 https://firefox.localhost를 불러오는 것을 보여줍니다.

파일 URL 로딩 알림

DevTools가 열린 상태에서 어떤 file:// URL도 로드할 때, DevTools 상단에 다음 알림이 표시되어야 합니다:

The notification shown when loading file:// URL

첫 번째 동작인 '설정에 추가(Add To Settings)'를 클릭하면 옵션 패널로 이동하여 로드된 파일 URL에 대한 새 매핑을 등록하게 됩니다.

두 번째 동작인 '시도해 보기(Try it)'는 현재 파일이나 폴더를 https URL에서 불러오기 위해 임시 매핑을 등록합니다. 이 매핑은 DevTools나 Firefox를 닫으면 사라집니다.

환경설정을 통해 매핑 관리하기

매핑은 또한 about:config의 환경설정(preferences)에서도 관리할 수 있으므로, 프로필 간에 쉽게 가져오거나 전송하거나 자동화를 통해 관리할 수 있습니다.

각 매핑은 세 가지 환경설정으로 정의됩니다:

devtools.local-mode.mappings.${index}.origin: 매핑의 출처를 위한 문자열 값. (예: “firefox.localhost”)
devtools.local-mode.mappings.${index}.path

: 로컬 폴더의 절대 경로를 지정하는 문자열 값입니다 (예: “/home/hello-world”)devtools.local-mode.mappings.${index}.disabled

: 이 매핑을 비활성화할지 여부를 결정하는 선택적 부울(boolean) 값이며, 어디에 ${index}는 각 매핑을 고유하게 식별하기 위한 증가형 정수 카운터입니다.

about:config에서 제어할 수 있는 매핑의 예시는 다음과 같습니다:

List of Local Mapping preferences displayed in about:config