Measure and print execution time of all computed properties

Hello!

I’m trying to isolate a performance issue in my Vue application. I’m working with a large dataset and I suspect that a computed property might be taking a really long time but it’s hard to find the culprit since there are many nested modules with many compute methods.

My naive approach has so far been adding something like the following to each computed method:

computed: {
    myProperty(): {
        const startTime = performance.now()
        cont out = doSomeComputation()
        const endTime = performance.now()
        console.log(`myProperty took ${endTime - startTime} milliseconds`))
        return out
    },
    ...
}

But this is very tedious - particularly since each reload can take a long time (I’m isolating a performance problem after all).

My question is: Is there a way to wrap all computed methods in my App in a performance-measurement code and log the result for all those methods to the browser console?