Finden Sie heraus, ob die Chrome-Konsole geöffnet ist

Ich benutze dieses kleine Skript, um herauszufinden, ob Firebug geöffnet ist:

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

Und es funktioniert gut. Jetzt suchte ich eine halbe Stunde lang nach einer Möglichkeit, festzustellen, ob die integrierte Webentwicklerkonsole von Google Chrome geöffnet ist, konnte jedoch keinen Hinweis finden.

Dies:

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

funktioniert nicht

BEARBEITEN:

Es scheint also nicht möglich zu sein, festzustellen, ob die Chrome-Konsole geöffnet ist. Aber es gibt einen " Hack ", der funktioniert, mit einigen Nachteilen:

• funktioniert nicht, wenn die Konsole nicht angedockt ist
• funktioniert nicht, wenn die Konsole beim Laden der Seite geöffnet ist

Also werde ich vorerst die Antwort von Unsigned wählen, aber wenn jemand eine brillante Idee hat, kann er gerne noch antworten und ich ändere die ausgewählte Antwort! Vielen Dank!

requestAnimationFrame (Ende 2019)

Lassen Sie diese vorherigen Antworten hier für den historischen Kontext. Derzeit ist Muhammad Ulers Ansatz funktioniert in Chrome 78 mit dem zusätzlichen Vorteil, dass sowohl geschlossene als auch offene Ereignisse erkannt werden.

Funktion toString (2019)

Dank an Overcl9cks Kommentar zu dieser Antwort. Das Ersetzen des regulären Ausdrucks /./durch ein leeres Funktionsobjekt funktioniert weiterhin.

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)

Da der ursprüngliche Fragesteller nicht mehr in der Nähe zu sein scheint und dies immer noch die akzeptierte Antwort ist, fügen Sie diese Lösung zur besseren Sichtbarkeit hinzu. Kredit geht an Antonin Hildebrand ‚s Kommentar auf zswang ‘ s Antwort . Diese Lösung nutzt die Tatsache, dass toString()protokollierte Objekte nur aufgerufen werden, wenn die Konsole geöffnet ist.

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)

Aktualisieren: console.profiles wurde aus Chrome entfernt. Diese Lösung funktioniert nicht mehr.

Vielen Dank an Paul Irish für den Hinweis auf diese Lösung von Discover DevTools mit dem Profiler:

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)

Diese andere Option erkennt, dass der angedockte Inspektor nach dem Laden der Seite geöffnet wird, erkennt jedoch keinen nicht angedockten Inspektor oder ob der Inspektor beim Laden der Seite bereits geöffnet war. Es besteht auch die Möglichkeit von Fehlalarmen.

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 (Update am 16.03.2018)

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

Beim Drucken von "Element" erhalten Chrome-Entwicklertools ihre ID

var checkStatus;

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

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

Eine andere Version (aus Kommentaren)

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

Drucken Sie eine reguläre Variable:

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

Sehr zuverlässiger Hack

Legen Sie im Grunde einen Getter für die Eigenschaft fest und melden Sie ihn in der Konsole an. Anscheinend wird auf das Ding nur zugegriffen, wenn die Konsole geöffnet ist.

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>

Ich habe devtools-detect erstellt, das erkennt, wann DevTools geöffnet ist:

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

Sie können sich auch ein Ereignis anhören:

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

Es funktioniert nicht, wenn DevTools nicht angedockt ist. Funktioniert jedoch mit den Chrome / Safari / Firefox DevTools und Firebug.

Ich habe einen Weg gefunden, um festzustellen, ob die Chrome-Konsole geöffnet ist oder nicht. Es ist immer noch ein Hack, aber es ist viel genauer und funktioniert, ob die Konsole nicht angedockt ist oder nicht.

Grundsätzlich dauert das Ausführen dieses Codes bei geschlossener Konsole ungefähr 100 Mikrosekunden, und während die Konsole geöffnet ist, dauert es ungefähr doppelt so viel wie 200 Mikrosekunden.

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

(1 Millisekunde = 1000 Mikrosekunden)

Ich habe mehr darüber geschrieben hier .

Demo ist da .

Aktualisieren:

@zswang hat die derzeit beste Lösung gefunden - lesen Sie seine Antwort

