chrome dev工具中css更改的摘要

Question

有没有办法获取您在chrome dev工具中应用的自定义CSS更改列表？

当你在chrome dev工具中使用css来让你的网页看起来正确时，可以很方便地跟踪你所做的更改。

我知道工作区，但用例是一个有角度的5应用程序，你的css捆绑在一起，可能会缩小..

澄清：  我的页面看起来与它的外观相差甚远 =＆GT;我在开发工具中做了20次css修复，直到看起来不错 =＆GT;现在我想从原始页面获得一个（css）delta，所以我有一个我应该在真正的css样式中实现的更改列表。

Answer 1

您可以通过Changes Drawer

查看所有更改

步骤

1. 打开开发工具（ F12 ）
2. 通过以下任一方式打开更改抽屉：

   • A）打开命令面板（ Ctrl + Shift + P ），然后键入“ < em>更改”

     

   • B）打开抽屉（ Esc ），单击更多选项菜单（三点），然后选择“更改”

     

Answer 2

实际上，您可以按照自己的意愿做：

它在Sources->MyCssFile->Local Modifications...

下

转到“源”选项卡，选择所需的css文件，然后右键单击并选择Local modifications，将根据您的要求为您提供diff样式的本地更改摘要。

或者-您可以通过映射本地文件将更改直接保存到本地CSS文件，以便chrome开发工具自动保存您对此CSS文件所做的任何更改。

Answer 3

这取决于您应用css代码内嵌时如何应用css修复程序，因此您无法获取包含所做修复程序列表的文件，但如果您在检查程序中进行了更改，则样式表您可以在来源标签＆gt;＆gt;中找到包含所有修正的此文件。从左侧列表中打开 localhost ＆gt;＆gt;您可以看到名为 inspector-stylesheet 的文件......在这里您可以选择所有修复。

custom css fix (image)

css changes file (image)

从开发工具中的'元素'标签中选择css修补程序的另一种方法是，您可以轻松复制所做的编辑并将其粘贴到项目的css文件中，或者您可以编辑源文件本身来自开发工具中的'源'标签，您有两件事要做，以保持您所做的更改：

1-按ctrl + S或命令+ S保存更改，并自动保存项目文件中root css文件的更改。

2-您可以在代码编辑器中将开发工具中的更改复制并粘贴到您的css文件

Answer 4

我知道这是“另一门”主题，但是您可以try在extension的某个实时检查器vscode中启动它，以便关注一切...

Answer 5

嗯，我学到了一些新东西?

如何在控制台中监视对内联样式的更改

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

引用：https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

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);

这不能解决问题

但可以用作针对该问题的自定义解决方案的起点。

每个元素的自定义差异将旧值替换为最新值，您最终可能会使用自己的维护列表来进行到目前为止所有更改的差异。

这可以是每个浏览器的公关名称，也可以创建为chrome扩展名。古德勒克（Goodluck），想提出一个可能的解决方案，而不是说不可能。