Skip to content

Instantly share code, notes, and snippets.

@david-risney
Created February 24, 2022 17:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save david-risney/120af7aadb3d3c946e85f46e3869a8eb to your computer and use it in GitHub Desktop.
Save david-risney/120af7aadb3d3c946e85f46e3869a8eb to your computer and use it in GitHub Desktop.
Watch JavaScript use your objects
function logCall(context, fn) {
const args = Array.prototype.slice.call(arguments, 3);
try {
const r = fn.call(arguments[2], ...args);
console.log(context, "(", ...args, ")", "-->", r);
return r;
} catch (e) {
console.log(context, "(", ...args, ")", "--excpetion-->", e);
throw e;
}
}
function trace(obj, name) {
return new Proxy(obj, new Proxy({}, {
get: (t, property, r) => logCall.bind(null, name + ' ' + property, Reflect[property], Reflect)
}));
}
// Use trace to create a proxy around the provided object that will log whenever anything is done with it
let array = trace([300, 200, 100], 'array');
// Watch the sort method run on an array
array.sort();
// You can see it get the length, then all the properties out of the array, then set them back on the array in the correct order.
// As long as your object can respond in a similar fashion to all the below, the `this` object you call sort on doesn't have to
// be an array.
// array get ( (3) [300, 200, 100] sort Proxy {0: 300, 1: 200, 2: 100} ) --> ƒ sort() { [native code] }
// array get ( (3) [300, 200, 100] length Proxy {0: 300, 1: 200, 2: 100} ) --> 3
// array has ( (3) [300, 200, 100] 0 ) --> true
// array get ( (3) [300, 200, 100] 0 Proxy {0: 300, 1: 200, 2: 100} ) --> 300
// array has ( (3) [300, 200, 100] 1 ) --> true
// array get ( (3) [300, 200, 100] 1 Proxy {0: 300, 1: 200, 2: 100} ) --> 200
// array has ( (3) [300, 200, 100] 2 ) --> true
// array get ( (3) [300, 200, 100] 2 Proxy {0: 300, 1: 200, 2: 100} ) --> 100
// array getOwnPropertyDescriptor ( (3) [300, 200, 100] 0 ) --> {value: 300, writable: true, enumerable: true, configurable: true}
// array defineProperty ( (3) [100, 200, 100] 0 {value: 100} ) --> true
// array set ( (3) [100, 200, 100] 0 100 Proxy {0: 100, 1: 200, 2: 100} ) --> true
// array getOwnPropertyDescriptor ( (3) [100, 200, 100] 1 ) --> {value: 200, writable: true, enumerable: true, configurable: true}
// array defineProperty ( (3) [100, 200, 100] 1 {value: 200} ) --> true
// array set ( (3) [100, 200, 100] 1 200 Proxy {0: 100, 1: 200, 2: 100} ) --> true
// array getOwnPropertyDescriptor ( (3) [100, 200, 100] 2 ) --> {value: 100, writable: true, enumerable: true, configurable: true}
// array defineProperty ( (3) [100, 200, 300] 2 {value: 300} ) --> true
// array set ( (3) [100, 200, 300] 2 300 Proxy {0: 100, 1: 200, 2: 300} ) --> true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment