有没有办法获取您在 Chrome 开发工具中应用的自定义 CSS 更改的列表？
当您在 Chrome 开发工具中使用 CSS 以使您的网页看起来正确时，可以方便地轻松跟踪您所做的更改。
我知道工作区，但用例是一个 Angular 5 应用程序，您的 CSS 被捆绑并可能被缩小。
澄清一下：
【问题讨论】：
标签： css google-chrome-devtools
在开发工具中，您可以通过以下任一方式找到更改抽屉：
【讨论】：
这取决于你如何应用 css 修复。
如果您应用 css 代码内联，您将无法获得包含您所做的修复列表的文件。
如果您在 inspector-stylesheet 中进行了更改，您可以找到包含所有修复的文件
转到Source选项卡 >从左侧列表中打开localhost >你可以 查看名为 inspector-stylesheet 的文件。
这将显示您的所有修复。
另一种从开发工具中的 'Elements' 选项卡中选择 css 修复的方法，您可以轻松复制所做的编辑并将其粘贴到项目的 css 文件中，或者您可以编辑源文件本身开发工具中的 'Source' 选项卡中，您需要做两件事来保留所做的更改：
通过按 Ctrl + S 或 Cmd + S 保存更改并自动将更改保存在您的项目文件中的根 css 文件。
您可以将更改从开发工具复制并粘贴到代码编辑器中的 css 文件中
【讨论】：
嗯，我学到了一些新东西?
如何在控制台中监控内联样式的变化
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
const targetNode = document
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
console.log({
mutation,
inline: mutation.target.style[0],
style: mutation.target.style[mutation.target.style[0]]
})
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
这并不能解决问题
但可以用作问题自定义解决方案的起点。
每个元素的自定义差异将旧值替换为最新值，您最终可能会使用您自己维护的列表获得到目前为止所有更改的差异。
这可能是每个浏览器的 pr 或创建为 chrome 扩展。 Goodluck，想提出一个可能的解决方案，而不是说这是不可能的。
【讨论】：
我知道这是“另一个”主题，但您可以尝试在 VS Code 中的一些实时检查器扩展中启动它，以便跟踪所有内容...
【讨论】：