在 Vue 項目的開發階段，我們習慣使用 Vue Devtools 調試組件、狀態和事件。但代碼部署到生產環境后，默認情況下 Devtools 是禁用的，以防止敏感信息泄露。

然而，如果線上環境出現 Bug，如何在不重新部署的情況下臨時啟用 Vue Devtools 進行調試？今天我們就來探討幾種安全、可控的激活方式。

為什么生產環境默認禁用 Devtools？

Vue 在生產構建（production 模式）時會移除 Devtools 相關代碼，主要出于以下考慮：

• 安全性：避免暴露組件結構、狀態管理（如 Vuex/Pinia）數據。
• 性能優化：減少不必要的調試代碼，提升運行效率。

但在某些情況下，我們需要臨時開啟 Devtools 排查問題，下面介紹幾種可行的方法。

方法 1：代碼動態啟用（需重新部署）

如果你能控制生產環境的代碼更新，可以在 Vue 初始化時手動開啟 Devtools：

• Vue 3 配置：

import { createApp } from 'vue';  
import App from './App.vue';  

const app = createApp(App);  
app.config.devtools = true; // 強制啟用 Devtools  
app.mount('#app');

Vue 2 配置：

import Vue from 'vue';  
import App from './App.vue';  

Vue.config.devtools = true; // 手動開啟  
new Vue({ render: h => h(App) }).$mount('#app');

適用場景：

• 可接受短時間重新部署。
• 需要長期開啟調試模式（如預發布環境）。

注意事項：確保調試完成后關閉，避免長期暴露敏感信息。

方法 2：通過 URL 參數動態激活

如果不想修改代碼，可以通過 URL 參數控制 Devtools 的開啟：

• 代碼調整（入口文件）：

const urlParams = new URLSearchParams(window.location.search);  
if (urlParams.has('debugVue')) {  
  app.config.devtools = true; // Vue 3  
  // Vue.config.devtools = true; // Vue 2  
}

• 訪問時帶上參數：

https://your-domain.com/?debugVue=true

適用場景：

• 臨時調試，無需修改生產代碼。
• 僅限內部人員使用，避免公開暴露。

注意事項：確保該參數不被搜索引擎收錄（如 robots.txt 屏蔽）。

方法 3：瀏覽器控制臺臨時激活

如果無法修改代碼，可以嘗試在瀏覽器控制臺手動啟用 Devtools：

• Vue 3

// 確保 Vue 已加載  
const app = window.__VUE_APP__; // 或通過其他方式獲取 Vue 實例  
app.config.devtools = true;

• Vue 2

Vue.config.devtools = true;

適用場景：緊急調試，無代碼修改權限時。

注意事項：刷新頁面后失效。

部分生產構建可能移除全局 Vue 變量，導致方法不可用。

方法 4：使用 Chrome 本地代碼覆蓋

如果生產環境的代碼經過混淆，但仍保留 Sourcemap，可以利用 Chrome 的 Local Overrides 功能修改代碼：

• 打開 Chrome DevTools → Sources → Overrides。
• 選擇 Vue 入口文件（如 app.js），添加 Vue.config.devtools = true;。
• 刷新頁面，Devtools 即可生效。

適用場景：

• 生產代碼有 Sourcemap，可定位原始文件。
• 適用于復雜問題的深入調試。

安全提醒

• 調試完成后務必關閉 Devtools，避免數據泄露。
• 避免長期開啟，防止被惡意利用。
• 敏感數據脫敏，確保即使 Devtools 開啟也不會暴露關鍵信息。

總結

推薦方案：

• 內部測試環境 → 使用方法 1（代碼動態啟用）。
• 生產環境緊急調試 → 使用方法 2（URL 參數）或方法 3（控制臺激活）。