Have you ever thought about how to detect if the chrome dev tools is opened or not, even more, listen when it's opening? I have, and today I'm going to show a simple trick.
After some Google researches, I found many tricks but unfortunately, many of them aren't working anymore. There's just one solution (after me) which can deal with that. Take a look to this (copy and paste it to your code, it's ready to use solution):
Let's dive into it a bit and understand what's going on there. So, first of all, we create an element (it doesn't require to be new Image()
, I think new Audio()
would work just as well), we use Object.defineProperty
to define the id
property of the element and add a function callback on get
. Pretty clever, right? Now every time when the element.id is taken, the callback function will run - that's what we need, put there the functions to run when chrome dev tools will be opened.
So the interesting part is the last line, why callback function is not running if the console.log
is already called which means element.id as well? Well, it's not true, console.log
is called only when chrome dev console tool is opened which tries to log
element as well as id
property - and what's happening when id
property is taken? Right, it triggers the (get
) callback function.
Do you know other tricks that nowadays really work? Share them with us, I'll include in this article.
Top comments (0)