Application developpement logging : selective logs

adding debug messages in javascript development via console.log is a universal technique of watching what's happening in your algorithms while developping. Multiplying console messages can get confusing, while keeping track of useful logs is important in the code development process.

In this example, I work on nuxt development, and use Pinia state management to declare a selective array of log message to control which one I need to display.

Pinia array definition

technique here uses pinia state to declare global variable json array debugLevel.

   import { defineStore } from 'pinia'

  
export const useAppStore = defineStore({
    id: 'wave-app-store',
    state: () => {
        return {debugLevel:{
                "methodFetchInfo":false,
                "componentCanva":false
            },

.....

Selective log display in your component

having defined a sort of global constant using pinia state, any piece of component can now display logs if its debug level is activated. I usually define debugLevel at component level, but you could also decide that you build levels for each method of a component, or use level by feature, depending on your debug needs.

waveAppStore=useAppStore()
if (waveAppStore.debugLevel.componentCanva) console.log(anglereel , $fin)