找出Chrome控制台是否打开

我正在使用这个小脚本来查找Firebug是否打开：

if (window.console && window.console.firebug) {
    //is open
};

而且效果很好。现在，我正在搜索半小时，以找到一种方法来检测Google Chrome的内置Web开发人员控制台是否已打开，但找不到任何提示。

这个：

if (window.console && window.console.chrome) {
    //is open
};

不起作用。

编辑：

因此，似乎无法检测到Chrome控制台是否处于打开状态。但是有一个“ hack ”有效，但有一些缺点：

• 控制台断开连接时将不起作用
• 在页面加载中打开控制台时将不起作用

因此，我现在将选择Unsigned的答案，但是如果some1提出了一个绝妙的主意，欢迎他继续回答，我将更改选择的答案！谢谢！

requestAnimationFrame（2019年末）

这些先前的答案留在这里作为历史背景。目前，穆罕默德·乌默尔（Muhammad Umer）的方法可在Chrome 78上运行，并具有检测关闭事件和打开事件的附加优势。

函数toString（2019）

感谢Overcl9ck对这个答案的评论。/./用空函数对象替换正则表达式仍然有效。

var devtools = function() {};
devtools.toString = function() {
  if (!this.opened) {
    alert("Opened");
  }
  this.opened = true;
}

console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened

正则表达式toString（2017-2018）

由于原始的问询者似乎不再存在，并且仍然是公认的答案，因此添加了此解决方案以提高可见性。幸得安东宁·希尔德布兰德的评论上zswang s'的答案。该解决方案利用了以下事实：toString()除非打开控制台，否则不会在记录的对象上调用该事实。

var devtools = /./;
devtools.toString = function() {
  if (!this.opened) {
    alert("Opened");
  }
  this.opened = true;
}

console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened

console.profiles（2013）

更新： console.profiles已从Chrome中删除。该解决方案不再起作用。

感谢Paul Irish使用探查器从Discover DevTools指出了该解决方案：

function isInspectOpen() {
  console.profile();
  console.profileEnd();
  if (console.clear) {
    console.clear();
  }
  return console.profiles.length > 0;
}
function showIfInspectIsOpen() {
  alert(isInspectOpen());
}

<button onClick="showIfInspectIsOpen()">Is it open?</button>

window.innerHeight（2011）

此其他选项可以在页面加载之后检测到已停靠的检查器，但无法检测到未停靠的检查器，或者该检测器是否已在页面加载时打开。误报也有可能。

window.onresize = function() {
  if ((window.outerHeight - window.innerHeight) > 100) {
    alert('Docked inspector was opened');
  }
}

Chrome 65+（2018）

r = /./
r.toString = function () {
    document.title = '1'
}
console.log('%c', r);

演示：https ://jsbin.com/cecuzeb/edit?output（更新于2018-03-16）

包：https：//github.com/zswang/jdetects

打印“ Element”时，Chrome开发人员工具将获得其ID

var checkStatus;

var element = document.createElement('any');
element.__defineGetter__('id', function() {
    checkStatus = 'on';
});

setInterval(function() {
    checkStatus = 'off';
    console.log(element);
    console.clear();
}, 1000);

另一个版本（来自评论）

var element = new Image();
Object.defineProperty(element, 'id', {
  get: function () {
    /* TODO */
    alert('囧');
  }
});
console.log('%cHello', element);

打印一个常规变量：

var r = /./;
r.toString = function() {
  document.title = 'on';
};
console.log(r);

非常可靠的破解

基本上在属性上设置一个吸气剂，并将其记录在控制台中。显然，只有在控制台打开时，事物才能被访问。

https://jsfiddle.net/gcdfs3oo/44/

var checkStatus;

var element = new Image();
Object.defineProperty(element, 'id', {
  get: function() {
    checkStatus='on';
    throw new Error("Dev tools checker");
  }
});

requestAnimationFrame(function check() {
  checkStatus = 'off';
  console.dir(element);
  document.querySelector('#devtool-status').className  = checkStatus;
  requestAnimationFrame(check);
});

.on{
  color:limegreen;
}

