Browse aymeric's, an independent, searchable archive of readable snapshots from followed feeds, preserved in Git with aggr. https://aggr.aymericbeaumet.com/sources/firefox-source-docs.mozilla.org/ 2026-10-21T15:47:59+00:00 aymeric's aggr urn:aggr:item:d5ac062c664535697b3877c7ee4b82c555b7809b 2026-10-21T15:47:59+00:00 2026-10-21T15:47:59+00:00 firefox-source-docs.mozilla.org via lim

Comments

<h2>What is the “Local Mode”</h2> <p>This feature allows you to register multiple mappings in order to load local files through custom https:// URLs. This prevents having to spawn a HTTP server to test a web page. This makes it easy to test all Web APIs, including the ones being restricted to <a target="_blank" rel="noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Secure_Contexts">Secure Contexts</a> (i.e. using https). This also helps having many distinct origins (domain) for each experiment / project and have dedicated storage/cookies for each.</p> <p>These mappings are only accessible from Firefox (this can’t be used by any other program, or malicious software on your computer/local network).</p> <p>These mappings are only functional when DevTools are opened.</p> <h2>How to use the “Local Mode”</h2> <p>This feature shipped in Firefox 153.</p> <p>You can register mappings from DevTools’ Options panel:</p> <p><picture class="article-picture article-picture-fallback" style="--image-ratio:16 / 9"><img src="https://firefox-source-docs.mozilla.org/_images/options-panel.png" alt="The Local Mode settings in DevTools options panel" loading="eager" decoding="async" fetchpriority="high" referrerpolicy="no-referrer" class="progressive-image"></picture></p> <p>From there you can register as many mappings as you need.</p> <p>Each mapping defines:</p> <ul> <li> <p>the origin (domain)</p> <p>The custom origin to expose via https URL.</p> </li> <li> <p>the local folder</p> <p>The local folder where to load files from.</p> </li> </ul> <p>On the screenshot, it loads <code>https://firefox.localhost</code> from <code>/home/alex/app</code>.</p> <h2>Loading file URL notification</h2> <p>When loading any file:// URL with DevTools opened, you should see the following notification at the top of DevTools:</p> <p><picture class="article-picture article-picture-fallback" style="--image-ratio:16 / 9"><img src="https://firefox-source-docs.mozilla.org/_images/file-notification.png" alt="The notification shown when loading file:// URL" loading="lazy" decoding="async" fetchpriority="low" referrerpolicy="no-referrer" class="progressive-image"></picture></p> <p>The first action <code>Add To Settings</code> will bring you to the Options panel and register a new mapping for the loaded file URL.</p> <p>The second action <code>Try it</code> will register a transient mapping to load the current file or folder from a https URL. The mapping will disappear as soon as you close DevTools or Firefox.</p> <h2>Manage mappings via preferences</h2> <p>Mappings can also be managed in about:config via preferences, so that you can easily import and transfer them between profiles, or via automation.</p> <p>Each mapping is defined by three preferences:</p> <ul> <li> <p><code>devtools.local-mode.mappings.${index}.origin</code>: string for the mapping’s origin. (e.g. “firefox.localhost”)</p> </li> <li> <p><code>devtools.local-mode.mappings.${index}.path</code>: string for the absolute path to local folder (e.g. “/home/hello-world”)</p> </li> <li> <p><code>devtools.local-mode.mappings.${index}.disabled</code>: optional boolean to disable this mapping and where <code>${index}</code> is an incremental integer counter to uniquely identify each mapping.</p> </li> </ul> <p>Here is an example of mappings you can control from about:config:</p> <p><picture class="article-picture article-picture-fallback" style="--image-ratio:16 / 9"><img src="https://firefox-source-docs.mozilla.org/_images/mappings-in-about-config.png" alt="List of Local Mapping preferences displayed in about:config" loading="lazy" decoding="async" fetchpriority="low" referrerpolicy="no-referrer" class="progressive-image"></picture></p>