ユースケースは次のとおりです。
問題のある Web ページがあり、その結果、DOMContentLoadedが発生した後、ある時点でページがモバイル デバイスで上にスクロールされるとします。
document.documentElement.scrollTopで動作する何かがあると想定できます (たとえば、値0を割り当てます)。
これが発生する可能性のある場所が何百もあることもわかっているとします。
問題をデバッグするには、次の戦略を考えることができます。
scrollTopの値を 0 に設定できる各イベント ハンドラーを1 つずつ確認します。
Chrome DevTools で利用可能なデバッグ機能を使用してみてください
- ネイティブ scrollTop を次のようにオーバーライドします。
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);
2 番目のアプローチの問題は、ネイティブのゲッター/セッターでは機能しないことです。
3 番目のアプローチの問題は、 scrollTopプロパティに値を割り当てているものを簡単に追跡できるようになったにもかかわらず、ネイティブの getter/setter にモンキー パッチを適用し、不要な副作用を引き起こすリスクがあることです。
したがって、質問: Web ブラウザーのホスト オブジェクト (ドキュメント、ウィンドウ、場所など) のネイティブのゲッターとセッターをデバッグするためのより洗練されたソリューションはありますか?