Chrome 콘솔이 열려 있는지 확인

Chrome 콘솔이 열려 있는지 확인

---

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

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

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

이:

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

작동하지 않습니다.

편집하다:

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

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

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

---

함수 toString (2019)

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

var devtools = function(){};
devtools.toString = function() {
  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() {
  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;
}

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

---

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

---

Very Reliable hack

Basically set a getter on property and log it in console. Apparently the thing gets accessed only when console is open.

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

---

I found a new method:

var b=new Blob()
Object.defineProperty(b,'size',{get(){
    alert('The devtool was opened!')
}})
setTimeout(function(){console.log(b)},3000)

test online

---

There is a tricky way to check it for extensions with 'tabs' permission:

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

Also you can check if it open for your page:

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

---

I wrote a blog post about this: http://nepjua.org/check-if-browser-console-is-open/

It can detect whether it's docked or undocked

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

---

The Chrome developer tools is really just a part of WebKit's WebCore library. So this question applies to Safari, Chrome, and any other WebCore consumers.

If a solution exists, it'll be based off a difference in the DOM when the WebKit web inspector is open and when it's closed. Unfortunately, this is a kind of a chicken and egg problem because we can't use the inspector to observe the DOM when the inspector is closed.

What you may be able to do is write a bit of JavaScript to dump the entire DOM tree. Then run it once when the inspector is open, and once when the inspector is closed. Any difference in the DOM is probably a side-effect of the web inspector, and we may be able to use it to test if the user is inspecting or not.

This link is a good start for a DOM dumping script , but you'll want to dump the entire DOMWindow object, not just document.

Update:

Looks like there's a way to do this now. Check out Chrome Inspector Detector

---

Also you can try this: 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);
});

---

If you are developers who are doing stuff during development. Check out this Chrome extension. It helps you detect when Chrome Devtoos is opened or closed.

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

This extension helps Javascript developers detect when Chrome Devtools is open or closed on current page. When Chrome Devtools closes/opens, the extension will raise a event named 'devtoolsStatusChanged' on window.document element.

This is example code:

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

---

Some answers here will stop working in Chrome 65. Here's a timing attack alternative that works pretty reliably in Chrome, and is much harder to mitigate than the toString() method. Unfortunately it's not that reliable in 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);

});

---

As for Chrome/77.0.3865.75 a version of 2019 not works. toString invokes immediately without Inspector opening.

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

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

console.log('%c', detector)

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

참고URL : https://stackoverflow.com/questions/7798748/find-out-whether-chrome-console-is-open