Debugging Pattern: "ControllerID"

This debugging pattern was shared with me by a close friend (who also happens to be a very skilled developer). This is an incredibly useful and time-saving debugging pattern when working with modules or controllers that need to be instantiated only once per instance.

The idea behind this pattern is to apply a controller ID to each instance of a given module/controller in order to keep track of the number of times it is being instantiated.

To do this, create a global variable that we will increment:

let controllerCount = 0

Then, assign a variable within the module that will be assigned a controller ID, and increment the controller count:

export const Controller = () => {
    const controllerID = ++controllerCount
}

Then, add the following code to your tests:

console.log({data, controllerID})

Create Custom DOM & Window Tests

To make information that would normally be buried deep within the DOM, we can create our own tests to make things more readily available.

Just add this pattern to the correct scope:

window.test = { module1, module2, ... }