Узнайте, открыта ли консоль Chrome

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

---

при печати" элемент " Chrome developer tools получит свой идентификатор

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

Я создал 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 или нет. Это все еще хак, но это более точный и будет работать погода консоль отстыкована или нет.

в основном выполнение этого кода с закрытой консолью занимает около ~100 микросекунд, а при открытии консоли требуется примерно в два раза больше ~200 микросекунд.

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

(1 мс = 1000 МКС)

Я написал больше об этом здесь.

демо здесь.

---

обновление:

@zswang нашел текущее лучшее решение-проверьте его ответ

Если ваша цель-затормозить инструменты разработчика, попробуйте это (я нашел более сложную версию этого в месте, где JS-код был запутан, это очень раздражает):

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

есть хитрый способ проверить его на наличие расширений с разрешением "вкладки":

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 b=new Blob()
Object.defineProperty(b,'size',{get(){
    alert('The devtool was opened!')
}})
setTimeout(function(){console.log(b)},3000)

инструменты разработчика Chrome-это всего лишь часть библиотеки webkit WebCore. Таким образом, этот вопрос относится к Safari, Chrome и любым другим потребителям WebCore.

Если решение существует, оно будет основано на разнице в DOM, когда веб-инспектор WebKit открыт и когда он закрыт. К сожалению, это своего рода проблема курицы и яйца, потому что мы не можем использовать инспектора для наблюдения за DOM, когда инспектор закрыт.

что вы можете быть в состоянии сделать это напишите немного JavaScript, чтобы сбросить все дерево DOM. Затем запустите его один раз, когда инспектор открыт, и один раз, когда инспектор закрыт. Любая разница в DOM, вероятно, является побочным эффектом веб-инспектора, и мы можем использовать его для проверки того, проверяет ли пользователь или нет.

этой ссылке это хорошее начало для сценария демпинга DOM , но вы захотите сбросить весь

очень надежный работник

в основном установить геттер на свойство и войти в консоль. По-видимому, вещь получает доступ только тогда, когда консоль открыта.

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').innerHTML = checkStatus;
    requestAnimationFrame(check);
});

также вы можете попробовать это: 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 закрывается/открывается, расширение будет вызовите событие с именем '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);

});