Chrome konsolunun açık olup olmadığını öğrenin

Firebug açık olup olmadığını öğrenmek için bu küçük komut dosyası kullanıyorum:

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

Ve iyi çalışıyor. Şimdi Google Chrome'un yerleşik web geliştirici konsolunun açık olup olmadığını tespit etmenin bir yolunu bulmak için yarım saat arıyordum, ancak herhangi bir ipucu bulamadım.

Bu:

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

çalışmıyor.

DÜZENLE:

Dolayısıyla, Chrome konsolunun açık olup olmadığını tespit etmek mümkün görünmüyor. Ama bazı dezavantajlarla çalışan bir " kesmek " var:

• konsol çıkarıldığında çalışmaz
• sayfa yüklendiğinde konsol açıkken çalışmaz

Şimdilik, İmzasız'ın cevabını seçeceğim, ancak bazıları1 parlak bir fikir bulursa, yine de cevaplamaya açıktır ve seçilen cevabı değiştiririm! Teşekkürler!

requestAnimationFrame (2019 Sonu)

Bu önceki cevapları tarihsel bağlam için burada bırakmak. Şu anda Muhammed Umer'in yaklaşımı Chrome 78 üzerinde çalışıyor ve ek olarak hem açık hem de açık olayları tespit etme avantajı.

İşlev (2019)

Kredi Overcl9ck Bu yanıt hakkındaki bireyin comment. Normal ifadeyi /./boş bir işlev nesnesiyle değiştirmek yine de çalışır.

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

Regex toString (2017-2018)

Orijinal asker artık etrafta görünmüyor ve bu hala kabul edilen cevap ve görünürlük için bu çözümü ekliyor. Kredi gider Antonin Hildebrand 'ın yorumun üzerine zswang s' cevabı . Bu çözüm toString(), konsol açık olmadıkça günlüğe kaydedilen nesnelerde çağrılmaması gerçeğinden yararlanır .

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)

Güncelleme: console.profiles Chrome'dan kaldırıldı. Bu çözüm artık çalışmıyor.

Profil oluşturucuyu kullanarak Discover DevTools'un bu çözümüne işaret ettiği için Paul Irish'a teşekkürler :

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)

Bu diğer seçenek , sayfa yüklendikten sonra açılan yerleşik denetçiyi algılayabilir , ancak çıkarılan bir denetleyiciyi algılayamaz veya denetçinin sayfa yüklemesinde zaten açık olup olmadığını algılayamaz. Ayrıca yanlış pozitifler için bazı potansiyeller vardır.

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

demo: https://jsbin.com/cecuzeb/edit?output (2018-03-16'da güncelleme)

paket: https://github.com/zswang/jdetects

“Element” yazdırırken Chrome geliştirici araçları kimliğini alacak

var checkStatus;

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

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

Başka bir sürüm (yorumlardan)

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

Normal bir değişken yazdır ：

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

Çok Güvenilir Hack

Temelde özelliği bir alıcı ayarlayın ve konsolda oturum açın. Görünüşe göre şey sadece konsol açıkken erişilir.

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'un ne zaman açık olduğunu tespit eden devtools algılaması oluşturdum :

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

Bir etkinliği de dinleyebilirsiniz:

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

DevTools kaldırıldığında çalışmaz. Ancak, Chrome / Safari / Firefox DevTools ve Firebug ile çalışır.

Chrome Konsolu'nun açılıp açılmadığını anlamanın bir yolunu buldum. Hala bir hack ama çok daha doğru ve konsol sökülmüş veya değil hava çalışır.

Temel olarak bu kodu konsol kapalıyken çalıştırmak yaklaşık ~ 100 mikrosaniye alır ve konsol açıkken yaklaşık 200 mikrosaniyenin iki katı kadar sürer.

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

(1 milisaniye = 1000 mikrosaniye)

Burada daha fazla yazdım .

Demo burada .

Güncelleme:

@zswang mevcut en iyi çözümü buldu - cevabına göz atın

