問題描述

如何保存 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。