paulirish/break-on-access

break on access to a property

Usage

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

breakOn(document, 'cookie');

Some JS is getting the scrollTop value causing massive Recalculate Styles costs. Who is the perpetrator PERFetrator?

breakOn(document.body,'scrollTop', 'read')

This works really well as a snippet in the Chrome DevTools:

By default, breakOn will only break when JS attempts to change the value of a property. The third optional argument takes 'read' if you'd also like to break when values are read.

It is also possible to disable/enable a breakpoint by using methods provided by returned object.

    var bp = breakOn(document, 'cookie');
    // found it!
    bp.disable();
    // something else is up....
    bp.enable();

breakOn also supports Conditional Breakpoints when the 4th argument is a function. Say you know a property is being changed after the 4th change.

    var i = 0;
    var bp = breakOn(document, 'cookie', false, function(v) {
        return i++ >= 4;
    });

Or something is leaving a property undefined

    var bp = breakOn(document, 'cookie', false, function(v) {
        return typeof v === 'undefined';
    });

Authors

Dave Methvin, Paul Irish, fat, and these handsome people

Alternatives

• javascript-breakpoint-collection by @mattzeunert. Find what code is causing a browser behavior. Very nice.
• debug_utils by @amasad has similar functionality, with a larger scope

History

• @fat blogged "debugging javascript" with an idea (attributed to @mracus) I'd talked about but hadn't seen yet

Object.defineProperty(twttr, 'profile', {
    get: function () {
      debugger
    }
  , set: function (val) {
      debugger
    }
})

• I asked for help generalizing it and saving the initial value
• Dave Methvin answered the call
• 18 months later I forked it, made this repo, and tried to ship it finally.

break-on-access's Issues

Publish as npm package

It would be great to have the option to install this as a package from a registry (npm).

add this option to devTools

This is such a handy snippet!

Can this be ported to dev tools to set a breakpoint on cookie set/change/remove

also track on property deletion

I found there's no way to break on delete obj['prop'] ? Is that true?

Help with Chrome v58?

I'm trying to use this on Chrome v58 using a snippet and the console like below, but it doesn't halt even though I know the scope contents is changing. Any ideas?

<run the snippet> -> undefined
bp = breakOn(angular.element(document.customer_form).scope().customer_form.email, '$error');
bp.enable();
<submit the form> -> continues as normal, expecting the browser to halt

Uncaught TypeError

breakOn(window, "closed");

closed is a global bool variable.

How can I detect, when it is changed? I get:
Uncaught This property is not writable, so only possible mode is 'read'.

Uncaught ReferenceError: breakOn is not defined

i took the javascript and pasted it in the Chrome console.
then i tried to run it but got the error Uncaught ReferenceError: breakOn is not defined.

But when i changed from
breakOn function(obj, propertyName, mode, func) { to var breakOn = function(obj, propertyName, mode, func) { it worked.

This should be available as a Chrome Developer Tools button out-of-the-box

My knowledge of Developer Tools in Chrome is somewhat imperfect, but AFAIK, this functionality is not available by default, but it could be very, very useful. Every once in a while I have to write this Object.defineProperty() hack for debugging purposes.

Can you consider implementing its functionality in Chrome natively (or maybe it's already there)?

Also, IIRC some libraries like Ractive were relying on Object.defineProperty() to implement observables/FRP, so native implementation won't mess with them.

Infinite loops when setting

In the set method this line:

obj[prop] = val;

causes the debugger to be triggered forever.

Implement with Proxies

ES6 Proxies could be used to pull off the same technique. It perhaps could have a few advantages over using getters.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

They're now in most browsers:

"breakOn is not defined" after the snippet is run during a breakpoint

If, while the debugger is paused at a breakpoint, I decide to use breakOn() and run the snippet that defines it, then I get "breakOn is not defined" when I try to use it.

It seems that the first line should be

breakOn = function(obj, propertyName, mode, func) {

instead of

function breakOn(obj, propertyName, mode, func) {

See this thread and its old long version.

breaks inherited objects

See https://gist.github.com/rjharmon/789bfaa8dc5ab91bd515 for a fork of the original that tracks access to inherited settings and doesn't interfere when the inherited object adds its own property with that same name.

G+ link in docs broken

Small thing, but this link from the readme doesn't work for me: https://plus.google.com/+PaulIrish/posts/38Q3jzWMZ9K

I tried searching for this G+ post, but I couldn't find a correct link.

Offtopic, I don't even know if you can search through somebody's posts on Google +...?

Not an issue per se, a suggestion

For debugging functions, chrome has a debug method
for ex-

var analytics = {
  log : function(){
  }
}
debug(analytics.log)

Now on calling analytics.log(), the debugger stops inside the function
so for objects whose functions are being added to breakOn on read , maybe the debug construct can be used. However one issue with this is the user has to execute the breakonaccess script in the console itself, as the debug is part of command line API and hence is not available to snippets/bookmarklets etc. I could file a PR if the people like the idea

Could you add an explicit license?

I'd like to share and use this at work, but our lawyers are against using anything unless it has an ISC or similar license.