問題描述

如何儲存 Google Chrome Developer Tools 的 Styles panel 的 CSS 變更？

在工具的網站上，提到 we can see all change in resource panel

但是我在本地工作的 CSS 檔案，但更改沒有顯示在我的資源面板

順便說一下你知道任何 add-ons，工具來儲存 Chrome Developer 工具的 css 更改？我知道對於 Firebug 有很多 https://stackoverflow.com/search?q=firebug+CSS+changes+save

最佳解決方案

您可以從 Chrome 開發工具本身儲存您的 CSS 更改。 Chrome 現在允許您將本地資料夾新增到您的工作區。允許 Chrome 訪問資料夾並將資料夾新增到本地工作區後，可以將 Web 資源對映到本地資源。

  • 導航到左側面板 (列出檔案的位置) 的開發工具 Right-click 的 「源」 面板，然後選擇 「將資料夾新增到工作區」 。您可以透過單擊 「元素」 面板中所選元素的每個 CSS 規則的 top-right 中的樣式錶快速訪問 「源」 面板中的樣式表。

  • 新增該資料夾後，您必須讓 Chrome 訪問該資料夾。

  • 接下來，您需要將網路資源對映到本地資源。

  • 重新載入頁面後，Chrome 會載入對映檔案的本地資源。為了使事情變得更簡單，Chrome 只會向您顯示本地資源 (所以您不必就編輯本地或網路資源而感到困惑) 。要儲存更改，請在編輯檔案時按 CTRL + S 。

附：

您可能需要開啟對映檔案並開始編輯，才能使 Chrome 應用本地版本 (日期 201604.12) 。

次佳解決方案

Chrome 的新版本有一個稱為工作區的功能來解決這個問題。您可以在 Web 伺服器上定義哪些路徑對應於系統中的哪些路徑，然後使用 ctrl-s 進行編輯和儲存。

參見：http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

第三種解決方案

你正在看錯”Resources” 的部分。

它不在”Local Storage” 下，它在”Frames” 下：

上面的螢幕截圖顯示了原始樣式與在 devtools 中進行的新修改的差異。您可以在左窗格中將專案 right-click 儲存回磁碟。

第四種方案

Tincr Chrome 擴充套件更容易安裝 (不需要執行節點伺服器)，並且還附帶 LiveReload 功能，包括在內！談論 bi-directional 編輯！ 🙂

Tin.cr Website

Chrome Web Store Link

Andy’s Blog Article

第五種方案

現在 Chrome 18 上週釋出了所需的 API，我在 Chrome 網上商店釋出了我的 chrome extension 。擴充套件自動將開發工具中的 CSS 或 JS 中的更改儲存到本地磁碟中。去看看吧

第六種方案

我知道這是一個老帖子，但我以這種方式儲存：

  1. 轉到 「資訊源」 窗格。

  2. 單擊顯示導航器 (以顯示左側的導航器窗格) 。

  3. 單擊所需的 CSS 檔案。 (它將在編輯器中開啟，並進行所有更改)

  4. 右鍵單擊編輯器並儲存更改。

您還可以看到本地修改來檢視您的修訂版，非常有趣的功能。還可以使用指令碼。

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。