查看 chrome 開發者工具的變化差異

Question

devtools 可以顯示原始文件和當前修改之間的差異嗎？
或修改選擇器的列表及其新值，在 CSS 的情況下？

我知道：

• 本地修改- 每次更改的歷史，但不是原始的..當前
• Map 到工作區- 將修改后的文件保存到其源
• 源地圖- 見預處理源 (SCSS)

工作流 (SCSS)

• 使用 CSS 使用元素窗格編寫更改（不能直接編輯 SCSS 規則）
• 記住兩個 windows 中的更改或交叉引用
• 添加到 SCSS，編譯，重新加載，希望我沒有錯過任何東西。

如果可以在元素窗格中編輯 SCSS，那么我們可以使用工作空間映射和 livereload 進行保存，但它會比在瀏覽器中修改 CSS 慢。

Answer 1

不確定它是否有助於 smdy，但我在 chrome 開發工具中找到了有用的“更改”選項卡。 這是一個教程鏈接，在哪里可以找到它以及它是如何工作的：

https://developer.chrome.com/docs/devtools/changes/