Узнайте, открыта ли консоль Chrome - PullRequest
Новая
       101

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

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 ]

115 голосов
/ 04 июня 2015

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 получат свой идентификатор 

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);
72 голосов
/ 18 октября 2011

функция toString (2019)

Кредит Overcl9ck комментарий к этому ответу. Замена регулярного выражения /./ на пустой функциональный объект все еще работает. 

var devtools = function(){};
devtools.toString = function() {
  this.opened = true;
}

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

регулярное выражение toString (2017-2018)

Поскольку первоначального аскера больше не существует, и это все еще принятый ответ, добавим это решение для наглядности. Кредит Антонин Хильдебранд комментарий zswang ответ . Это решение использует тот факт, что toString() не вызывается для зарегистрированных объектов, если консоль не открыта. 

var devtools = /./;
devtools.toString = function() {
  this.opened = true;
}

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

console.profiles (2013)

Обновление: console.profiles удалено из Chrome. Это решение больше не работает.

Спасибо Полу Ирландскому за указание на это решение из Откройте для себя DevTools , используя профилировщик: 

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

window.innerHeight (2011)

Этот другой параметр может обнаружить, что закрепленный инспектор был открыт открытым после загрузки страницы, но он не сможет обнаружить неотстыкованного инспектора или если инспектор уже был открыт при загрузке страницы. Существует также потенциал для ложных срабатываний. 

window.onresize = function()
{
    if ((window.outerHeight - window.innerHeight) > 100)
        alert('Docked inspector was opened');
}
21 голосов
/ 08 октября 2013

Я создал 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.

14 голосов
/ 20 июня 2014

Я нашел способ узнать, открыта ли консоль Chrome или нет. Это все еще хак, но он более точен и будет работать, если консоль отстыкована или нет.

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

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

(1 миллисекунда = 1000 микросекунд)

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

Демо здесь .

Обновление:

@ zswang нашел наилучшее на данный момент решение - посмотрите его ответ

7 голосов
/ 24 июня 2017

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

setTimeout(function() {while (true) {eval("debugger");}}, 0);
5 голосов
/ 26 июля 2018

Я нашел новый метод: 

var b=new Blob()
Object.defineProperty(b,'size',{get(){
    alert('The devtool was opened!')
}})
setTimeout(function(){console.log(b)},3000)

тест онлайн

4 голосов
/ 16 января 2018

Очень надежный хак

По сути, установите 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);
});
3 голосов
/ 07 декабря 2014

Я написал в блоге сообщение об этом: 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 ?")
    }
  });
});
3 голосов
/ 06 августа 2014

Есть хитрый способ проверить его на наличие расширений с разрешением '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){ ... })
2 голосов
/ 19 октября 2011

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

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

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

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

Обновление:

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

Страница:
...