☰

在 Chrome 中重新載入腳本/樣式表

tag-icon • tag-icon google-chrome
在 Chrome 中重新載入腳本/樣式表

使用 Chrome 的開發工具，是否可以僅重新載入註入到頁面中的一個（或多個）腳本或樣式表，而無需重新載入整個頁面？那麼，如果我使用page.html和script.js，style.css是否可以重新加載，例如，script.js，而不刷新page.html？

答案1

一種簡單的方法，幾乎適用於所有樣式表和圖像是透過向其 url 新增查詢來更改檔案名稱。

例如，在超級使用者中，css 為：

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07">

將其更改為

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07&refresh">

並獲得重新加載的（儘管相同）樣式規則。

這可以製作成書籤或複製到控制台

[].forEach.call(document.querySelectorAll("link[rel=stylesheet]"), function(link) {
   link.href+=(link.href.indexOf("?") > -1) ? "&refresh" : "?refresh";
})

至於腳本，你不應該這樣做。幾乎全部腳本正在修改載入時的頁面或將其自身附加到某個處理程序。您可以輕鬆加載另一個 js 文件，但先前的更改很難撤消。

答案2

我可以看到，當嘗試調試多頁面表單或由 Ajax 加載的內容以回應一系列問題時，這會很有用；然而，我個人曾見過在 Chrome 開發工具中修改 CSS 或腳本所產生的結果與將這些相同的更改添加到適當的文件並從頭開始重新加載頁面時產生的結果不同的情況。這種情況不會一直發生，但我已經看到這種情況發生得足夠多了，以至於在開發工具中進行多次更改後，我對是否相信結果猶豫不決。

我不確定你為什麼要這樣做，但是，假設它是為了調試一些長鏈進程，我建議添加一個簡單的測試來確定你是否正在調試。根據程式碼的設定方式，我會嘗試新增偵錯點，其行為類似於以下粗略範例：

If (current-point != debug-point && debugging === true) Then
   ---code to bypass steps here---
Else
   ---other code to aid the debug process or allow regular execution---
End If

顯然，製作一個函數是理想的選擇。設定此功能可能需要花費一些精力，並且您必須在上線之前刪除它或以其他方式停用它，但與反覆重新載入頁面和重做一長串步驟相比，它會節省時間。

如果您的程式碼非常複雜（透過使用外部程式庫或只是草率的程式碼）或者您必須在即時系統上工作，則這可能是不可能的。但是，如果可能的話，那麼自動化或繞過您需要的步驟將使您能夠更快地調試和工作，並獲得更準確的結果，而不是依賴Chrome 的開發工具來準確解釋和反映您在頁面加載後所做的所有更改。

相關內容