Tìm hiểu xem bảng điều khiển Chrome có mở không

Tôi đang sử dụng tập lệnh nhỏ này để tìm hiểu xem Fireorms có mở không:

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

Và nó hoạt động tốt. Bây giờ tôi đã tìm kiếm trong nửa giờ để tìm cách phát hiện xem bảng điều khiển dành cho nhà phát triển web tích hợp của Google Chrome có mở hay không, nhưng tôi không thể tìm thấy bất kỳ gợi ý nào.

Điều này:

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

không hoạt động.

BIÊN TẬP:

Vì vậy, dường như không thể phát hiện liệu bảng điều khiển Chrome có mở hay không. Nhưng có một " hack " hoạt động, với một số nhược điểm:

• sẽ không hoạt động khi giao diện điều khiển không bị khóa
• sẽ không hoạt động khi giao diện điều khiển được mở khi tải trang

Vì vậy, bây giờ tôi sẽ chọn câu trả lời của Unsigns, nhưng nếu ai đó nghĩ ra một ý tưởng tuyệt vời, anh ấy vẫn sẵn sàng trả lời và tôi thay đổi câu trả lời đã chọn! Cảm ơn!

requestAnimationFrame (Cuối năm 2019)

Để lại những câu trả lời trước đây ở đây cho bối cảnh lịch sử. Hiện tại phương pháp của Muhammad Umer hoạt động trên Chrome 78, với lợi thế bổ sung là phát hiện cả các sự kiện gần và mở.

chức năng toString (2019)

Tín dụng cho nhận xét của Overcl9ck về câu trả lời này. Thay thế regex /./bằng một đối tượng hàm rỗng vẫn hoạt động.

var devtools = function() {};
devtools.toString = function() {
  if (!this.opened) {
    alert("Opened");
  }
  this.opened = true;
}

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

regex toString (2017-2018)

Vì người hỏi ban đầu dường như không còn ở đây nữa và đây vẫn là câu trả lời được chấp nhận, thêm giải pháp này cho khả năng hiển thị. Tín dụng đi đến bình luận của Antonin Hildebrand về câu trả lời của zswang . Giải pháp này lợi dụng thực tế là không được gọi trên các đối tượng đã ghi trừ khi bàn điều khiển được mở.toString()

var devtools = /./;
devtools.toString = function() {
  if (!this.opened) {
    alert("Opened");
  }
  this.opened = true;
}

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

console.profiles (2013)

Cập nhật: console.profiles đã bị xóa khỏi Chrome. Giải pháp này không còn hoạt động.

Cảm ơn Paul Irish đã chỉ ra giải pháp này từ Discover DevTools , sử dụng trình lược tả:

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

<button onClick="showIfInspectIsOpen()">Is it open?</button>

window.innerHeight (2011)

Tùy chọn khác này có thể phát hiện trình kiểm tra được neo đang được mở, sau khi tải trang, nhưng sẽ không thể phát hiện trình kiểm tra không bị khóa hoặc nếu trình kiểm tra đã mở khi tải trang. Cũng có một số tiềm năng cho dương tính giả.

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

Chrome 65+ (2018)

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

bản demo: https://jsbin.com/cecuzeb/edit?output (Cập nhật vào 2018-03-16)

gói: https://github.com/zswang/jdetects

Khi in các công cụ dành cho nhà phát triển Chrome Element Chrome Chrome sẽ nhận id

var checkStatus;

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

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

Một phiên bản khác (từ ý kiến)

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

In một biến thường xuyên

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

Hack rất đáng tin cậy

Về cơ bản thiết lập một getter trên thuộc tính và đăng nhập nó trong giao diện điều khiển. Rõ ràng điều này chỉ được truy cập khi giao diện điều khiển được mở.

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').className  = checkStatus;
  requestAnimationFrame(check);
});

.on{
  color:limegreen;
}

