Scopri se la console di Chrome è aperta

Sto usando questo piccolo script per scoprire se Firebug è aperto:

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

E funziona bene. Ora stavo cercando mezz’ora per trovare un modo per rilevare se la console di sviluppo web integrata di Google Chrome è aperta, ma non sono riuscito a trovare alcun suggerimento.

Questo:

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

non funziona

MODIFICARE:

Sembra quindi che non sia ansible rilevare se la console Chrome è aperta. Ma c’è un ” trucco ” che funziona, con alcuni inconvenienti:

  • non funzionerà quando la console è sganciata
  • non funzionerà quando la console è aperta al caricamento della pagina

Quindi, per il momento sceglierò la risposta di Unsigned, ma se qualcuno ha un’idea brillante, è il benvenuto a rispondere ancora e cambio la risposta selezionata! Grazie!

toString (2017-2018)

Dal momento che il richiedente originale sembra non essere più in giro e questa è ancora la risposta accettata, aggiungendo questa soluzione per la visibilità. Il merito va al commento di Antonin Hildebrand sulla risposta di zswang . Questa soluzione sfrutta il fatto che toString() non viene richiamato sugli oggetti registrati a meno che la console non sia aperta.

 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)

Aggiornamento: console.profiles è stato rimosso da Chrome. Questa soluzione non funziona più.

Grazie a Paul Irish per aver segnalato questa soluzione da Discover DevTools , usando il profiler:

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

window.innerHeight (2011)

Questa altra opzione può rilevare l’ispettore ancorato che viene aperto, dopo che la pagina viene caricata, ma non sarà in grado di rilevare un ispettore sganciato o se l’ispettore era già aperto al caricamento della pagina. C’è anche qualche potenziale per i falsi positivi.

 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 (Aggiornamento al 2018-03-16)

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


Quando si stampa “Element”, gli strumenti di sviluppo di Chrome otterranno il proprio ID

 var checkStatus; var element = document.createElement('any'); element.__defineGetter__('id', function() { checkStatus = 'on'; }); setInterval(function() { checkStatus = 'off'; console.log(element); console.clear(); }, 1000); 

Un’altra versione (dai commenti)

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

Stampa una variabile regolare:

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

Ho creato devtools-detect che rileva quando DevTools è aperto:

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

Puoi anche ascoltare un evento:

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

Non funziona quando DevTools è sganciato. Tuttavia, funziona con Chrome / Safari / Firefox DevTools e Firebug.

Ho trovato un modo per sapere se la Console Chrome è stata aperta o meno. È ancora un hack, ma è molto più accurato e funzionerà in condizioni meteo in cui la console è sganciata o meno.

Fondamentalmente l’esecuzione di questo codice con la console chiusa richiede circa ~ 100 microsecondi e mentre la console è aperta, richiede circa il doppio di ~ 200 microsecondi.

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

(1 millisecondo = 1000 microsecondi)

Ne ho scritto di più qui .

La demo è qui .


Aggiornare:

@zswang ha trovato la migliore soluzione attuale – controlla la sua risposta

Se il tuo objective è quello di bloccare gli strumenti di sviluppo, prova questo (ho trovato una versione più complicata di esso in un posto in cui il codice JS è stato offuscato, è molto fastidioso):

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

Esiste un modo complicato per controllarlo per le estensioni con l’authorization “tabs”:

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

Inoltre puoi verificare se è aperto per la tua pagina:

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

Ho scritto un post sul blog su questo: http://nepjua.org/check-if-browser-console-is-open/

Può rilevare se è ancorato o sganciato

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

Gli strumenti per sviluppatori di Chrome sono in realtà solo una parte della libreria WebCore di WebKit. Quindi questa domanda si applica a Safari, Chrome e qualsiasi altro utente WebCore.

Se esiste una soluzione, si baserà su una differenza nel DOM quando la web inspector WebKit è aperta e quando viene chiusa. Sfortunatamente, questo è un problema di pollo e uova perché non possiamo usare l’ispettore per osservare il DOM quando l’ispettore è chiuso.

Quello che potresti essere in grado di fare è scrivere un po ‘di JavaScript per scaricare l’intero albero DOM. Quindi eseguirlo una volta quando l’ispettore è aperto e una volta quando l’ispettore è chiuso. Qualunque differenza nel DOM è probabilmente un effetto collaterale dell’ispettore web e potremmo essere in grado di utilizzarlo per verificare se l’utente sta controllando o meno.

Questo collegamento è un buon inizio per uno script di dumping DOM, ma ti consigliamo di scaricare l’intero object DOMWindow , non solo il document .

Aggiornare:

Sembra che ci sia un modo per farlo ora. Dai un’occhiata a Chrome Inspector Detector

Hack molto affidabile

Fondamentalmente impostare un getter sulla proprietà e registrarlo nella console. Apparentemente la cosa viene aperta solo quando la console è aperta.

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

Ho trovato un nuovo metodo:

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

prova online

Inoltre puoi provare questo: 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); }); 

Se sei uno sviluppatore che sta facendo cose durante lo sviluppo. Dai un’occhiata a questa estensione di Chrome. Ti aiuta a rilevare quando Chrome Devtoos viene aperto o chiuso.

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

Questa estensione consente agli sviluppatori JavaScript di rilevare quando Chrome Devtools è aperto o chiuso nella pagina corrente. Quando Chrome Devtools si chiude / si apre, l’estensione genererà un evento chiamato “devtoolsStatusChanged” sull’elemento window.document.

Questo è un codice di esempio:

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

Alcune risposte qui smetteranno di funzionare in Chrome 65. Ecco una alternativa all’attacco temporale che funziona in modo abbastanza affidabile in Chrome ed è molto più difficile da mitigare rispetto al metodo toString() . Sfortunatamente non è così affidabile in 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); });