Scriptbar Snippets 🚀
Handy and easy to understand snippets to keep in your browser
break-point-on-property-access.js

#Intermediate, #Debug

Break point on property access

This is a very handy debugging tool to stop page javascript execution upon a registered object properties getter or setter acccess

Usage

  • Omg the cookie is being changed, but where? Give me a breakpoint when JS changes my cookies!

    • debugAccess(document, 'cookie');
  • Some JS is getting the scrollTop value causing massive Recalculate Styles costs.. Who is the perpetrator?

    • debugAccess(document.body,'scrollTop', true)

Common error

  • TypeError: can't redefine non-configurable property "x". See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property

References

/* * Inspired by https://gist.github.com/dmethvin/1676346 */ (function AddBreakPointOnPropertyAccessFunction(window) { function debugAccess(obj, prop, debugGet) { const origValue = obj[prop]; Object.defineProperty(obj, prop, { get: function () { if (debugGet) debugger; return origValue; }, set: function (val) { debugger; return origValue = val; }, }); }; window.debugAccess = debugAccess; })(window);
Built with ❤️ by @domnguyen and everyone on the internet 🚀