.off{
  color:red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.css" integrity="sha256-DVK12s61Wqwmj3XI0zZ9MFFmnNH8puF/eRHTB4ftKwk=" crossorigin="anonymous" />

<p>
  <ul>
    <li>
      dev toolbar open: icon is <span class="on">green</span>
    </li>
    <li>
      dev toolbar closed: icon is <span class="off">red</span>
    </li>
  </ul>
</p>
<div id="devtool-status"><i class="fas fa-7x fa-power-off"></i></div>
<br/>
<p><b>Now press F12 to see if this works for your browser!</b></p>

Tôi đã tạo devtools-phát hiện phát hiện khi DevTools mở:

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

Bạn cũng có thể nghe một sự kiện:

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

Nó không hoạt động khi DevTools không bị khóa. Tuy nhiên, hoạt động với DevTools và Firebird của Chrome / Safari / Firefox.

Tôi đã tìm thấy một cách để biết Chrome Console có được mở hay không. Nó vẫn là một bản hack nhưng nó chính xác hơn và sẽ hoạt động tốt hơn khi giao diện điều khiển không bị khóa hay không.

Về cơ bản, việc chạy mã này với giao diện điều khiển đóng mất khoảng ~ 100 micro giây và trong khi giao diện điều khiển được mở, phải mất khoảng gấp đôi ~ 200 micro giây.

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

(1 mili giây = 1000 micro giây)

Tôi đã viết thêm về nó ở đây .

Demo là đây .

Cập nhật:

@zswang đã tìm ra giải pháp tốt nhất hiện tại - hãy xem câu trả lời của anh ấy

Nếu mục tiêu của bạn là gây nhiễu các công cụ dành cho nhà phát triển, hãy thử điều này (tôi đã tìm thấy một phiên bản phức tạp hơn của nó tại một nơi mà mã JS bị xáo trộn, điều đó rất khó chịu):

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

Có một cách khó khăn để kiểm tra các tiện ích mở rộng có quyền 'tab':

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

Ngoài ra, bạn có thể kiểm tra nếu nó mở cho trang của bạn:

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

Tôi đã viết một bài blog về điều này: http://nepjua.org/check-if-browser-console-is-open/

Nó có thể phát hiện xem nó đã cập cảng hay không khóa

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

var div = document.createElement('div');
Object.defineProperty(div,'id',{get:function(){
    document.title = 'xxxxxx'
}});

setTimeout(()=>console.log(div),3000)

Các công cụ dành cho nhà phát triển Chrome thực sự chỉ là một phần của thư viện WebCore của WebKit. Vì vậy, câu hỏi này áp dụng cho Safari, Chrome và bất kỳ người tiêu dùng WebCore nào khác.

Nếu một giải pháp tồn tại, nó sẽ dựa trên sự khác biệt trong DOM khi trình kiểm tra web WebKit mở và khi nó đóng. Thật không may, đây là một vấn đề về gà và trứng vì chúng ta không thể sử dụng thanh tra để quan sát DOM khi đóng thanh tra.

Những gì bạn có thể làm là viết một chút JavaScript để kết xuất toàn bộ cây DOM. Sau đó chạy nó một lần khi thanh tra mở và một lần khi thanh tra đóng cửa. Bất kỳ sự khác biệt nào trong DOM có lẽ là tác dụng phụ của trình kiểm tra web và chúng tôi có thể sử dụng nó để kiểm tra xem người dùng có đang kiểm tra hay không.

Đây liên kết là một khởi đầu tốt cho một DOM bán phá giá kịch bản, nhưng bạn sẽ muốn để đổ toàn bộ DOMWindowđối tượng, không chỉ document.

Cập nhật:

Có vẻ như có một cách để làm điều này bây giờ. Kiểm tra trình phát hiện thanh tra Chrome

Ngoài ra, bạn có thể thử điều này: 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);
});

Nếu bạn là nhà phát triển đang làm công cụ trong quá trình phát triển. Hãy xem tiện ích mở rộng Chrome này. Nó giúp bạn phát hiện khi Chrome Devtoos được mở hoặc đóng.

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

Tiện ích mở rộng này giúp nhà phát triển Javascript phát hiện khi Chrome Devtools mở hoặc đóng trên trang hiện tại. Khi Chrome Devtools đóng / mở, tiện ích mở rộng sẽ đưa ra một sự kiện có tên 'devtoolsStatusChanged' trên phần tử window.document.

Đây là mã ví dụ:

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

Một số câu trả lời ở đây sẽ ngừng hoạt động trong Chrome 65. Đây là một giải pháp thay thế tấn công thời gian hoạt động khá đáng tin cậy trong Chrome và khó giảm thiểu hơn nhiều so với toString()phương pháp. Thật không may, nó không đáng tin cậy trong 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);

});

Đối với Chrome / 77.0,3865,75, một phiên bản 2019 không hoạt động. toString gọi ngay lập tức mà không cần mở Thanh tra.

const resultEl = document.getElementById('result')
const detector = function () {}

detector.toString = function () {
	resultEl.innerText = 'Triggered'
}

console.log('%c', detector)

<div id="result">Not detected</div>

Cách tiếp cận của Muhammad Umer làm việc cho tôi và tôi đang sử dụng React, vì vậy tôi quyết định thực hiện một giải pháp hook:

const useConsoleOpen = () => {
  const [consoleOpen, setConsoleOpen] = useState(true)

  useEffect(() => {
    var checkStatus;

    var element = new Image();
    Object.defineProperty(element, "id", {
      get: function () {
        checkStatus = true;
        throw new Error("Dev tools checker");
      },
    });

    requestAnimationFrame(function check() {
      checkStatus = false;
      console.dir(element); //Don't delete this line!
      setConsoleOpen(checkStatus)
      requestAnimationFrame(check);
    });
  }, []);

  return consoleOpen
}

LƯU Ý: Khi tôi gặp rắc rối với nó, nó không hoạt động trong thời gian dài nhất và tôi không thể hiểu tại sao. Tôi đã xóa console.dir(element);nó rất quan trọng đối với cách nó hoạt động. Tôi xóa hầu hết các hành động bảng điều khiển không mô tả vì chúng chỉ chiếm dung lượng và thường không cần thiết cho chức năng, vì vậy đó là lý do tại sao nó không hoạt động đối với tôi.

Để dùng nó:

import React from 'react'

const App = () => {
  const consoleOpen = useConsoleOpen()

  return (
    <div className="App">
      <h1>{"Console is " + (consoleOpen ? "Open" : "Closed")}</h1>
    </div>
  );
}

Tôi hy vọng điều này sẽ giúp bất cứ ai sử dụng React. Nếu bất cứ ai muốn mở rộng về điều này, tôi muốn có thể dừng vòng lặp vô hạn tại một số điểm (vì tôi không sử dụng điều này trong mọi thành phần) và tìm cách giữ cho bàn điều khiển sạch sẽ.