如何在JS文件中检测用户浏览器是否打开了调试面板(开发者工具)。

   const element = new Image();
    Object.defineProperty(element, 'id', {
      get: function () {
        alert("控制台开启")
      }
    });
     console.log('%c', element);

之前vue里用的是上面的代码,最近发现不好用了,请问有人知道为什么吗?
有别的方法来检测是否开启开发者模式吗?

用这个方法试试
你题目的解答代码如下:

<script type="text/javascript">
var re = /x/;
var n = 0;
re.toString = function () {
    n++;
    if(n>1)
        alert("控制台开启");
};
console.log(re);
</script>

如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

img

没搞了,升级过chrome应该不支持这种检查了,题主代码应该是来自Stack Overflow下面这个问题,试试2019版本的。不过测试了最新的chrome也无效

requestAnimationFrame (Late 2019)
Leaving these previous answers here for historical context. Currently Muhammad Umer's approach works on Chrome 78, with the added advantage of detecting both close and open events.

function toString (2019)
Credit to Overcl9ck's comment on this answer. Replacing the regex /./ with an empty function object still works.


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)
Since the original asker doesn't seem to be around anymore and this is still the accepted answer, adding this solution for visibility. Credit goes to Antonin Hildebrand's comment on zswang's answer. This solution takes advantage of the fact that toString() is not called on logged objects unless the console is open.


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)

Update: console.profiles has been removed from Chrome. This solution no longer works.

Thanks to Paul Irish for pointing out this solution from Discover DevTools, using the profiler:


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>

When printing “Element” Chrome developer tools will get its id

   var checkStatus;
    
    var element = document.createElement('any');
    element.__defineGetter__('id', function() {
        checkStatus = 'on';
    });
    
    setInterval(function() {
        checkStatus = 'off';
        console.log(element);
        console.clear();
    }, 1000);
Another version (from comments)

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

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

具体要做什么操作?检查这个打开要做什么操作?如果是不想给别人调试代码,直接setInterval定时debugger


    setInterval(() => { debugger; },500)

img

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632