Savoir si la console Chrome est ouverte

Question

Je suis à l'aide de ce petit script pour savoir si Firebug est ouvert:

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

Et il fonctionne bien. Maintenant, j'étais à la recherche d'une demi-heure pour trouver un moyen de détecter si Google Chrome intégré à web developer console est ouverte, mais je n'arrivais pas à trouver le moindre indice.

Ce:

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

ne fonctionne pas.

EDIT:

Il semble donc qu'il n'est pas possible de détecter si le Chrome console est ouverte. Mais il y a un "hack" qui travaille, avec quelques inconvénients:

• ne fonctionnera pas lorsque la console est déconnecté de la station
• ne fonctionnera pas lorsque la console est ouverte au chargement de la page

Donc, je vais choisir Unsigneds réponse pour l'instant, mais si some1 vient avec une idée géniale, il est le bienvenu pour continuer à répondre et je change la réponse! Merci!

Answer 1

Merci à Paul Irlandais de remarquer cette solution de Découvrir DevTools, à l'aide du générateur de profils:

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

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

Cette autre option peut détecter le quai inspecteur être ouvert, après le chargement de la page, mais ne sera pas en mesure de détecter une détaché de l'inspecteur, ou si l'inspecteur a déjà été ouverte au chargement de la page. Il y a aussi un certain risque de faux positifs.

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

Answer 2

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ésamarré. Cependant, fonctionne avec Chrome / Safari / Firefox DevTools et Firebug.

Answer 3

J'ai trouvé un moyen de savoir si la Console Chromée est ouvert ou pas. C'est encore un hack mais c'est plus précis et va travailler météo la console est détaché ou pas.

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 ici.

Answer 4

Les outils de développement Chrome est vraiment juste une partie de WebKit est WebCore de la bibliothèque. Ainsi, cette question s'applique à Safari, Chrome, et tout autre WebCore consommateurs.

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

Ce que vous pouvez être en mesure de faire est d'écrire un peu de code JavaScript pour faire un dump l'ensemble de l'arborescence DOM. Puis l'exécuter une fois lorsque l'inspecteur est ouvert, et une fois quand l'inspecteur est fermé. Toute différence dans les DOM est probablement un des effets secondaires de l'inspecteur web, et nous pouvons être en mesure de l'utiliser pour tester si l'utilisateur est en train d'inspecter ou pas.

Ce lien est un bon début pour un DOM dumping script , mais vous aurez envie de vider l'ensemble de DOMWindow objet, pas seulement document.

Mise à jour:

On dirait qu'il ya un moyen de le faire maintenant. Découvrez Chrome Inspecteur Détecteur de

Answer 5

Il existe un moyen délicat de vérifier les extensions avec la permission 'tabs':

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

Aussi, vous pouvez vérifier s'il est ouvert pour votre page:

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