發布日期：2025 年 10 月 22 日
Chrome 即將淘汰 JavaScript 來源的即時編輯功能。Chrome 142 版會將這項功能移至實驗旗標後方，並預計在 Chrome 145 版 (2026 年 2 月) 完全移除。我們不會移除與來源檔案相關的其他強大功能，例如「本機覆寫」、「工作區」或「程式碼片段」，這些功能將繼續獲得完整支援。
Chrome 開發人員工具團隊持續努力，為開發人員提供強大且可靠的工具。為此，我們有時必須淘汰不再有助於達成目標的功能。這項決定經過審慎考量，因為這項功能的維護成本過高，但使用率偏低，而且有更優異的現代替代方案。我們瞭解任何工作流程異動都可能造成不便，因此希望透過這篇文章清楚說明原因。
什麼是即時編輯？
透過即時編輯功能，您可以在執行階段即時取代指令碼檔案的內容。即使指令碼在斷點暫停，這項功能仍可正常運作。您可以在「來源」面板中修改 JavaScript 程式碼，然後儲存檔案 (Command+S / Ctrl+S) 來套用變更。偵錯工具接著會修補執行階段已定義的函式。如果修改後的函式位於呼叫堆疊中，也會重新啟動。
目標是提供一種測試小變更的方法，不必重新載入整個頁面，否則會清除應用程式的狀態。因此，它的目標與新式開發堆疊中的熱模組更換 (HMR) 類似。
我們為什麼要移除這項功能？
即時編輯的使用者體驗一直以來都充滿挑戰。相關快速鍵 (Command+S / Ctrl+S) 通常與儲存檔案相關聯，但不會有進一步的副作用，這可能令人驚訝。如果失敗，意見回饋可能不清楚：開發人員工具可能會顯示「LiveEdit failed: Functions that are on the stack (currently being executed) can not be edited」等警告訊息，這可能會遭到忽略，導致開發人員不確定變更是否已套用。
如果即時編輯功能與其他開發人員工具功能 (與來源檔案相關) 互動，情況會更加糟糕。舉例來說，如果即時編輯開發人員工具程式碼片段的內容，開發人員工具可能會混淆程式碼片段來源的身分參照，導致新版本顯示為唯讀檔案。啟用「工作區」功能後，開發人員工具可能會監控檔案系統中的來源變更，並將這些變更套用至即時網頁。視使用者的環境和工具鍊設定而定，這種行為可能符合預期或令人意外。
即時編輯功能原本是為瞭解決「變更內容時不會遺失應用程式狀態」的問題，但現在熱模組更換 (HMR) 功能可以更有效地解決這個問題。HMR 是 React、Angular 或 Vue 等現代網頁開發架構的標準功能。在使用者空間和較高的抽象層級，這可達到相同的效果。開發人員工具中的即時編輯功能可能會干擾這項功能，導致非預期的錯誤行為。
這些問題會導致使用者體驗不佳。此外，使用統計資料也證實，這項功能並未成為大多數開發人員工作流程的核心部分。使用這項功能的使用者人數非常少，而且有下降趨勢。
維護成本高昂且技術複雜
就定義合理的語意而言，取代實際網頁上的程式碼並不容易，實作方面也是如此。這會對 V8 JavaScript 引擎和 Chrome 開發人員工具造成龐大的工程成本，因此需要仔細考量 V8 的許多部分。如果沒有特別注意，即時編輯可能會導致難以重現和偵錯的當機問題。舉例來說，如果新版函式包含的正規運算式、物件或函式常值數量與舊版不同，就必須仔細比對追蹤這些常值的資料結構。
這項維護負擔會減緩新 JavaScript 功能的實作速度，並從改善更廣泛使用的開發人員工具功能中抽調資源。
這種複雜性也導致許多不支援的情境，包括：
- 編輯呼叫堆疊中的函式，但不是最頂層的影格。
- 編輯非同步函式或產生器。
- 編輯 ES 模組的頂層程式碼。
替代方案
如先前所述，熱模組更換 (HMR) 是更受歡迎的替代方案，在幾個重要方面都優於即時編輯：
- 即時編輯功能會在原始碼層級，取代舊版網頁的部分內容。另一方面，HMR 會在 Web 架構預期的抽象層級替換舊版，提高在即時更新期間正確遷移元件和應用程式狀態的機率。
- HMR 會處理您撰寫的原始碼。您可以在編輯器中編輯原始檔案 (例如 TypeScript、JSX)，建構工具會處理瀏覽器中的更新，而即時編輯只會影響已部署的來源檔案，這些檔案在許多情況下都是工具鍊產生的建構輸出內容。
- 功能完善且整合良好。HMR 是現代開發工具鍊的核心部分，可提供可靠的體驗，並在更新成功或失敗時提供明確的回饋。
移除即時編輯功能不會影響 Chrome 開發人員工具中的其他兩項強大功能：
- 本機覆寫功能可讓您攔截網路要求，並改為提供本機檔案。如果您無法存取原始碼，但想在實際運作的網站上測試變更，這項功能就非常適合您。即使重新載入頁面，變更也會保留。
- 工作區會在「來源」面板和本機專案檔案之間建立雙向繫結，將開發人員工具變成更強大的編輯器。在開發人員工具中儲存變更時，系統會直接儲存至檔案系統。這可能會觸發開發伺服器的 HMR 或即時重新載入程序。
結論
由於維護成本高且使用率低，因此我們決定移除即時編輯功能。新式網頁開發生態系統已提供更優異的解決方案，也就是熱模組更換。
停用這項功能後，我們就能將工程資源投入 Chrome 開發人員工具中更具影響力的部分。移除時間表如下：
- 近期：這項功能將在 Chrome 142 中移至實驗功能， 並以 Chrome 旗標 (chrome://flags/#devtools-live-edit) 的形式提供。
- Chrome 145 (2026 年 2 月)：這項功能和對應的 Chrome 旗標將完全移除。
歡迎針對這項異動提供意見。在意見回饋問題中新增評論。