Skip to Content
Using the Extension

Using the Extension

  • Group column � Shows every detected group plus ( ungrouped ) when needed.
  • Black header buttons � Apply DEV/TEST/PROD to all groups in one click.
  • Per-group buttons � Toggle the environment for a single group. Buttons become colored (red for DEV, amber for TEST, green for PROD) when active.
  • Auto-reload on change � When checked, Devmode reloads the current tab right after you change a setting so the new DNR rules take effect immediately.
  • Status message � Summarizes what changed and whether a manual reload is required.

Toolbar Icon & Page Cues

  • Red icon = at least one group is in DEV.
  • Yellow icon = no DEV groups, but at least one TEST group.
  • Green icon = everything is PROD.
  • Gray icon = the origin is disabled (e.g., via hf-devproxy).
  • The content script also adds a colored dot prefix to the page <title> and logs a console banner whenever DEV or TEST is active.

First-Load Behavior

  1. On the first visit to a new origin, Devmode collects the mappings but the page still loads PROD assets.
  2. When you reload (manually or via auto-reload), the saved mappings allow the DNR engine to redirect requests before the browser issues them.
  3. Dynamically injected scripts/links are still handled by the MutationObserver; Devmode swaps the src/href if it intercepts the element before execution.

Per-Group Persistence

  • Environment choices are stored per origin + group.
  • Switching tabs or closing the browser retains your selections.
  • Clicking a black header button overwrites every group on that origin at once.

Disabling for a Session

Need to temporarily stop all rewriting? Either toggle each group back to PROD or set the page into “Devproxy” mode by adding hf-devproxy to <html>. The popup will explain that the origin is currently exempt.

Continue to Troubleshooting & Tips if a group is missing or assets are not swapping.

Last updated on
Configure Your PagesTroubleshooting & Tips