Узнайте, открыта ли консоль 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 получит свой 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);

Я создал devtools-обнаружение который обнаруживает, когда 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);

существует сложный способ проверить его на наличие расширений с разрешением "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 b=new Blob()
Object.defineProperty(b,'size',{get(){
    alert('The devtool was opened!')
}})
setTimeout(function(){console.log(b)},3000)

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

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

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

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

обновление:

похоже, что есть способ сделать это сейчас. Проверьте Chrome Инспектор Детектор

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

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

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

});