How to track a caller for native getters / setters of host objects in a browser?

Question

Here is a use case:

Assume we have a web page that has an issue, which results in the page to be scrolled up on a mobile device at some point after DOMContentLoaded has fired.

We can legitimately assume there is something, which operates on document.documentElement.scrollTop (e.g. assigns it a value of 0).

Suppose we also know there are hundreds of places, where this can happen.

To debug the issue we can think of the following strategies:

check each event handler, which can set a value of 0 scrollTop, one by one
try to use debug function available in Chrome DevTools
Override a native scrollTop as:

var scrollTopOwner = document.documentElement.__proto__.__proto__.__proto__;
var oldDescr = Object.getOwnPropertyDescriptor(scrollTopOwner, 'scrollTop');
Object.defineProperty(scrollTopOwner, '_oldScrollTop_', oldDescr);
Object.defineProperty(scrollTopOwner, 'scrollTop', {
  get:function(){
    return this._oldScrollTop_;
  },
  set: function(v) {
    debugger;
    this._oldScrollTop_ = v;
  }
});

function someMethodCausingAPageToScrollUp() {
  document.scrollingElement.scrollTop = 1e3;
}

setTimeout(someMethodCausingAPageToScrollUp, 1000);

The issue with the second approach is that it doesn't work with native getters/setters.

The issue with the third approach is that even though now we can easily track what is assigning a value to the scrollTop property, we monkey patch a native getters/setters and risk to cause unnecessary side effects.

Hence the question: is there a more elegant solution to debug native getters and setters for web browser host objects (e.g. document, window, location, etc)?

user2112002 · Answer 1 · 2018-12-21T00:34:40.050

0

const collector = [];
const originalScrollTop = Object.getOwnPropertyDescriptor(Element.prototype, 'scrollTop');
Object.defineProperty(Element.prototype, 'scrollTop', {
    get: () => originalScrollTop.get.call(document.scrollingElement),
    set: function(v) {
        collector.push((new Error()).stack)
        originalScrollTop.set.call(document.scrollingElement, v)
    }
})

You can collect stacktraces and inspect them later. We don't log it immediately to not cause IO delays. Works in Chrome.

edited Dec 21 '18 at 00:34

answered Dec 20 '18 at 11:19

user2112002

1
1

Thanks for the snippet, however, that is not quite what I was expecting to see. The proposed approach is shorter in terms of lines of code but altogether with approach #2 from the post description they both are custom-made solutions, which forces a developer to keep that among browser snippets. I wonder if there is a native (built-in) way (even behind an experimental feature) to debug (e.g. put a breakpoint, inspect a call stack, see a caller, etc) getters/setters. – Viacheslav Moskalenko Dec 20 '18 at 13:19

Viacheslav Moskalenko · Accepted Answer · 2019-06-15T02:57:34.730

Turns out it is possible to use debug function for set method on a scrollTop property descriptor.

The code is as follows:

debug(Object.getOwnPropertyDescriptor(Element.prototype, 'scrollTop').set);

After that, we'll automatically stop in any function that tries to set a value to scrollTop. If you need to automatically stop only on those functions which assign a value within a certain threshold (for example, between 0 and 500), you can easily do that too since debug function accepts a second argument (condition) where you can specify your condition logic.

For example:

// In that case, we'll automatically stop only in those functions which assign scrollTop a value within a range of [1, 499] inclusively
debug(Object.getOwnPropertyDescriptor(Element.prototype, 'scrollTop').set, 'arguments[0] > 0 && arguments[0] < 500');

Pros:

easy to use and doesn't require a lot of boilerplate code

Cons:

you'll have to evaluate that js snippet above each time when you refresh your page

Many thanks to Aleksey Kozyatinskiy (former Googler on DevTools team) for the detailed explanation.

How to track a caller for native getters / setters of host objects in a browser?

2 Answers2