Javascript - 브라우저 관리자 모드(f12, Ctrl + Shift + C) 감시하기

어떤 블로거분 글을 보다가 너무 이쁘게 꾸며져 있어서 이건 뭘까하고 개발자 정신이 발동되어 f12부터 눌렀는데 자꾸 티스토리 페이지로 강제 이동이 되었다...

 

오잉 뭐지?! 하고 또 시도해봤는데.. 2차 팅...

이번엔 컨트롤 쉬프트 c로 강제로 열어봤는데 또 튕긴다...

관리자모드를 열어둔상태로 가봤는데도 튕기고 옵션에 찾아가서 클릭으로 열어도 튕긴다

 

... 우와 신기하다!!

 

어떻게 한건지 찾아보니 이미 감시하는 이벤트를 만들어두신분들이 있었다.

 

출처: https://dev.to/composite/a-simple-way-to-detect-devtools-2ag0

A simple way to detect devtools.

!function() {
  function detectDevTool(allow) {
    if(isNaN(+allow)) allow = 100;
    var start = +new Date(); // Validation of built-in Object tamper prevention.
    debugger;
    var end = +new Date(); // Validates too.
    if(isNaN(start) || isNaN(end) || end - start > allow) {
      // input your code here when devtools detected.
    }
  }
  if(window.attachEvent) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        detectDevTool();
      window.attachEvent('onresize', detectDevTool);
      window.attachEvent('onmousemove', detectDevTool);
      window.attachEvent('onfocus', detectDevTool);
      window.attachEvent('onblur', detectDevTool);
    } else {
        setTimeout(argument.callee, 0);
    }
  } else {
    window.addEventListener('load', detectDevTool);
    window.addEventListener('resize', detectDevTool);
    window.addEventListener('mousemove', detectDevTool);
    window.addEventListener('focus', detectDevTool);
    window.addEventListener('blur', detectDevTool);
  }
}();

if문쪽에 처리하고 싶은 로직을 넣으면 된다.

alert, location.href  등등

 

 

2022/05/12 추가----------------

당시 브라우저 설정이나 문제가 있었던거 같습니다. 결국 해당 코드도 디버거 효과로 중간에 강제로 읽게하고 꺼지는 기능인지라... 사실 관리자도구로 찍어볼만한건 다 찍어보고 끌수 있습니다.(즉 별 의미 없다는 소리입니다...ㅜㅠ)