Wenn Sie die Entwicklertools blockieren möchten, versuchen Sie Folgendes (ich habe eine kompliziertere Version an einer Stelle gefunden, an der JS-Code verschleiert wurde, was sehr ärgerlich ist):

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

Es gibt eine schwierige Möglichkeit, mit der Berechtigung "Tabs" nach Erweiterungen zu suchen:

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

Sie können auch überprüfen, ob es für Ihre Seite geöffnet ist:

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

Ich habe einen Blog-Beitrag darüber geschrieben: http://nepjua.org/check-if-browser-console-is-open/

Es kann erkennen, ob es angedockt oder nicht angedockt ist

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)

Die Chrome-Entwicklertools sind eigentlich nur ein Teil der WebCore-Bibliothek von WebKit. Diese Frage gilt also für Safari, Chrome und alle anderen WebCore-Kunden.

Wenn eine Lösung vorhanden ist, basiert sie auf einem Unterschied im DOM, wenn der WebKit-Webinspektor geöffnet und geschlossen ist. Leider ist dies eine Art Henne-Ei-Problem, da wir den Inspektor nicht verwenden können, um das DOM zu beobachten, wenn der Inspektor geschlossen ist.

Möglicherweise können Sie ein wenig JavaScript schreiben, um den gesamten DOM-Baum zu sichern. Führen Sie es dann einmal aus, wenn der Inspektor geöffnet ist, und einmal, wenn der Inspektor geschlossen ist. Jeder Unterschied im DOM ist wahrscheinlich eine Nebenwirkung des Webinspektors, und wir können ihn möglicherweise verwenden, um zu testen, ob der Benutzer prüft oder nicht.

Dieser Link ist ein guter Anfang für ein DOM-Dumping-Skript, aber Sie möchten DOMWindownicht nur das gesamte Objekt sichern document.

Aktualisieren:

Sieht so aus, als gäbe es jetzt eine Möglichkeit, dies zu tun. Schauen Sie sich den Chrome Inspector Detector an

Sie können dies auch versuchen: 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);
});

Wenn Sie Entwickler sind, die während der Entwicklung Dinge tun. Schauen Sie sich diese Chrome-Erweiterung an. Es hilft Ihnen zu erkennen, wann Chrome Devtoos geöffnet oder geschlossen wird.

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

Mit dieser Erweiterung können Javascript-Entwickler erkennen, wann Chrome Devtools auf der aktuellen Seite geöffnet oder geschlossen ist. Wenn Chrome Devtools geschlossen / geöffnet wird, löst die Erweiterung ein Ereignis mit dem Namen 'devtoolsStatusChanged' im Element window.document aus.

Dies ist ein Beispielcode:

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

Einige Antworten hier funktionieren in Chrome 65 nicht mehr. Hier ist eine Timing-Angriffsalternative , die in Chrome ziemlich zuverlässig funktioniert und viel schwerer zu entschärfen ist als die toString()Methode. Leider ist es in Firefox nicht so zuverlässig.

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

});

Wie für Chrome / 77.0.3865.75 funktioniert eine Version von 2019 nicht. toString wird sofort aufgerufen, ohne dass der Inspektor geöffnet wird.

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

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

console.log('%c', detector)

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

Der Ansatz von Muhammad Umer hat bei mir funktioniert und ich verwende React. Deshalb habe ich beschlossen, eine Hooks-Lösung zu finden:

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
}

HINWEIS: Als ich damit herumgespielt habe, hat es die längste Zeit nicht funktioniert und ich konnte nicht herausfinden, warum. Ich hatte gelöscht, console.dir(element);was für die Funktionsweise entscheidend ist. Ich lösche die meisten nicht beschreibenden Konsolenaktionen, da sie nur Speicherplatz beanspruchen und normalerweise für die Funktion nicht erforderlich sind. Deshalb hat es bei mir nicht funktioniert.

Um es zu benutzen:

import React from 'react'

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

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

Ich hoffe, dies hilft jedem, der React verwendet. Wenn jemand dies erweitern möchte, möchte ich in der Lage sein, die Endlosschleife irgendwann zu stoppen (da ich dies nicht in jeder Komponente verwende) und einen Weg zu finden, die Konsole sauber zu halten.