it-swarm.com.de

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

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

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

Und es funktioniert gut. Nun suchte ich eine halbe Stunde, um herauszufinden, ob die integrierte Webentwicklerkonsole von Google Chrome geöffnet ist. Ich konnte jedoch keinen Hinweis finden.

Diese:

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

funktioniert nicht.

BEARBEITEN:

Es scheint also, dass es nicht möglich ist festzustellen, ob die Chrome-Konsole geöffnet ist. Aber es gibt ein " hack ", das funktioniert, mit einigen Nachteilen:

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

Also werde ich uns für die Antwort von Unsigned entscheiden, aber wenn jemand eine geniale Idee hat, kann er trotzdem antworten und ich ändere die ausgewählte Antwort! Vielen Dank!

111
Oskar

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, wird diese Lösung für Sichtbarkeit hinzugefügt. Gutschrift geht an Antonin Hildebrand 's Kommentar über zswang ' s Antwort . Diese Lösung nutzt die Tatsache, dass toString() für protokollierte Objekte nur aufgerufen wird, wenn die Konsole geöffnet ist.

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

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

konsolenprofile (2013)

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

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

window.innerHeight (2011)

Diese andere Option kann erkennen, dass der angedockte Inspektor geöffnet, nach die Seite geladen wird. Er kann jedoch keinen abgedockten Inspektor erkennen, oder der Inspektor war beim Laden der Seite bereits geöffnet. Es gibt auch ein gewisses Potenzial für Fehlalarme.

window.onresize = function()
{
    if ((window.outerHeight - window.innerHeight) > 100)
        alert('Docked inspector was opened');
}
64
Unsigned

Chrome 65+ (2018)

r = /./
r.toString = function () {
    document.title = '1'
}
console.log('%c', r);

demo: https://jsbin.com/cecuzeb/edit?output (Aktualisierung am 16.03.2013)

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


Beim Drucken von „Element“ erhalten die Entwickler-Tools von Chrome die 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 (von 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);
109
zswang

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

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

Sie können auch eine Veranstaltung anhören:

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

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

20
Sindre Sorhus

Ich habe einen Weg gefunden, um herauszufinden, ob die Chrome-Konsole geöffnet ist oder nicht ... Es ist immer noch ein Hacker, aber es ist genauer und funktioniert, wenn die Konsole abgedockt ist oder nicht.

Im Wesentlichen dauert das Ausführen dieses Codes bei geschlossener Konsole ungefähr ~ 100 Mikrosekunden, und während die Konsole geöffnet ist, dauert sie ungefähr doppelt so viel ~ 200 Mikrosekunden.

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

(1 Millisekunde = 1000 Mikrosekunden)

Ich habe mehr darüber geschrieben hier .

Demo ist hier .


Update:

@zswang hat die aktuell beste Lösung gefunden - überprüfen Sie seine Antwort

13
guya

Wenn Sie das Ziel haben, die Entwicklertools zu blockieren, versuchen Sie Folgendes (ich habe eine kompliziertere Version davon an einem Ort gefunden, an dem JS-Code verschleiert wurde, was sehr nervig ist):

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

Ich habe eine neue Methode gefunden:

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

online testen

5
huiting Chen

Es gibt eine knifflige Methode, um nach Erweiterungen mit der Berechtigung "Tabs" zu suchen:

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

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

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

Ich schrieb dazu einen Blog-Post: 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 ?")
    }
  });
});
3
nepjua

Die Chrome-Entwicklerwerkzeuge sind eigentlich nur ein Teil der WebCore-Bibliothek von WebKit. Diese Frage gilt also für Safari, Chrome und andere WebCore-Benutzer.

Wenn eine Lösung vorhanden ist, basiert dies auf einem Unterschied im DOM, wenn der WebKit-Webinspektor geöffnet ist und geschlossen wird. Leider handelt es sich hierbei um eine Art Hühner- und Eierproblem, da wir den Inspektor nicht dazu verwenden können, 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 ein Nebeneffekt des Web-Inspectors, und wir können ihn möglicherweise verwenden, um zu testen, ob der Benutzer inspiziert oder nicht.

Dieses link ist ein guter Start für ein DOM-Dumping-Skript. Sie sollten jedoch das gesamte DOMWindow-Objekt sichern, nicht nur document.

Update:

Es sieht so aus, als ob es jetzt einen Weg gibt. Auschecken Chrome Inspector Detector

2
pepsi

Sehr zuverlässiger Hack

Legen Sie im Grunde einen Getter für die Eigenschaft fest und loggen Sie ihn in der Konsole ein. Anscheinend wird nur auf die Sache 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').innerHTML = checkStatus;
    requestAnimationFrame(check);
});
2
Muhammad Umer

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

Wenn Sie Entwickler sind, die während der Entwicklung Dinge erledigen. 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

Diese Erweiterung hilft Javascript-Entwicklern dabei zu erkennen, wenn Chrome Devtools auf der aktuellen Seite geöffnet oder geschlossen ist .. Wenn Chrome Devtools geschlossen wird, löst die Erweiterung ein Ereignis mit dem Namen 'devtoolsStatusChanged' für das 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
    }
});
0
vothaison

Einige Antworten werden in Chrome 65 nicht mehr funktionieren. Hier ist eine Alternative zum Timing-Angriff die in Chrome ziemlich zuverlässig funktioniert und viel schwieriger abzuschwächen 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);

});
0
Eli Grey