Узнайте, открыта ли консоль Chrome - PullRequest
115 голосов
/ 17 октября 2011

Я использую этот маленький скрипт, чтобы узнать, открыт ли Firebug:

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

И он работает хорошо.Теперь я искал полчаса, чтобы найти способ определить, открыта ли встроенная консоль веб-разработчика Google Chrome, но я не смог найти подсказки.

This:

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

не работает.

РЕДАКТИРОВАТЬ:

Таким образом, кажется, что невозможно определить, открыта ли консоль Chrome.Но есть « hack », который работает, с некоторыми недостатками:

  • не будет работать, когда консоль отстыкована
  • не будет работать, когда консоль открытазагрузка страницы

Итак, сейчас я выберу ответ Unsigned, но если у кого-нибудь возникнет блестящая идея, он все равно сможет ответить, и я изменю выбранный ответ!Спасибо!

Ответы [ 13 ]

1 голос
/ 16 мая 2017

Также вы можете попробовать это: 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);
});
0 голосов
/ 07 января 2018

Некоторые ответы здесь перестанут работать в 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);

});
0 голосов
/ 19 июля 2017

Если вы разработчики, которые делают что-то во время разработки.Проверьте это расширение Chrome.Это поможет вам определить, когда Chrome Devtoos открывается или закрывается.

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

Это расширение помогает разработчикам Javascript определять, когда Chrome Devtools открывается или закрывается на текущей странице.Когда Chrome Devtools закрывается / открывается, расширение вызывает событие с именем devtoolsStatusChanged в элементе window.document.

Это пример кода:

 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
    }
});
...