Quick tip – non-minified Launch code is easier to debug

Debugging and troubleshooting code is one of the less glamorous things we (and you) do, still sadly omnipresent.

Today, I want to show you how to take away a little bit of the pain: I’ll show you how you can tell Launch to deliver un-minified code.

This is an extremely quick and easy tip, tbh, because all you need is to omit the “min.” from the Launch embed code.

Instead of

<script src="//assets.adobedtm.com/launch-EN70202e25e4184efa870f1cad491fa9df.min.js" async></script>

you’d use

<script src="//assets.adobedtm.com/Flaunch-EN70202e25e4184efa870f1cad491fa9df.js" async><script>

A tiny difference, just four characters. But so important!

Practicalities

You’re a developer. I don’t think I am too far off when I suspect you can change the embed code on your local copy of the site whenever and as you wish.

But how about those times when you have to debug on a staging or live site?

There are three ways that I know of (or rather two, because the third exists only in my imagination. More on that later.)

Official method

The Adobe Experience Cloud Debugger extension for Chrome comes with a tool that allows you to overwrite or add a Launch embed code for any site.

Copy the embed code from your site, paste it into that field, remove the “min.” part towards the end, and reload your page.

Beautiful.

Charles

You know how much I like Charles, don’t you? Unsuprisingly, it offers a bunch of different ways itself, including “Map Remote”, or even “Map Local”, but my favourite way is to just remove the “min.” from all libraries using the “Rewrite” feature.

If you want to do that, too, feel free to save the following snippet as XML, then import it into the Rewrite Rules window.

<?xml version='1.0' encoding='UTF-8' ?>
<?charles serialisation-version='2.0' ?>
<rewriteSet-array>
  <rewriteSet>
    <active>true</active>
    <name>Non-minified Launch code</name>
    <hosts>
      <locationPatterns>
        <locationMatch>
          <location>
            <host>assets.adobedtm.com</host>
          </location>
          <enabled>true</enabled>
        </locationMatch>
      </locationPatterns>
    </hosts>
    <rules>
      <rewriteRule>
        <active>true</active>
        <ruleType>6</ruleType>
        <matchValue>(.*assets.adobedtm.com\/launch-[a-zA-Z0-9]+)\.min\.js</matchValue>
        <matchHeaderRegex>false</matchHeaderRegex>
        <matchValueRegex>true</matchValueRegex>
        <matchRequest>false</matchRequest>
        <matchResponse>false</matchResponse>
        <newValue>$1.js</newValue>
        <newHeaderRegex>false</newHeaderRegex>
        <newValueRegex>false</newValueRegex>
        <matchWholeValue>false</matchWholeValue>
        <caseSensitive>false</caseSensitive>
        <replaceType>2</replaceType>
      </rewriteRule>
    </rules>
  </rewriteSet>
</rewriteSet-array>

Note that Charles removes the “min.”, but your browser doesn’t know about that!

Ideal but non-existing way

The easiest way, of course, would be if the stunningly useful Launch and DTM Switch extension for Chrome would simply provide an “unminify code” toggle.

Hello? Anyone? Bueller?

Bonus tip

I trust you have all seen the splendid Data Element Viewer for Launch by Jim Gordon? No? Well, now you have.

While he built and discussed that, Google introduced Live Expressions. And boy, are they useful!

Personally, I keep a little live expression active at all times:

_satellite.buildInfo || _satellite.buildDate

This will tell me how old the current code I’m seeing is, and it’ll do so for both, DTM and Launch.

Isn’t that a pip?