Chrome Dev Tools - 修改 javascript 並重新加載

Question

是否可以修改頁面的 JavaScript 然后重新加載頁面而不重新加載修改后的 JavaScript 文件（從而丟失修改）？

Answer 1

這是一種變通方法，但實現此目的的一種方法是在要操作的 javascript 文件或塊的開頭添加斷點。

然后，當您重新加載時，調試器將在該斷點處暫停，您可以對源代碼進行任何更改，保存文件，然后通過修改后的代碼運行調試器。

但正如大家所說，下次重新加載更改將消失 - 至少它可以讓您運行一些稍微修改過的 JS 客戶端。

Answer 2

好消息，修復將於 2018 年 3 月推出，請參閱此鏈接： https ://developers.google.com/web/updates/2018/01/devtools

“本地覆蓋允許您在 DevTools 中進行更改，並在頁面加載時保留這些更改。以前，您在 DevTools 中所做的任何更改都會在您重新加載頁面時丟失。本地覆蓋適用於大多數文件類型

這個怎么運作：

• 您指定 DevTools 應保存更改的目錄。 當您在 DevTools 中進行更改時，DevTools 會將修改后的文件的副本保存到您的目錄中。
• 當您重新加載頁面時，DevTools 會提供本地的修改文件，而不是網絡資源。

要設置本地覆蓋：

1. 打開源面板。
2. 打開覆蓋選項卡。
3. 單擊設置替代。
4. 選擇要將更改保存到的目錄。
5. 在視口頂部，單擊“允許”以授予 DevTools 對該目錄的讀寫權限。
6. 做出你的改變。”

更新（2018 年 3 月 19 日）：它是實時的，這里有詳細的解釋： https ://developers.google.com/web/updates/2018/01/devtools#overrides

Answer 3

資源覆蓋擴展允許您做到這一點：

• 為要替換的 url 創建文件規則
• 編輯擴展中的 js/css/etc
• 隨心所欲地重新加載:)

Answer 4

1. 在 devtools 首選項中，選中啟用本地覆蓋。
2. 轉到網絡選項卡，找到要編輯的文件，單擊它並選擇保存以覆蓋（在源/覆蓋選項卡上，您需要添加本地文件夾）
3. 該文件作為本地副本出現在 Sources 選項卡上的新選項卡中，因此您可以編輯此文件，並且在站點重新加載后，新的（和已編輯的）覆蓋文件將加載到站點上！

Answer 5

我知道這不是確切問題（Chrome 開發人員工具）的答案，但我成功地使用了這個解決方法： http ://www.telerik.com/fiddler

（很確定一些網絡開發人員已經知道這個工具）

1. 在本地保存文件
2. 根據需要編輯
3. 利潤！

完整文檔： http ://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS。 我寧願在 Chrome 中實現它作為preserve after reload的標志，現在不能這樣做，論壇和討論組在公司網絡上被阻止:)

Answer 6

是的，你可以輕松！ 源 -> 文件系統 -> 選擇容器文件夾 -> 允許訪問 -> 打開文件，編輯並保存。 https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/

Answer 7

是的，只需在開發工具中打開“源”選項卡並導航到要更改的腳本。 直接在開發工具窗口中進行調整，然后按 ctrl+s 保存腳本 - 知道將使用新的 js，直到您刷新整個頁面。