useDebugMode

import { useDebugMode } from '@bbc/front-end-kit/vue'

Small composable that provides a way to build in developer tools that are only exposed when debug mode is active.

Subscribed values, functions and class instances become available on window.bylt.debug at runtime, making them accessible from the browser console.

Warning

Debug mode must be activated before subscribed values are exposed to window.bylt.debug. Initialising and subscribing alone is not enough.

Two ways to activate:

Call debug.toggle(true) in code
Press Control+Shift+d at runtime
Add ?debug=1 to the URL — debug mode activates automatically on load

Getting started

import { useDebugMode } from '@bbc/front-end-kit/vue'

const debug = useDebugMode();

// window.bylt.debug.myVar => 'test'
debug.subscribe('myVar', 'test');

// window.bylt.debug.myFunc('Montini') => 'Hello Montini'
debug.subscribe('myFunc', name => `Hello, ${name}!`)

// window.bylt.debug.myInstance => PNGSequencer instance
debug.subscribe('myInstance', new PNGSequencer);

// window.bylt.debug.clearDb() => clears a db
debug.subscribe('clearDb', () => {
    globallyDefinedDb.clear()
})

// activate debug mode
debug.toggle(true);

API

Init

No parameters required.

const debug = useDebugMode()

Reactive properties

debug

Reactive boolean indicating whether debug mode is currently active.

Values: Ref<Boolean>

Methods

toggle

Toggle debug mode on or off. When activated, all subscribed values are written to window.bylt.debug. When deactivated, window.bylt.debug is cleared.

Parameters

force (optional): Pass true to force activate, false to force deactivate. Omit to toggle the current state.

Register a value, function, or instance under a key. If debug mode is already active when subscribe is called, the value is immediately added to window.bylt.debug.

Parameters

key: The key under which the value will be accessible on window.bylt.debug.
value: Any variable, function, or class instance.