如何檢測瀏覽器控制台/檢查器是否打開？

Question

什么是確定用戶是否有瀏覽器控制台（即螢火蟲，WebKit的檢查，Opera蜻蜓）開放的最佳方式？

（即我對僅僅在腳本中檢測console對象的存在感興趣。我想知道用戶何時實際打開了調試器面板。理想情況下，跨主流瀏覽器（IE / Safari / Chrome / Firefox ......）甚至可移動瀏覽器

Answer 1

如果您願意接受對用戶的干擾，您可以使用調試器語句，因為它在所有主流瀏覽器中都可用。

旁注：如果您的應用程序的用戶對控制台的使用感興趣，他們可能熟悉開發工具，並且不會因為它出現而感到驚訝。

簡而言之，該語句充當斷點， 只有在瀏覽器的開發工具打開時才會影響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>

免責聲明：我最初發布這個可能重復的問題的確切答案

Answer 2

出於安全原因，它不能直接在Javascript中使用。 您需要創建一個瀏覽器插件，如果您需要跨瀏覽器支持，這顯然不是一個可行的解決方案。

然而，有這個棘手的解決方案，這家伙想出了Chrome，雖然我可以想象這是一個長期的解決方案，因為它依賴於控制台啟動時代碼運行較慢的事實： http：// blog。 guya.net/2014/06/20/how-to-know-when-chrome-console-is-open/

Answer 3

沒有必要檢查檢查員是否打開。

當您打開檢查器時，可能會發生一些情況：

如果您的檢查員是正確的，將更改document.body.clientWidth。
如果您的檢查員位於底部，則會更改document.body.clientHeight。
如果你的檢查員在其他窗口，那就沒有了。

因此，您應該檢查瀏覽器的寬度。

如果您想在檢查器中執行某些操作，請檢查devTools的瀏覽器文檔：

Chrome Firefox

如何檢測瀏覽器控制台/檢查器是否打開？

問題描述

3 個解決方案

解決方案1
2 2017-01-13 09:40:23

解決方案2
0 2015-06-08 17:52:27

解決方案3
-2 2017-01-13 09:56:12

如何檢測瀏覽器控制台/檢查器是否*打開*？

問題描述

3 個解決方案

解決方案1 2 2017-01-13 09:40:23

解決方案2 0 2015-06-08 17:52:27

解決方案3 -2 2017-01-13 09:56:12

如何檢測瀏覽器控制台/檢查器是否打開？

解決方案1
2 2017-01-13 09:40:23

解決方案2
0 2015-06-08 17:52:27

解決方案3
-2 2017-01-13 09:56:12