Here's a neat trick you can use to detect every time Chrome-Dev tools is opened.

function onDevToolsOpen(fn) {
    var beacon = new Error();
    Object.defineProperty(beacon, "message", {
        get: fn
    });
    console.log("%c", beacon);
}

onDevToolsOpen(function() {
    document.body.innerHTML += "Detected dev tools open<br />";
});

Sometimes you'll get duplicate events but besides that it works pretty well! Every time the devtools window is opened, our beacon Error object will have its message property accessed, causing handler to fire.

You can try it out for yourself on CodePen

This method is very similiar to the one described in this StackOverflow comment which mentions that toString is only evaulated when the console is open. The same principle applies here, except instead of using toString, we're leveraging the fact that the console will access our message property.