[javascript] Chrome 콘솔이 열려 있는지 확인

Program / 글쓴이

Firebug가 열려 있는지 확인하기 위해이 작은 스크립트를 사용하고 있습니다.

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

그리고 잘 작동합니다. 이제 Chrome의 내장 웹 개발자 콘솔이 열려 있는지 감지하는 방법을 찾기 위해 30 분 동안 검색했지만 힌트를 찾을 수 없었습니다.

이:

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

작동하지 않습니다.

편집하다:

Chrome 콘솔이 열려 있는지 감지 할 수없는 것 같습니다. 그러나 몇 가지 단점과 함께 작동 하는 ” 해킹 “이 있습니다.

  • 콘솔을 도킹 해제하면 작동하지 않습니다
  • 페이지로드시 콘솔이 열려 있으면 작동하지 않습니다

그래서 지금은 Unsigned의 답변을 선택할 것입니다. 그러나 some1이 훌륭한 아이디어를 제시한다면, 그는 여전히 대답 할 수 있으며 선택한 답변을 변경합니다! 감사!

답변

requestAnimationFrame (2019 년 하반기)

역사적 맥락에서이 이전 답변을 여기에 남겨 두십시오. 현재 Muhammad Umer의 접근 방식은 Chrome 78에서 작동하며 닫기 및 열린 이벤트를 모두 감지하는 이점이 있습니다.

함수 toString (2019)

에 신용 Overcl9ck 이 답변에의 코멘트. 정규식 /./을 빈 함수 객체로 바꾸면 여전히 작동합니다.

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

스 니펫 확장

정규식 toString (2017-2018)

원래의 asker는 더 이상 존재하지 않는 것으로 보이며 이것이 여전히 받아 들여지는 대답이므로 가시성을 위해이 솔루션을 추가합니다. 신용은 zswang 의 답변에 대한 Antonin Hildebrand 의 의견 으로 갑니다 . 이 솔루션은 콘솔이 열려 있지 않으면 로깅 된 개체에서 호출되지 않는 사실을 이용합니다 .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)

업데이트 : console.profiles Chrome에서 제거되었습니다. 이 솔루션은 더 이상 작동하지 않습니다.

프로파일 러를 사용하여 Discover DevTools 의이 솔루션을 지적한 Paul Irish 에게 감사합니다 .

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)

이 다른 옵션은 페이지가로드 된 후 도킹 된 관리자가 열리는 것을 감지 할 수 있지만 도킹 해제 된 관리자를 감지 할 수 없거나 관리자가 페이지로드시 이미 열려있는 경우에는 감지 할 수 없습니다. 오 탐지 가능성도 있습니다.

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

데모 : 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);

답변

매우 안정적인 핵

기본적으로 getter on 속성을 설정하고 콘솔에 기록하십시오. 분명히 콘솔이 열려있을 때만 액세스됩니다.

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>

스 니펫 확장

답변

DevTools가 열려있을 때 감지 하는 devtools-detect 를 만들었습니다 .

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와 작동합니다.

답변

Chrome 콘솔이 열려 있는지 확인하는 방법을 찾았습니다. 여전히 해킹이지만 더 정확하고 콘솔이 도킹되지 않은 날씨에 작동합니다.

기본적으로 콘솔을 닫은 상태에서이 코드를 실행하는 데 약 100 마이크로 초가 걸리며 콘솔을 여는 동안 약 200 마이크로 초가 걸립니다.

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

(1 밀리 초 = 1000 마이크로 초)

나는 그것에 대해 자세한 내용을 서면으로 작성했습니다 여기에 .

데모가 여기 있습니다 .

최신 정보:

@zswang은 현재 최상의 솔루션을 찾았습니다-그의 답변을 확인하십시오

답변

개발자 도구를 방해하는 것이 목표라면 이것을 시도해보십시오 (JS 코드가 난독 화 된 곳에서 더 복잡한 버전을 찾았습니다. 매우 성가시다).

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

답변

‘탭’권한이있는 확장 프로그램을 확인하는 까다로운 방법이 있습니다.

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){ ... })