Découvrez si la console Chrome est ouverte

Chrome plus de 65 ans (2018)

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

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

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

Lors de l'impression d'un "Élément" outils de développement Chrome va obtenir son id

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

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

ça ne marche pas quand DevTools n'est pas armé. Cependant, fonctionne avec les DevTools Chrome/Safari/Firefox et Firebug.

j'ai trouvé un moyen de dire si la Console Chrome est ouverte ou non. C'est toujours un hack mais c'est beaucoup plus précis et va fonctionner le temps que la console soit déverrouillée ou pas.

essentiellement, l'exécution de ce code avec la console fermée prend environ ~100 microsecondes et pendant que la console est ouverte, elle prend environ le double de ~200 microsecondes.

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

(1 milliseconde = 1000 microseconde)

j'ai écrit plus à ce sujet ici .

Démo ici .

mise à jour:

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

si votre but est de brouiller les outils du développeur, essayez ceci (j'en ai trouvé une version plus compliquée à un endroit où le code JS était brouillé, c'est très ennuyeux):

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

il y a une façon délicate de vérifier les extensions avec la permission 'tabs':

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

vous pouvez aussi vérifier si elle ouverte pour votre page:

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

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

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

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

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

si une solution existe, elle sera basée sur une différence dans le DOM quand le WebKit Web inspector est ouvert et quand il est fermé. Malheureusement, il s'agit d'une sorte de problème de poulet et d'œufs parce que nous ne pouvons pas utiliser l'inspecteur pour observer le DOM lorsque l'inspecteur est fermé.

quoi vous pouvez être en mesure de faire est d'écrire un peu de JavaScript pour jeter l'arbre DOM entier. Puis l'exécuter une fois lorsque l'inspecteur est ouvert, et une fois quand l'inspecteur est fermé. Toute différence dans le DOM est probablement un effet secondaire de l'inspecteur web, et nous pouvons l'utiliser pour tester si l'utilisateur inspecte ou non.

ce link est un bon début pour un script DOM de dumping , mais vous aurez envie de dumper la totalité de l'objet DOMWindow , pas seulement document .

mise à jour:

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

hack très fiable

définit essentiellement un getter sur la propriété et l'enregistre dans la console. Apparemment, on n'y accède 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);
});

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

si vous êtes des développeurs qui font des choses pendant le développement. Regardez cette extension Chrome. Il vous aide à 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 quand Chrome Devtools est ouvert ou fermé sur la page courante. Lorsque Google Chrome Devtools se ferme / s'ouvre, l'extension soulèvera un événement nommé 'devtoolsStatusChanged' sur window.l'élément document.

code exemple:

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

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 le Chrome, et est beaucoup plus difficile à atténuer que la méthode toString() . Malheureusement, ce N'est pas très 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);

});