Hacker News new | ask | show | jobs
by temp12192021 1180 days ago
https://sindresorhus.com/devtools-detect/

https://github.com/sindresorhus/devtools-detect

EDIT: doesn't seem to work if I have devtools as a separate window

8 comments

Wow, that code is entirely unreliable. It just detects your browser's viewport being outside of some threshold of a "normal" aspect ratio and then just blindly assumes that means the devtools are open. The only devtool it can actually detect is Firebug. Everything else is nothing but a blind guess based on the size of your viewport. I'd be astonished if anyone used this code for anything serious.
That person churns out a staggering amount of code so it’s not a surprise I guess that the bit about “does this code actually work” is probably lower on the list of concerns
… that incorrectly detects devtools as open, when it isn't (false positive), and fails to detect devtools when it is open in a separate window (false negative)…

Yeah, as other posters hint at, vertical tabs. But it isn't just vertical tabs that'll trigger it, any sidebar will, including native/vanilla ones; AFAICT it's just looking at the client area being less than the window by some threshold.

It detects Microsoft Edge's Sidebar too, which opens on hover. It's going to create a lot of false positives.
Tree Style Tab is apparently detected as vertical dev tools, and opening the horizontal dev tools changes it to no. This is kind of hilarious.
Vertical tabs in Edge seems to trigger false positives on this. Really hope that's not the only heuristic they're using.
Same goes for Sidebery in Firefox, but then it changes to "no" if I do open the Dev Tools. As a non web-dev, this behaviour is truly weird.
Looking at the code[0], it just defines an aspect ratio threshold (170px in either direction, on line 13) for your browser's viewport and triggers if it's outside of that on width or height. So when you open a second panel, your viewport goes back to being closer to 16:9/16:10 and the tool considers that within both thresholds.

The detection is hilariously primitive, entirely unreliable, and only knows about your devtools directly if you're using Firebug.

[0]: https://github.com/sindresorhus/devtools-detect/blob/main/in...

False positive in the Arc browser, no devtools open.
This is so hilarious.

It only detects if there is a block in the browser that does not serve as website rendering. Since I use Tree Tab on side panel of Firefox, this plugin will believe I have opened devtools all the time.

Edit: it will think I closed devtools when I really open devtools. I start to wonder how shitty the code is.

I just turned on responsive mode in Firefox to fool it. Definitely not reliable.
On iPhone 13 mini Safari it says I have the dev tools open. Only when I hide the toolbar it says „no“.