Debugging JavaScript Objects

JS Breakpoint Collection

debugCookieWrites

debugScroll

Updating The Scroll Position

document.body.scrollTop = 10

Object.defineProperty

Object.defineProperty(document.body, "scrollTop", {
     set: function(){
         console.trace("Updating scrollTop")
     }
})

Object.defineProperty

Object.defineProperty

var scrollTop = document.body.scrollTop;
Object.defineProperty(document.body, "scrollTop", {
     set: function(value){
         console.trace("Updating scrollTop")
         scrollTop = value;
     }
})

Object.defineProperty

var scrollTop = document.body.scrollTop;
Object.defineProperty(document.body, "scrollTop", {
     set: function(value){
         console.trace("Updating scrollTop")
         scrollTop = value;
     },
     get: function(){
         return scrollTop
     }
})

getOwnPropertyDescriptor

var obj = {name: "Emma"}
Object.getOwnPropertyDescriptor(obj, "name")
// =>
{
    value: "Emma",
    writable: true,
    enumerable: true,
    configurable: true
}

getOwnPropertyDescriptor

obj = {}
Object.defineProperty(obj, "name", {
    get: function(){
        return "Emma"
    }
})
Object.getOwnPropertyDescriptor(obj, "name")
// =>
{
    configurable: false,
    enumerable: false,
    get: function(){...}
    set: undefined
}

getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor(document.body, "scrollTop")
// => undefined

getPrototypeOf

var obj = document.body
obj = Object.getPrototypeOf(obj)
console.log(obj)
// => HTMLBodyElement
Object.getOwnPropertyDescriptor(obj, "scrollTop")
// => undefined

getPrototypeOf

var obj = document.body
obj = Object.getPrototypeOf(obj)
obj = Object.getPrototypeOf(obj)
// => HTMLElement
Object.getOwnPropertyDescriptor(obj, "scrollTop")
// => undefined

getPrototypeOf

var obj = document.body
obj = Object.getPrototypeOf(obj)
obj = Object.getPrototypeOf(obj)
obj = Object.getPrototypeOf(obj)
// => Element
Object.getOwnPropertyDescriptor(obj, "scrollTop")
// =>
{
    enumerable: true,
    configurable: true,
    get: function(){...},
    set: function(){...}
}

Element.prototype

var obj = document.body
obj = Object.getPrototypeOf(obj)
obj = Object.getPrototypeOf(obj)
obj = Object.getPrototypeOf(obj)

obj === Element.prototype
// true

Calling The Original Setter

Object.defineProperty(document.body, "scrollTop", {
     set: function(value){
         console.trace("Setting scrollTop value to", value)
         var descr = Object.getOwnPropertyDescriptor(
              Element.prototype, "scrollTop")
         return descr.set(value)
     }
})
document.body.scrollTop = 10

Calling The Original Setter

Object.defineProperty(document.body, "scrollTop", {
     set: function(value){
         console.trace("Setting scrollTop value to", value)
         var descr = Object.getOwnPropertyDescriptor(
              Element.prototype, "scrollTop");
         return descr.set.apply(document.body, [value]);
     }
})
document.body.scrollTop = 10

Slides

bit.ly/debug-js-objects

Breakpoints Library

bit.ly/bp-collection

@mattzeunert