瀏覽器開發者工具開啟檢測

空山與新雨發表於2023-09-25
瀏覽器

目錄

方法一console.log

在safari中，如果開啟了控制檯，console.log列印日期例項、函式例項、正則例項會觸發兩次toString方法，那麼可以重寫toString方法檢測是否開啟了控制檯。

let count = 0;
const temp = () => {}
temp.toString = () => {
  count++;
  return "";
}
console.log(temp);
alert(count)
if (count >= 2) {
  alert('開啟了開發中工具');
}

在safari中，如果開啟了控制檯，console.logdom節點的時候會觸發dom節點上id的getter方法，透過自定義這個getter方法來檢測是否開啟了safari的控制檯。

const ele = document.createElement("a");
Object.defineProperty(ele, "id", {
  get: () => {
    alert('開啟了開發中工具')
  },
});
console.log(ele)

在Firefox中，如果開啟了控制檯，console.log正則時候會觸發正則的toString方法，那麼可以重寫toString方法來檢測是否開啟了控制檯。（適用於火狐瀏覽器, 不適用於chrome safari edge）


const temp = /\./
temp.toString = () => {
  alert('開啟了開發中工具');
  return "";
}
console.log(temp);

方法二： debugger

debugger只有在開啟控制檯的情況下才會觸發，而人的手動跳過斷點又沒有那麼快，這中間就有了個時間差，依據這個時間差來判斷是否開啟了控制檯

function detectDebug() {
  const date = Date.now();
  debugger;
  // 你的手不可能快於0.1秒
  if (Date.now() - date > 100) {
    alert('開啟了控制檯')
  }
}
detectDebug()

方法三：console.table

控制檯開啟的情況下，console.table的引數如果是一個大物件陣列，會比較耗時，而console.log耗時和console.table的耗時差了個量級，透過對比兩者的耗時來確定是否開啟了控制檯。

透過測試總結，如果console.table的耗時超過 console.log的十倍可以確定開啟了控制檯。

// 建立一個大的陣列物件
function createArr() {
  const obj = {};
  for (let i = 0; i < 200; i++) {
    obj[i] = i;
  }
  const arr = [];

  for (let i = 0; i < 100; i++) {
    arr.push(obj);
  }

  return arr;
}

let arr = createArr();

function calculateTime(func) {
  const start = Date.now();
  func();
  return Date.now() - start;
}
// 時間耗時
const tableConsumeTime = calculateTime(() => console.table(arr));

const logConsumeTime = calculateTime(() => console.log(arr));

console.clear()
alert('logPrintTime:' + logConsumeTime)
alert('tablePrintTime:' + tableConsumeTime)

if (tableConsumeTime > logConsumeTime * 10) {
  alert('開啟了控制檯')
}

方法四：內容寬度

當控制檯開啟狀態下，頁面的展示內容是被侵佔的，所以可以使用window.outerWidth - window.innerWidth 寬度差來確定是否開啟了控制檯

有一些情況需要考慮：

  1. 頁面縮放會影響window.innerWidth
  2. iframe的window.innerWidth是自己的寬度，而不是頂層頁面的寬度
  3. 360瀏覽器等會有一個邊欄放置一些功能選單，這時候就要將這個差值考慮在內。
  4. 新版chrome瀏覽器的收藏夾和閱讀清單可以在右側開啟一個選單欄，這個選單欄也會佔用內容區域。
function check(){
  let screenRatio = window.devicePixelRatio

  if(!screenRatio && window.screen.deviceXDPI && window.screen.logicalXDPI ){
    screenRatio = window.screen.deviceXDPI / window.screen.logicalXDPI  
  }

  const widthFlag = window.outerWidth - window.innerWidth * screenRatio > 200;  
  const heightFlag = window.outerHeight - window.innerHeight * screenRatio > 300;  
  if (widthFlag || heightFlag) {
    alert('開啟了控制檯')
  }
}
check()
window.addEventListener('resize', () => {
  setTimeout(() => {
    check();
  }, 1000);
}, true);

總結

  1. 優先使用方法一，可以在safari firefox中起作用
  2. chrome中使用方法二
  3. 如果禁用了debugger，可以使用方法三，不過方法三屬於經驗總結，並不一定準確，可能會誤判。
  4. 方法四誤判的機率更大，如果可以確定目標瀏覽器，則可以針對性的使用。

相關文章