Website detects devtools. Code is attached of DevToolDectect.js file from the website sources

Question

I am not a developer and have very basic understanding for Javascript code. I am trying to open dev tools on a website but it detects that dev tools have been opened and gives a popup written "DevTools detected", and then closes the website tab after I press ok. This is the file in the sources named DevToolDetect.js. I am trying to understand how does it detect that devtools have been opened even when the menu is undocked. If there is a problem in the question, kindly tell so I can give any required imformation needed. I don't need a line by line explanation, just a summary will do. Thanks!

/*!
devtools-detect
Detect if DevTools is open
https://github.com/sindresorhus/devtools-detect
By Sindre Sorhus
MIT License
*/
(function () {
    'use strict';

    const devtools = {
        isOpen: false,
        orientation: undefined
    };

    const threshold = 160;

    const emitEvent = (isOpen, orientation) => {
        window.dispatchEvent(new CustomEvent('devtoolschange', {
            detail: {
                isOpen,
                orientation
            }
        }));
    };

    const main = ({emitEvents = true} = {}) => {
        const widthThreshold = window.outerWidth - window.innerWidth > threshold;
        const heightThreshold = window.outerHeight - window.innerHeight > threshold;
        const orientation = widthThreshold ? 'vertical' : 'horizontal';

        if (
            !(heightThreshold && widthThreshold) &&
            ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)
        ) {
            if ((!devtools.isOpen || devtools.orientation !== orientation) && emitEvents) {
                emitEvent(true, orientation);
            }

            devtools.isOpen = true;
            devtools.orientation = orientation;
        } else {
            if (devtools.isOpen && emitEvents) {
                emitEvent(false, undefined);
            }

            devtools.isOpen = false;
            devtools.orientation = undefined;
        }
    };

    main({emitEvents: false});
    setInterval(main, 500);

    if (typeof module !== 'undefined' && module.exports) {
        module.exports = devtools;
    } else {
        window.devtools = devtools;
    }
})();

Answer 1

Looks like historically grown heuristic try & error for non-Chrome browsers and utilising devtools object for Chrome based browsers.

For non-Chrome it does some guesswork by calculating if there is a part of the browser window that does not display a web page and might be big enough for hosting devtools, and it also checks for traces of Firebug, the glorious godfather of any sensible devtools, though there is very, very low probability to still find it nowaddays.

In a short test with Chrome, this script was not able to detect a detached devtools window.

Feel invited to get into depth with these hints. You might learn a lot, considering not at least that this is a Sindre Sorhus script, the man with the most npm packages and GitHub repos mankind is aware of.