2018-01-17

Is DevTools open?

If you follow the web world, you have hopefully read this recent post on how we need to protect people against attacks on user data. On a mostly unrelated note, I wrote some assertions that I wanted to throw errors when I'm not debugging things, but console.log them when I am, and then trip a debugger statement. It's not really api detectable what mode I am in, but the openness of browser DevTools is a fair proxy, for me, at least, and the examples it linked to gave me a shim for crafting myself the window.isDevToolsOpen setter bookmarklet I wanted:

javascript:((i) => {
  Object.defineProperty(i, 'id', {
    get: () => { window.isDevToolsOpen = true; }
  });
  setInterval(() => {
    window.isDevToolsOpen = false;
    console.debug(i);
  }, 1000);
})(new Image)

Maybe it'll come in handy for someone else. These things rarely work forever; this post was written in the days of Chrome 63.0.3239.84 and Safari 11.0.2 (13604.4.7.1.3), when it did, whereas it already doesn't in Chrome Canary 65.0.3322.0, for instance. It gave me a useful time window of really convenient debugging a piece of complex code, which might require a full-blown browser extension at a later time. (Feel encouraged to comment if you made one.)