如何儲存在 Chrome DevTools 的樣式面板中所做的 CSS 變更？

從Chrome 開發者工具樣式面板儲存CSS 變更

在Google Chrome 開發者工具中，您可能會遇到透過樣式面板進行CSS 變更的問題無法出現在資源面板中。在本地處理 CSS 檔案時，這可能會特別令人沮喪。

為了解決這種情況，Chrome 引入了一種解決方法，其中包括將本機資料夾新增至工作區。透過這樣做，您可以將 Web 資源對應到本機資源，從而允許您在本機上編輯和儲存變更。

儲存CSS 變更的步驟：

1. 將資料夾新增至工作區： 右鍵點選「來源」選項卡的左側面板，然後選擇「將資料夾新增至工作區。」
2. 允許Chrome存取： 授予 Chrome 存取您要新增的資料夾的權限。
3. 映射網路資源： 選擇網路資源在網路標籤中並將其對應到對應的本地資源。
4. 進行更改：重新載入頁面並在本機編輯 CSS 檔案。
5. 儲存變更：按「Ctrl S」(Windows) 或「Cmd S」(Mac) 儲存變更。

其他提示：

• 您可能有開啟對應檔案並進行一些變更以觸發 Chrome 對本機資源的辨識。
• Chrome 的工作區功能最初透過 Canary 通道提供，但現在已整合到瀏覽器的穩定版本中。

第三方外掛程式

Chrome 內建功能提供了解決方案，您也可以考慮使用外部附加元件來保存 CSS 變更。目前，與 Firebug 廣泛的 CSS 變更儲存工具不同，Chrome 的可用選項有限。然而，LiveReload 和 Stylus 等第三方工具提供類似的功能，可增強您的開發工作流程。

以上是如何儲存在 Chrome DevTools 的樣式面板中所做的 CSS 變更？的詳細內容。更多資訊請關注PHP中文網其他相關文章！