DEV Community

Cover image for Debugging Pattern: "ControllerID"

Debugging Pattern: "ControllerID"

Connor Dillon
Full-stack Javascript developer, fire dancer, physics nerd, Vim fanboy, and technical writer! I'm passionate about my work and love to talk shop, so say hi!
・1 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then, add the following code to your tests:

console.log({data, controllerID})
Enter fullscreen mode Exit fullscreen mode

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, ... }
Enter fullscreen mode Exit fullscreen mode

Discussion (0)