快捷導(dǎo)航

前端頁(yè)面如何限制用戶打開瀏覽器控制臺(tái)詳解

更新時(shí)間：2026年03月11日 09:53:55 作者：JYeontu

在前端開發(fā)中禁用瀏覽器控制臺(tái)并非一個(gè)推薦的做法,且從技術(shù)上講無法完全阻止用戶打開控制臺(tái),然而如果你有特殊需求或想要增加一些障礙來阻止普通用戶輕易地打開控制臺(tái),這篇文章主要介紹了前端頁(yè)面如何限制用戶打開瀏覽器控制臺(tái)的相關(guān)資料,需要的朋友可以參考下

說在前面

作為一名開發(fā)，相信大家對(duì)于瀏覽器控制臺(tái)都是不陌生的，平時(shí)頁(yè)面一出問題第一反應(yīng)總是先打開控制臺(tái)看看報(bào)錯(cuò)信息，而且還可以在控制臺(tái)里插入自己的腳本信息來修改頁(yè)面邏輯，那么你有沒有想過 怎么限制用戶打開控制臺(tái) 呢？

禁用右鍵菜單

在頁(yè)面上點(diǎn)擊鼠標(biāo)右鍵我們可以看到有個(gè) 檢查選項(xiàng)，通過這個(gè)菜單可以直接打開控制臺(tái)，我們可以直接在這個(gè)頁(yè)面上禁用右鍵菜單。

document.addEventListener("contextmenu", e => e.preventDefault());

加上這段代碼后用戶在頁(yè)面上點(diǎn)擊右鍵就不會(huì)有反應(yīng)了。

攔截快捷鍵

除了右鍵菜單欄，還有最經(jīng)典的 F12 ，通過 F12 快捷鍵也可以快速打開控制臺(tái)，所以我們也可以將這個(gè)快捷鍵給攔截掉

document.addEventListener("keydown", e => {  
  if (e.keyCode === 123) {
    e.preventDefault();  
  }  
});

那么除了 F12 你知道還有什么快捷鍵可以打開控制臺(tái)嗎？

Ctrl+Shift+C
Ctrl+Shift+I

上面這兩個(gè)快捷鍵也可以打開控制臺(tái)，還有一個(gè)快捷鍵 Ctrl+U 可以打開源碼頁(yè)面，這里我們也可以一起把它給攔截掉。

document.addEventListener("keydown", e => {  
  if (e.keyCode === 123 ||               // F12  
      (e.ctrlKey && e.shiftKey && e.keyCode === 67) || // Ctrl+Shift+C  
      (e.ctrlKey && e.shiftKey && e.keyCode === 73) || // Ctrl+Shift+I  
      (e.ctrlKey && e.keyCode === 85)) { // Ctrl+U  
    e.preventDefault();  
  }  
});

加上這段代碼后用戶在頁(yè)面上按下這些快捷鍵就不會(huì)有反應(yīng)了。

檢測(cè)窗口變化

加上前面的攔截之后，其實(shí)我們還是有辦法打開控制臺(tái)，可以通過瀏覽器設(shè)置來打開控制臺(tái)，這里的入口我們并無法監(jiān)聽攔截到

let lastWidth = window.innerWidth;
let lastHeight = window.innerHeight;

window.addEventListener("resize", () => {
  const widthDiff = Math.abs(window.innerWidth - lastWidth);
  const heightDiff = Math.abs(window.innerHeight - lastHeight);

  // 如果窗口尺寸變化但不是全屏切換，可能是控制臺(tái)打開
  if ((widthDiff > 50 || heightDiff > 50) && !isFullScreen()) {
    //跳轉(zhuǎn)到空白頁(yè)面
    window.location.href = "about:blank";
    alert("檢測(cè)到異常窗口變化，請(qǐng)關(guān)閉開發(fā)者工具");
  }
  lastWidth = window.innerWidth;
  lastHeight = window.innerHeight;
});

function isFullScreen() {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  );
}

通常默認(rèn)是會(huì)在頁(yè)面內(nèi)靠邊打開控制臺(tái)，所以可以通過監(jiān)聽頁(yè)面大小變化來簡(jiǎn)單判斷是否打開控制臺(tái)，監(jiān)聽到打開后直接跳轉(zhuǎn)到空白頁(yè)面。

但是還有這么兩種情況

全屏切換時(shí)的尺寸變化可能被誤判
獨(dú)立打開控制臺(tái)頁(yè)面時(shí)無法監(jiān)聽到

無限D(zhuǎn)ebugger

我們還可以通過 Function("debugger") 來動(dòng)態(tài)生成斷點(diǎn)（動(dòng)態(tài)生成是為了防斷點(diǎn)禁用），通過無限循環(huán)生成斷點(diǎn)，讓頁(yè)面一直處于斷點(diǎn)狀態(tài)。

(() => {  
  function block() {  
    setInterval(() => {  
      (function(){return false;})["constructor"]("debugger")["call"]();  
    }, 50);  
  }  
  try { block(); } catch (err) {}  
})();

雖然我們可以通過一些技術(shù)手段，給用戶打開控制臺(tái)設(shè)置一些障礙，但對(duì)于經(jīng)驗(yàn)老到的用戶而言，繞過這些限制并非難事。依賴前端技術(shù)攔截控制臺(tái)訪問是一種典型的“防君子不防小人”策略，不能想著靠這些手段來保障自己網(wǎng)站的安全。