Debugging Bad Performance in AngularJS

A live example of how I pinpoint a problematic deep watch.

[chriseaton]

Your blog / videos are some of the best resources I've found for AngularJS. Thanks bro!

[MiroslavGalic]

I like your teaching style and have been following your blog ever since I stumbled upon one of your posts. You have been really helpful to me, I hope you proceed to share your tips and tricks. Thank you.

[GabrielMateusLima]

Thanks for this (yes, working with legacy AngularJS code in 2021 brought me here).

"I ust clapped my hands" 😆

[naguibihab]

Great methods Aviv, keep them coming.

[gdHaCkEr]

You explained this really well, Aviv. I like the suggestion of modifying the AngularJS source code to log the problematic deep watches. It's something I hadn't thought of.

[anisimovandrii]

Thanks a lot!!!

If someone needs to find all of the buggy watches, here's what I've added to the example:

After the line 17063 (`get = watch.get;`) :

// `equals` wrapper with performance measuring
function equalsEstimate(value, last) {
const start = performance.now();
const result = equals(value, last);
const end = performance.now();
const executedIn = end - start;
if (executedIn > 1) {
console.warn('Watch is too slow:', watch.exp, `\nTook ${executedIn.toFixed(2)}ms`)
}
return result;
}

And on the line 17069 replace `? equals(value, last)`
with `? equalsEstimate(value, last)`

[sovanyio]

Why not just add a break point on the angular line?