web-dev-qa-db-ja.com

Chromeコンソールが開いているかどうかを調べる

この小さなスクリプトを使用して、Firebugが開いているかどうかを確認しています。

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

そしてそれはうまく機能します。現在、Google Chromeに組み込まれているWeb開発者コンソールが開いているかどうかを検出する方法を見つけるために30分探していましたが、ヒントが見つかりませんでした。

この：

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

動作しません。

編集：

したがって、Chromeコンソールが開いているかどうかを検出することはできないようです。ただし、「 hack 」が機能しますが、いくつかの欠点があります。

  • コンソールがドッキングされていない場合は機能しません
  • ページの読み込み時にコンソールが開いていると機能しません

だから、今のところUnsignedの回答を選択しますが、some1が素晴らしいアイデアを思いついた場合、彼はまだ回答を歓迎し、選択した回答を変更します！ありがとう！

javascriptgoogle-chromefirebuggoogle-chrome-devtools
119
r0skar

関数toString（2019）

この回答に対する Overcl9ck のコメントに感謝します。正規表現/./を空の関数オブジェクトに置き換えても引き続き機能します。

var devtools = function(){};
devtools.toString = function() {
  this.opened = true;
}

console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened

正規表現toString（2017-2018）

元の質問者はもはや存在しないようであり、これは依然として受け入れられている答えなので、可視性のためにこのソリューションを追加します。クレジットは Antonin Hildebrand の comment on zswang の answer に送られます。このソリューションは、コンソールが開いていない限り、toString()がログに記録されたオブジェクトで呼び出されないという事実を利用しています。

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）

更新：console.profilesはChromeから削除されました。このソリューションはもう機能しません。

Paul Irish に感謝します Discover DevTools からこのソリューションを指摘し、プロファイラーを使用して：

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

window.innerHeight（2011）

この他のオプションは、開かれている、ページが読み込まれた後、ドッキングされたインスペクターを検出できますが、ドッキングされていないインスペクターを検出することはできません。誤検知の可能性もあります。

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

Chrome 65+（2018）

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

デモ： https://jsbin.com/cecuzeb/edit?output （2018-03-16に更新）

パッケージ： https://github.com/zswang/jdetects

「要素」を印刷すると、Chrome開発者ツールはそのIDを取得します

var checkStatus;

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

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

別のバージョン（コメントから）

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

通常の変数を出力します：

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

devtools-detect を作成し、DevToolsが開いていることを検出します。

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

イベントを聞くこともできます：

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

DevToolsがドッキングされていない場合は機能しません。ただし、Chrome/Safari/Firefox DevToolsおよびFirebugでは動作します。

21
Sindre Sorhus

Chrome Consoleが開いているかどうかを確認する方法を見つけました。それはまだハックですが、より正確であり、コンソールがドッキングされていてもいなくても機能します。

基本的に、コンソールを閉じた状態でこのコードを実行するには約100マイクロ秒かかり、コンソールを開いている間は約2倍の約200マイクロ秒かかります。

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

（1ミリ秒= 1000マイクロ秒）

私はそれについてもっと書きました こちら 。

デモは こちら です。

更新：

@zswangは現在の最良の解決策を見つけました-彼の答えをチェックしてください

14
guya

あなたの目標が開発者ツールを妨害することであるならば、これを試してください（JSコードが難読化された場所でそれのより複雑なバージョンを見つけました、それは非常に迷惑です）：

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

私は新しい方法を見つけました：

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

オンラインテスト

4
huiting Chen

非常に信頼できるハック

基本的にプロパティにゲッターを設定し、コンソールに記録します。どうやら物は、コンソールが開いているときにのみアクセスされます。

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);
});
4
Muhammad Umer

「タブ」権限を持つ拡張機能を確認するには、注意が必要です。

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

また、ページで開いているかどうかを確認できます。

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

これに関するブログ記事を書きました： http://nepjua.org/check-if-browser-console-is-open/

ドッキングされているかドッキングされていないかを検出できます

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

Chrome開発者ツールは、実際にはWebKitのWebCoreライブラリの一部にすぎません。したがって、この質問はSafari、Chrome、およびその他のWebCoreコンシューマに適用されます。

ソリューションが存在する場合、WebKit Webインスペクターが開いているときと閉じているときのDOMの違いに基づいています。残念ながら、これは一種の鶏と卵の問題です。なぜなら、インスペクターを閉じたときにインスペクターを使用してDOMを観察することはできないからです。

あなたができることは、DOMツリー全体をダンプするために少しのJavaScriptを書くことです。次に、インスペクターが開いているときに1回、インスペクターが閉じているときに1回実行します。 DOMの違いはおそらくWebインスペクターの副作用であり、ユーザーが検査しているかどうかをテストするためにそれを使用できる場合があります。

これは link はDOMダンプスクリプトの良いスタートですが、DOMWindowだけでなく、documentオブジェクト全体をダンプすることをお勧めします。

更新：

今、これを行う方法があるように見えます。チェックアウト Chrome Inspector Detector

2
pepsi

また、これを試すことができます： 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

あなたが開発中に何かをしている開発者なら。このChrome拡張機能をご覧ください。 Chrome Devtoosが開いているか閉じているかを検出するのに役立ちます。

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

この拡張機能は、Javascript開発者がChrome Devtoolsが現在のページで開いているか閉じているかを検出するのに役立ちます。 Chrome Devtoolsが閉じる/開くと、拡張機能はwindow.document要素で 'devtoolsStatusChanged'という名前のイベントを発生させます。

これはサンプルコードです：

 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

ここのいくつかの答えはChrome 65で動作しなくなります。 Chromeでかなり確実に動作し、toString()メソッドよりも軽減するのがはるかに難しいタイミング攻撃の代替手段です 。残念ながら、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