web-dev-qa-db-fra.com

Savoir si la console Chrome est ouverte

J'utilise ce petit script pour savoir si Firebug est ouvert:

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

Et ça marche bien. À présent, je cherchais pendant une demi-heure un moyen de détecter si la console de développement Web intégrée de Google Chrome était ouverte, mais je n’ai trouvé aucun indice.

Ce:

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

ne fonctionne pas.

MODIFIER:

Il semble donc impossible de détecter si la console Chrome est ouverte. Mais il y a un " hack " qui fonctionne, avec quelques inconvénients:

  • ne fonctionnera pas lorsque la console sera désamarrée
  • ne fonctionnera pas lorsque la console est ouverte au chargement de la page

Donc, je vais choisir la réponse de Unsigned pour le moment, mais si certains1 ont une idée brillante, il peut toujours répondre et je change la réponse sélectionnée! Merci!

javascriptgoogle-chromefirebuggoogle-chrome-devtools
111
Oskar

toString (2017-2018)

Étant donné que le demandeur d'origine ne semble plus être présent et qu'il s'agit toujours de la réponse acceptée, ajoutez cette solution pour plus de visibilité. Le crédit va à Antonin Hildebrand / commentaire sur zswang / answer . Cette solution tire parti du fait que toString() n'est appelé sur les objets journalisés que si la console est ouverte.

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)

Mise à jour:console.profiles a été supprimé de Chrome. Cette solution ne fonctionne plus.

Merci à Paul Irish pour avoir signalé cette solution de Discover DevTools , à l’aide du profileur:

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

window.innerHeight (2011)

Cette autre option peut détecter que l'inspecteur ancré est ouvert, après la page se charge, mais ne sera pas en mesure de détecter un inspecteur non ancré, ou si l'inspecteur était déjà ouvert au chargement de la page. Il existe également un potentiel de faux positifs.

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

démo: https://jsbin.com/cecuzeb/edit?output (Mise à jour à 2018-03-16)

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

Lors de l'impression des outils de développement Chrome «Element», son identifiant

var checkStatus;

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

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

Une autre version (à partir de commentaires)

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

Imprimer une variable régulière ：

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

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.

20
Sindre Sorhus

J'ai trouvé un moyen de savoir si la console Chrome est ouverte ou non ... C'est toujours un bidouillage, mais il est beaucoup plus précis et fonctionnera que la console soit désarmée ou non.

Fondamentalement, l’exécution de ce code avec la console fermée nécessite environ 100 microsecondes et environ deux fois plus lorsque la console est ouverte, environ 200 microsecondes.

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

(1 milliseconde = 1000 microsecondes)

J'ai écrit plus à ce sujet ici .

La démo est ici .

Mettre à jour:

@zswang a trouvé la meilleure solution actuelle - découvrez sa réponse

13
guya

Si votre objectif est de brouiller les outils de développement, essayez ceci (j'ai trouvé une version plus compliquée à un endroit où le code JS était obscurci, c'est très ennuyant):

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

J'ai trouvé une nouvelle méthode:

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

test en ligne

5
huiting Chen

Il existe un moyen astucieux 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){ ... })
3
norlin

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

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

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

Les outils de développement de Chrome ne constituent en réalité qu'une partie de la bibliothèque WebCore de WebKit. Donc, cette question s’applique à Safari, Chrome et à tous les autres consommateurs WebCore.

Si une solution existe, elle sera basée sur une différence dans le DOM lorsque l'inspecteur Web WebKit est ouvert et lorsqu'il est fermé. Malheureusement, il s’agit là d’une sorte de problème lié au poulet et aux œufs car nous ne pouvons pas utiliser l’inspecteur pour observer le DOM lorsque celui-ci est fermé.

Ce que vous pourrez peut-être faire, c’est écrire un peu de JavaScript pour vider l’ensemble de l’arborescence DOM. Puis exécutez-le une fois lorsque l'inspecteur est ouvert et une fois lorsque l'inspecteur est fermé. Toute différence dans le DOM est probablement un effet secondaire de l'inspecteur Web et nous pourrons peut-être l'utiliser pour tester si l'utilisateur inspecte ou non.

Ce lien est un bon début pour un script de vidage DOM, mais vous voudrez vider l’intégralité de l’objet DOMWindow, pas seulement document.

Mettre à jour:

On dirait qu'il y a un moyen de faire ça maintenant. Départ Détecteur Inspecteur Chrome

2
pepsi

Hack très fiable

Fondamentalement, définissez un getter sur la propriété et enregistrez-le dans la console. Apparemment, la chose n'est accessible que lorsque la console est ouverte. 

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

Vous pouvez aussi 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);
});
1
Vladimir Ishenko

Si vous êtes des développeurs qui font des choses pendant le développement. Découvrez cette extension Chrome. Il vous aide à détecter quand 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 l'ouverture ou la fermeture de Chrome Devtools sur la page en cours . Lorsque Chrome Devtools ferme/ouvre, l'extension déclenche un événement nommé "devtoolsStatusChanged" dans l'élément window.document. 

Ceci 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
    }
});
0
vothaison

Certaines réponses ici cesseront de fonctionner dans Chrome 65. Voici une alternative d'attaque de synchronisation qui fonctionne de manière assez fiable dans Chrome et qui est beaucoup plus difficile à atténuer que la méthode toString(). Malheureusement, ce n'est pas si fiable dans 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);

});
0
Eli Grey