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 = Mobifyloggerlogger
// V2 APIconst logger = Mobifylogger const slotsLogger = MobifyslotsLogger
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.