Chrome 콘솔이 열려 있는지 확인

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

나는 이것에 관한 블로그 게시물을 썼다 : 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 ?")
    }
  });
});

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

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

Chrome 개발자 도구는 실제로 WebKit WebCore 라이브러리의 일부입니다. 따라서이 질문은 Safari, Chrome 및 기타 WebCore 소비자에게 적용됩니다.

솔루션이 존재하는 경우 WebKit 웹 검사기가 열렸을 때와 닫힐 때 DOM의 차이를 기반으로합니다. 불행히도, 이것은 일종의 닭고기와 계란 문제입니다. 우리는 검사자가 닫힐 때 DOM을 관찰하기 위해 검사자를 사용할 수 없기 때문에 발생합니다.

당신이 할 수있는 일은 전체 DOM 트리를 덤프하기 위해 약간의 JavaScript를 작성하는 것입니다. 그런 다음 관리자가 열릴 때 한 번, 관리자가 닫힐 때 한 번 실행하십시오. DOM의 차이는 아마도 웹 검사기의 부작용 일 수 있으며, 사용자가 검사하고 있는지 여부를 테스트하는 데 사용할 수 있습니다.

이 링크 는 DOM 덤핑 스크립트를 시작하는 좋은 방법이지만,뿐만 아니라 전체 DOMWindow객체 를 덤프하고 싶을 것 document입니다.

최신 정보:

지금 할 수있는 방법이 있습니다. Chrome 검사기 감지기를 확인하십시오.

또한 이것을 시도 할 수 있습니다 : 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);
});

Muhammad Umer의 접근 방식 이 저에게 효과적이며 React를 사용하고 있으므로 후크 솔루션을 만들기로 결정했습니다.

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
}

참고 : 내가 엉망이되었을 때 가장 오랫동안 작동하지 않았으며 이유를 알 수 없었습니다. console.dir(element);작동 방식에 중요한 것을 삭제 했습니다. 공간을 차지하고 일반적으로 기능에 필요하지 않기 때문에 대부분의 비 설명 적 콘솔 작업을 삭제하므로 나에게 효과가 없었습니다.

그것을 사용하려면 :

import React from 'react'

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

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

이것이 React를 사용하는 사람에게 도움이되기를 바랍니다. 누구든지 이것을 확장하고 싶다면 어떤 시점에서 (모든 구성 요소에서 이것을 사용하지 않기 때문에) 무한 루프를 멈추고 콘솔을 깨끗하게 유지하는 방법을 찾고 싶습니다.

개발 중에 작업을 수행하는 개발자 인 경우 이 Chrome 확장 프로그램을 확인하십시오. Chrome Devtoos가 열리거나 닫힌시기를 감지하는 데 도움이됩니다.

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

이 확장 프로그램은 자바 스크립트 개발자가 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
    }
});

여기에 대한 답변 중 일부는 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);

});

에 관해서는 크롬 / 77.0.3865.75 버전 2019 하지 작동합니다. toString 은 인스펙터를 열지 않고 즉시 호출합니다.

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

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

console.log('%c', detector)

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