Sygnal Devmode

Sygnal Devmode is a browser extension that lets developers flip between DEV, TEST, and PROD versions of external scripts and stylesheets without touching the page code.

Quickstart

Simply click the Devmode icon in the toolbar.

Devmode will scan your current page for any Devmode-enabled scripts and script-groups and show you what modes they support.

Changing the Devmode

To change the current devmode for a Script group, simply find that row, and click the button for the mode you want. The page will reload, and you’ll be able to test those scripts now.
To change the devmode for Ungrouped scripts, which do not have a group name defined, use the ( ungrouped ) option at the bottom of the list.
To change the devmode for All scripts, click the black buttons at top.

Script Setup

Typically, a <script> might look like this;


<script
  defer
  src="https://cdn.example.com/prod/app.js"
></script>

With Devmode you can add alternative sources like this;


<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>

Note these new attributes-

dev-src - the source to use when in Dev mode
test-src - the source to use when in Test mode
group - a group name that makes scripts identifiable, and keeps scripts and CSS together in an easily switchable group

Why this Exists

Our team does a lot of development with platforms like Webflow, where the generated HTML only exists online and never locally. This makes it difficult to change scripts for Development and Testing efforts, and risks deploying the wrong code to Production if someone publishes the site.

Sygnal Devmode is our approach to eliminating that risk, and maximizing convenience for our development team.