Amacınız geliştirici araçlarını sıkmaksa, bunu deneyin (JS kodunun gizlendiği bir yerde daha karmaşık bir sürümünü buldum, çok sinir bozucu):

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

'Sekmeler' iznine sahip uzantılar olup olmadığını kontrol etmenin zor bir yolu var:

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

Ayrıca sayfanız için açık olup olmadığını da kontrol edebilirsiniz:

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

Bununla ilgili bir blog yazısı yazdım: http://nepjua.org/check-if-browser-console-is-open/

Sabitlenmiş veya serbest bırakılmış olduğunu tespit edebilir

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 geliştirici araçları gerçekten WebKit'in WebCore kütüphanesinin sadece bir parçasıdır. Dolayısıyla bu soru Safari, Chrome ve diğer WebCore tüketicileri için geçerlidir.

Bir çözüm varsa, WebKit web denetçisi açık ve kapalı olduğunda DOM'daki bir farkı temel alır. Ne yazık ki, bu bir tür tavuk ve yumurta problemidir, çünkü müfettişi, müfettiş kapalıyken DOM'u gözlemlemek için kullanamayız.

Yapabileceğiniz şey, tüm DOM ağacını dökmek için biraz JavaScript yazmaktır. Ardından, denetçi açıkken bir kez ve denetleyici kapalı olduğunda bir kez çalıştırın. DOM'daki herhangi bir fark muhtemelen web denetçisinin bir yan etkisidir ve bunu kullanıcının denetleyip denetlemediğini test etmek için kullanabiliriz.

Bu bağlantı bir DOM döküm komut dosyası için iyi bir başlangıçtır, ancak DOMWindowyalnızca nesneyi değil , tüm nesneyi dökmek istersiniz document.

Güncelleme:

Şimdi bunu yapmanın bir yolu var gibi görünüyor. Chrome Inspector Detector'a göz atın

Ayrıca şunu da deneyebilirsiniz: 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);
});

Muhammed Umer'in yaklaşımı benim için çalıştı ve React kullanıyorum, bu yüzden bir kanca çözümü yapmaya karar verdim:

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
}

NOT: Onunla uğraştığımda, en uzun süre işe yaramadı ve nedenini bulamadım. Sildimconsole.dir(element);Nasıl çalıştığı için kritik olan . Açıklayıcı olmayan konsol eylemlerinin çoğunu siliyorum çünkü sadece yer kaplıyorlar ve işlev için genellikle gerekli değiller, bu yüzden benim için çalışmadı.

Kullanmak için:

import React from 'react'

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

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

Umarım bu React kullanan herkese yardımcı olur. Eğer birisi bunu genişletmek isterse, sonsuz döngüyü bir noktada durdurabilmek istiyorum (bunu her bileşende kullanmadığım için) ve konsolu temiz tutmanın bir yolunu bulmak istiyorum.

Eğer geliştirme sırasında bir şeyler yapan geliştiriciler iseniz. Bu Chrome uzantısına göz atın. Chrome Devtoos'ın ne zaman açıldığını veya kapandığını tespit etmenize yardımcı olur.

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

Bu uzantı, Javascript geliştiricilerinin Chrome Devtools'un geçerli sayfada ne zaman açık veya kapalı olduğunu algılamasına yardımcı olur. Chrome Devtools kapatıldığında / açıldığında, uzantı window.document öğesinde 'devtoolsStatusChanged' adlı bir etkinliği oluşturur.

Bu örnek koddur:

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

Burada bazı yanıtlar Chrome 65'de çalışmayı durduracaktır. İşte Chrome'da oldukça güvenilir çalışan ve hafifletilmesi toString()yöntemden çok daha zor olan bir zamanlama saldırısı alternatifi . Ne yazık ki Firefox'ta o kadar güvenilir değil.

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

});

Gelince Chrome / 77.0.3865.75 bir versiyonu 2019 değil çalışır. toString , Inspector açılmadan hemen çağrılır.

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

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

console.log('%c', detector)

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