🐛🔬 mobify-debug.js

Mobify has a number of JavaScript libraries that run in browser:

• Progressive Mobile SDK, Adaptive.js, Mobify.js!
• Smart Content
• Store Locators and a number of location widgets
• Web Push
• Probably other stuff I'm forgetting...

Partners, customers and Mobifyers often need to debug their behaviour.

Currently, each one implements it's own approach to enabling logging and displaying debugging information. This leads to inconsistent debugging experiences across the platform. It is often nessecary to dive into the source code and reach out to other teams to figure out what is going on.

This proposal attempts to unify browser debugging across Mobify, by providing a consistent way to enable "debug mode" and display debugging information using a console.log like API.

The desired qualties of mobify-debug.js include:

• You should be able to turn on debug mode in a browser without opening a developer console.
• If debug mode is on, it should stay on until told otherwise.
• If debug mode is on, it should display information from all components of the platform unless told otherwise.
• It's public API should feel like console.log by default, but should have the ability to run arbirarty code if turned on.
• The public API should be as brief as possible.

In the future it may be important to set debug levels or specifically target debugging from just a particular module in a component.

But not right now.

Proposed Interface

You can turn "debug mode" on by setting the MOBIFY_DEBUG flag in an anchor, querystring or cookie.

The flag can be set either to a value of 1 to enable debugging across all debuggers, or a comma seperated list to enable debugging just for particular debuggers.

Proposed API

// V1 API. The simplest thing could work.
const logger = Mobify.Debug('smart-content')
logger.log('Found %s slots on the page.', slots.length)
logger.log(function() {
    // Run only when debug mode is on.
    el = document.createElement('style')
    el.innerText = '.sc-slots { outline: 1px solid red; }'
    document.body.appendChild(el)
})

// V2 API
const logger = Mobify.Debug('smart-content')
logger.log('Smart Content is present on the page.')
 
const slotsLogger = Mobify.Debug('smart-content.slots')
slotsLogger.log('Found %s slots on the page.', slots.length)

The V3 API could add logging levels like error, debug and warn.

I'm not sure of the best way to expose these levels through the interface.

TODO:

• Get +1 on API.
• Add tests!
• Publish to npm.
• Add instructions for including in projects.