web-dev-qa-db-ja.com

console / devtoolsがすべてのブラウザで開いているかどうかを検出します

ブラウザコンソールを開いたり閉じたりしたときに実行されるスクリプトを作成しようとしています。すべてのブラウザ（Firefox/IE/Chrome/Safari/Opera）のブラウザコンソールが開いているかどうかをJavaScript、jQuery、またはその他のクライアント側スクリプトで検出する方法はありますか？

javascriptjquerybrowsercross-browser
10
Super User

Ifユーザーへの干渉を受け入れる場合は、allの主要なブラウザーで使用できるため、 デバッガーステートメント を使用できます。

補足：アプリのユーザーがコンソールの使用に興味を持っている場合、おそらく開発ツールに精通しているので、表示されても驚かないでしょう。

つまり、ステートメントはブレークポイントとして機能し、UIに影響しますブラウザの開発ツールがオンになっている場合のみ。

テストの例を次に示します。

<body>
<p>Devtools is <span id='test'>off</span></p>
<script>
  var minimalUserResponseInMiliseconds = 100;
  var before = new Date().getTime();
  debugger;
  var after = new Date().getTime();
  if (after - before > minimalUserResponseInMiliseconds) { // user had to resume the script manually via opened dev tools 
    document.getElementById('test').innerHTML = 'on';
  }
</script>

</body>
5
remdevtec

JSではセキュリティ上の理由から直接可能ではないと思いますが、 ここ では、DevToolsが開いているときに何か特別なことが起こりたいときに役立つと主張しています。キャンバスの一時停止、スタイルのデバッグ情報の追加など。

しかし、@ James Hillが this で述べているように、ブラウザーがこの情報にクライアントがアクセスできるようにすることを選択したとしても、それは標準の実装ではないと思います（複数のブラウザーでサポートされます）。 this こちらもお試しいただけます。

3
Soumya Mohan

公式のクロスブラウザの方法では不可能ですが、時折の誤検知が許容される場合は、window.onresizeイベントを確認できます。ページの読み込み後にウィンドウのサイズを変更するユーザーは、ややまれです。ユーザーが頻繁にコンソールを開くことを期待している場合はさらに効果的です。つまり、誤検知がパーセンテージで少なくなります。これは、ユーザーがページにアクセスしたときにコンソールがすでに開いているかどうか、またはユーザーが新しいウィンドウでコンソールを開いているかどうかを検出できません。

window.onresize = function(){
    if ((window.outerHeight - window.innerHeight) > 100) {
        // console was opened (or screen was resized)
    }
}

クレジット https://stackoverflow.com/a/7809413/3774582 。その質問はchrome固有ですが、概念はここに適用されます。

これを拡張するために、誤検知に対する許容度を非常に低くする必要がある場合、通常はドラッグアクションとして実行されるため、ほとんどのウィンドウサイズ変更はこのイベントを数十回トリガーしますが、コンソールを開くとこれは1回だけトリガーされます。これを検出できれば、アプローチはさらに正確になります。

2
Goose

私は試していませんdevtools-detect詳細ですが、 デモ 有望に見えます...

devtools-detect

→DevToolsが開いているかどうか、およびその方向を検出します。

サポートされているブラウザ：

  • Chrome DevTools
  • Safari DevTools
  • Firefox DevTools
  • Opera DevTools

警告：

  • DevToolsがドッキングされていない場合は機能せず、任意の種類のサイドバーを切り替えると誤検知が表示されます。

簡単な デモページ を試してください。

2
ashleedawg