Découvrez si la console Chrome est ouverte

Merci à Paul Irish pour avoir souligné cette solution à partir de Discover DevTools , en utilisant le profileur:

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

Mise à jour: console.profiles a été supprimé de Chrome.

Cette autre option permet de détecter l' ouverture de l' inspecteur ancré après la chargement de la page mais ne peut pas détecter un inspecteur non bloqué ou si l'inspecteur était déjà ouvert sur la page. Il existe également un potentiel de faux positifs.

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

Lors de l'impression, les outils de développement Chrome "élément" obtiendront leur identifiant

 var checkStatus; var element = new Image(); // var element = document.createElement('any'); element.__defineGetter__('id', function() { checkStatus = 'on'; }); setInterval(function() { checkStatus = 'off'; console.log(element); console.clear(); document.querySelector('#devtool-status').innerHTML = checkStatus; }, 1000) 

Démo: https://jsfiddle.net/evnrorea/embedded/result/

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

Une autre version (à partir des commentaires)

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

Imprimez une variable régulière:

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

J'ai créé devtools-detect qui détecte quand DevTools est ouvert:

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

Vous pouvez également écouter un événement:

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

Cela ne fonctionne pas lorsque DevTools est désassouché. Cependant, fonctionne avec Chrome / Safari / Firefox DevTools et Firebug.

J'ai trouvé un moyen de savoir si la console Chrome était ouverte ou non. C'est toujours un hack, mais il est plus précis et ça va marcher lorsque la console est désaccouplée ou non.

Fondamentalement, l'exécution de ce code avec la console fermée prend environ ~ 100 microsecondes et pendant que la console est ouverte, il faut environ deux fois plus de 200 microsecondes.

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

(1 milliseconde = 1000 microsecondes)

J'ai écrit plus à ce sujet ici .

La démo est là .

Mettre à jour:

@zswang a trouvé la meilleure solution actuelle – vérifiez sa réponse

J'ai écrit un article de blog à ce sujet: http://nepjua.org/check-if-browser-console-is-open/

Il peut détecter s'il est amarré ou désassemblé

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

Les outils de développement Chrome sont vraiment une partie de la bibliothèque WebCore de WebKit. Donc, cette question concerne Safari, Chrome et tout autre consommateur WebCore.

Si une solution existe, il sera basé sur une différence dans le DOM lorsque l'inspecteur web WebKit est ouvert et lorsqu'il est fermé. Malheureusement, c'est une sorte de problème de poulet et d'oeuf parce que nous ne pouvons pas utiliser l'inspecteur pour observer le DOM lorsque l'inspecteur est fermé.

Ce que vous pouvez faire, c'est écrire un peu de JavaScript pour décharger l'arbre DOM entier. Ensuite, exécutez-le une fois lorsque l'inspecteur est ouvert, et une fois que l'inspecteur est fermé. Toute différence dans le DOM est probablement un effet secondaire de l'inspecteur Web, et nous pourrions peut-être l'utiliser pour tester si l'utilisateur inspecte ou non.

Ce lien est un bon début pour un script de DOMWindow DOM, mais vous voudrez décharger l'objet entier DOMWindow , pas seulement le document .

Mettre à jour:

On dirait qu'il y a un moyen de le faire maintenant. Découvrez le détecteur d'automate Chrome

Il existe un moyen délicat de vérifier les extensions avec l'autorisation "onglets":

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

Aussi, vous pouvez vérifier si cela s'ouvre pour votre page:

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

Vous pouvez également essayer ceci: 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); }); 

Si votre objectif est de bloquer les outils du développeur, essayez ceci (j'ai trouvé une version plus compliquée de celui-ci dans un endroit où le code JS était obscurci, c'est très ennuyant):

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

Si vous êtes des développeurs qui font des choses pendant le développement. Découvrez cette extension Chrome. Cela vous permet de détecter lorsque Chrome Devtoos est ouvert ou fermé.

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

Cette extension aide les développeurs Javascript à détecter lorsque Chrome Devtools est ouvert ou fermé sur la page actuelle. Lorsque Chrome Devtools se ferme / s'ouvre, l'extension générera un événement nommé 'devtoolsStatusChanged' sur l'élément window.document.

C'est un exemple de code:

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