Как отследить DevTools состояние?

17 апреля 2021, 08:10

Возможно ли по средствам JavaScript отследить что пользователь зашел на старицу с уже открытой панелью разработчика DevTools ? (не только для Chrome но и для других браузеров)

Answer 1

Вот такой способ, о котором я писал ранее в комментариях.

function debuggerOpened() { 
  console.log('debugger opened') 
} 
 
let last = Date.now() 
setInterval(function() { 
  debugger; 
  let now = Date.now() 
  now - last > 500 && debuggerOpened();  
  last = now; 
}, 10)

Answer 2

Можно попробовать еще вот такой подход.

При открытом DevTools console.log будет работать медленнее, чем при закрытом.

Данный метод не очень хорошо работает в Firefox, там надо подобрать другие функции работы с консолью.

const arr = new Array(5000).fill(Math.random().toString('36')).join(' '); 
const delay = getDelay(arr) * 2; 
delayTime.textContent = delay; 
var isOpen = null; 
setInterval(() => { 
  const arr = new Array(5000).fill(Math.random().toString('36')).join(' '); 
  const time = getDelay(arr); 
  isOpen = time > delay; 
  currentTime.textContent = time; 
  consoleStatus.innerText = isOpen ? 'opened' : 'closed'; 
}, 1000); 
 
function getDelay(data) { 
  var t = performance.now(); 
  console.log(data); 
  return performance.now() - t; 
}

<div id="consoleStatus"></div> 
<div id="delayTime"></div> 
<div id="currentTime"></div>

Answer 3

Это решение использует тот факт, что toString() не вызывается для зарегистрированных объектов, если консоль не открыта.

var devtools = /./;
devtools.toString = function() {
  this.opened = true;
}
console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened