Configure Your Pages

Devmode only touches assets that explicitly opt in. Annotate every script or stylesheet you want to control with the alternate URLs you plan to serve.

Script Tags


<!-- Production URL in `src`, alternates declared via dev-src/test-src -->
<script
  defer
  group="SA5 HTML"
  src="https://cdn.example.com/prod/app.js"
  dev-src="http://localhost:4000/dist/app.js"
  test-src="https://test-cdn.example.com/app.js"
></script>

dev-src is required for DEV mode, test-src is optional.
Relative URLs are resolved against the page URL, but absolute URLs are safer, especially when multiple origins are involved.
Scripts without a group attribute fall into the ( ungrouped ) bucket.

Stylesheets

Stylesheets behave the same way via dev-href / test-href.


<link
  rel="stylesheet"
  group="SA5 Rich Text"
  href="https://cdn.example.com/prod/rich-text.css"
  dev-href="http://localhost:4000/dist/rich-text.css"
  test-href="https://test-cdn.example.com/rich-text.css"
/>

Grouping Guidelines

Use clear, human-friendly names (e.g., Site Engine, Checkout Flow).
Multiple assets can share a group. Toggling that row in the popup applies to every matching script and stylesheet.
( ungrouped ) always sorts to the bottom of the popup so labelled groups stay prominent.

Optional Opt-Out

Add the hf-devproxy attribute to <html> to disable Devmode entirely on an origin. The extension will show a notice in the popup and ignore that site until the attribute is removed.


<html lang="en" hf-devproxy>

Best Practices

Prefer defer or async for annotated scripts so the DOM rewrite can swap URLs before execution.
Ensure CORS and Content Security Policy allow your DEV/TEST hosts. Devmode cannot bypass CSP.
Version your DEV/TEST URLs (e.g., app.dev.js?v=123) to avoid aggressive caching.
Test the markup locally first: load the page, open the popup, and confirm each group appears.

Once your pages expose the alternate URLs, move on to Using the Extension to control environments from the browser.