查看 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/