.off{
  color:red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.css" integrity="sha256-DVK12s61Wqwmj3XI0zZ9MFFmnNH8puF/eRHTB4ftKwk=" crossorigin="anonymous" />

<p>
  <ul>
    <li>
      dev toolbar open: icon is <span class="on">green</span>
    </li>
    <li>
      dev toolbar closed: icon is <span class="off">red</span>
    </li>
  </ul>
</p>
<div id="devtool-status"><i class="fas fa-7x fa-power-off"></i></div>
<br/>
<p><b>Now press F12 to see if this works for your browser!</b></p>

我创建了devtools-detect，它检测DevTools何时打开：

console.log('is DevTools open?', window.devtools.open);

您还可以听一个事件：

window.addEventListener('devtoolschange', function (e) {
    console.log('is DevTools open?', e.detail.open);
});

解除对接DevTools时，它不起作用。但是，可与Chrome / Safari / Firefox DevTools和Firebug一起使用。

我找到了一种方法来判断Chrome控制台是否已打开。它仍然是一个hack，但是它的准确性更高，并且可以在控制台未插接的情况下正常工作。

基本上，在关闭控制台的情况下运行此代码大约需要100微秒，而在打开控制台的情况下，则需要大约200微秒的两倍。

console.log(1);
console.clear();

（1毫秒= 1000微秒）

我在这里写了更多有关它的内容。

演示在这里。

更新：

@zswang找到了当前最好的解决方案-查看他的答案

如果您的目标是阻塞开发人员工具，请尝试以下操作（我在混淆了JS代码的地方找到了一个更复杂的版本，这很烦人）：

setTimeout(function() {while (true) {eval("debugger");}}, 0);

有一个棘手的方法来检查它是否具有'tabs'权限的扩展：

chrome.tabs.query({url:'chrome-devtools://*/*'}, function(tabs){
    if (tabs.length > 0){
        //devtools is open
    }
});

您也可以检查页面是否打开：

chrome.tabs.query({
    url: 'chrome-devtools://*/*',
    title: '*example.com/your/page*'
}, function(tabs){ ... })

我写了一篇关于此的博客文章：http : //nepjua.org/check-if-browser-console-is-open/

它可以检测它是否已对接或已对接

function isConsoleOpen() {  
  var startTime = new Date();
  debugger;
  var endTime = new Date();

  return endTime - startTime > 100;
}

$(function() {
  $(window).resize(function() {
    if(isConsoleOpen()) {
        alert("You're one sneaky dude, aren't you ?")
    }
  });
});

var div = document.createElement('div');
Object.defineProperty(div,'id',{get:function(){
    document.title = 'xxxxxx'
}});

setTimeout(()=>console.log(div),3000)

Chrome开发人员工具实际上只是WebKit WebCore库的一部分。因此，此问题适用于Safari，Chrome和任何其他WebCore使用者。

如果存在解决方案，则将基于WebKit Web检查器打开和关闭时DOM中的差异。不幸的是，这是种鸡与蛋的问题，因为在关闭检查器时我们无法使用检查器来观察DOM。

您可能可以做的是编写一些JavaScript来转储整个DOM树。然后在检查器打开时运行一次，在检查器关闭时运行一次。DOM中的任何差异都可能是Web检查器的副作用，我们也许可以使用它来测试用户是否进行检查。

此链接是DOM转储脚本的良好起点，但是您将要转储整个DOMWindow对象，而不仅仅是转储document。

更新：

看起来现在有一种方法可以执行此操作。查看Chrome Inspector Detector

您也可以尝试以下方法：https : //github.com/sindresorhus/devtools-detect

// check if it's open
console.log('is DevTools open?', window.devtools.open);
// check it's orientation, null if not open
console.log('and DevTools orientation?', window.devtools.orientation);

// get notified when it's opened/closed or orientation changes
window.addEventListener('devtoolschange', function (e) {
    console.log('is DevTools open?', e.detail.open);
    console.log('and DevTools orientation?', e.detail.orientation);
});

如果您是在开发过程中做事的开发人员。查看此Chrome扩展程序。它可帮助您检测何时打开或关闭Chrome Devtoos。

https://chrome.google.com/webstore/detail/devtools-status-detector/pmbbjdhohceladenbdjjoejcanjijoaa?authuser=1

此扩展程序可帮助Javascript开发人员检测Chrome Devtools在当前页面上何时打开或关闭。当Chrome Devtools关闭/打开时，扩展程序将在window.document元素上引发一个名为“ devtoolsStatusChanged”的事件。

这是示例代码：

 function addEventListener(el, eventName, handler) {
    if (el.addEventListener) {
        el.addEventListener(eventName, handler);
    } else {
        el.attachEvent('on' + eventName,
            function() {
                handler.call(el);
            });
    }
}


// Add an event listener.
addEventListener(document, 'devtoolsStatusChanged', function(e) {
    if (e.detail === 'OPENED') {
        // Your code when Devtools opens
    } else {
        // Your code when Devtools Closed
    }
});

这里的一些答案将在Chrome 65中停止工作。这是一种定时攻击替代方法，在Chrome中非常可靠地工作，并且比该toString()方法更难缓解。不幸的是，它在Firefox中并不是那么可靠。

addEventListener("load", () => {

var baseline_measurements = [];
var measurements = 20;
var warmup_runs = 3;

const status = document.documentElement.appendChild(document.createTextNode("DevTools are closed"));
const junk = document.documentElement.insertBefore(document.createElement("div"), document.body);
junk.style.display = "none";
const junk_filler = new Array(1000).join("junk");
const fill_junk = () => {
  var i = 10000;
  while (i--) {
    junk.appendChild(document.createTextNode(junk_filler));
  }
};
const measure = () => {
    if (measurements) {
    const baseline_start = performance.now();
    fill_junk();
    baseline_measurements.push(performance.now() - baseline_start);
    junk.textContent = "";
    measurements--;
    setTimeout(measure, 0);
  } else {
    baseline_measurements = baseline_measurements.slice(warmup_runs); // exclude unoptimized runs
    const baseline = baseline_measurements.reduce((sum, el) => sum + el, 0) / baseline_measurements.length;

    setInterval(() => {
      const start = performance.now();
      fill_junk();
      const time = performance.now() - start;
      // in actual usage you would also check document.hasFocus()
      // as background tabs are throttled and get false positives
      status.data = "DevTools are " + (time > 1.77 * baseline ? "open" : "closed");
      junk.textContent = "";
    }, 1000);
  }
};

setTimeout(measure, 300);

});

对于Chrome / 77 .0. 3865.75 , 2019年的版本不起作用。toString会立即调用而不会打开Inspector。

const resultEl = document.getElementById('result')
const detector = function () {}

detector.toString = function () {
	resultEl.innerText = 'Triggered'
}

console.log('%c', detector)

<div id="result">Not detected</div>

穆罕默德·乌默（Muhammad Umer）的方法对我有用，并且我正在使用React，所以我决定提供一个挂钩解决方案：

const useConsoleOpen = () => {
  const [consoleOpen, setConsoleOpen] = useState(true)

  useEffect(() => {
    var checkStatus;

    var element = new Image();
    Object.defineProperty(element, "id", {
      get: function () {
        checkStatus = true;
        throw new Error("Dev tools checker");
      },
    });

    requestAnimationFrame(function check() {
      checkStatus = false;
      console.dir(element); //Don't delete this line!
      setConsoleOpen(checkStatus)
      requestAnimationFrame(check);
    });
  }, []);

  return consoleOpen
}

注意：当我弄乱它时，它在最长的时间内没有起作用，我也不知道为什么。我删除console.dir(element);了对它如何工作至关重要的内容。我删除了大多数非描述性的控制台操作，因为它们仅占用空间并且通常对该功能不是必需的，因此这就是为什么它对我不起作用的原因。

要使用它：

import React from 'react'

const App = () => {
  const consoleOpen = useConsoleOpen()

  return (
    <div className="App">
      <h1>{"Console is " + (consoleOpen ? "Open" : "Closed")}</h1>
    </div>
  );
}

我希望这对使用React的任何人有帮助。如果有人想对此进行扩展，我希望能够在某个时候停止无限循环（因为我没有在每个组件中都使用此功能），并找到了一种保持控制台清洁的方法。