在chrome dev工具中更改样式时，是否可以关闭某个事件？

Question

我想跟踪我在网站上的chrome开发工具中所做的更改。我想知道chrome或javascript是否有任何方法可以通过chrome插件或其他东西来跟踪这个。

我在想一件事你可以做的就是存储一个页面的HTML，然后当你进行更改时，将当前的HTML与存储的内容区分开来。这样您就可以跟踪element.style上的样式更改，因为它们会在元素上直接应用为内联样式，如下所示，我添加color:red;：

但是如何跟踪对通过这样的样式表操纵样式的元素所做的样式更改呢？ （我添加了color:white;background:blue;

Answer 1

window.getComputedStyle( element )

  

window.getComputedStyle()方法在应用活动样式表并解析这些值可能包含的任何基本计算后，给出元素的所有CSS属性的值。

下面的演示忽略了跟踪pseudo-elements，但在使用window.getComputedStyle(element[, pseudoElt]);时可能会出现这种功能：

  

element
  要获取计算样式的元素。

     

pseudoElt可选
  指定要匹配的伪元素的字符串。对于常规元素，必须省略（或为null）。

用法

• 通过<script>或开发者控制台将代码添加到您正在处理的HTML文档中。
• 使用setInitStyles()设置或重置每个元素的样式状态，与调用differenceEngine()时进行比较。
• 使用differenceEngine()来区分上次调用setInitStyles()和现在时设置的样式。

实施例

此代码将受益于某些优化，并且可能不希望改变输出格式即。

该代码段将按预期运行（在Chrome中测试），但由于大量数据已记录到console，因此我停用了代码段控制台（以提高效率） ）所以你需要在浏览器中看到输出。

＆＃13;

＆＃13;

const compressedStyles = ( e ) => {
  const ucs = window.getComputedStyle( e );
  var s, cs = {};
  for ( s in ucs ) {
    if ( ucs.hasOwnProperty( s ) && /[^0-9]+/.test( s ) ) {
      cs[ s.replace( /([A-Z])/g, "-$1" ).toLowerCase() ] = ucs[ s ];
    }
  }
  return cs;
},
setElementStyles = ( e ) => {
  e.stylesInit = compressedStyles( e );
  e.stylesDiff = {}; // while we're here
},
allTheThings = () => {
  var att = Array.from( document.body.querySelectorAll( "*:not( script )" ) );
  att.unshift( document.body );
  return att;
},
setInitStyles = () => {
  allTheThings().forEach( setElementStyles );
},
differenceEngine = () => {
  allTheThings().forEach( ( e ) => {
    if ( e.stylesInit ) {
      const cs = compressedStyles( e );
      var s, css, ess;
      for ( s in e.stylesInit ) {
        ess = e.stylesInit[ s ].toString();
        css = cs[ s ].toString();
        if ( ess != css ) {
          e.stylesDiff[ s ] = { "curr": css, "init": ess };
        }
      }
      console.log( e, e.stylesDiff );
    } else {
      setElementStyles( e ); // set current styles on new elements
    }
  } );
};

console.info( "Setting the initial styles" );
setInitStyles();

console.info( "Changing the style of one of the elements" );
document.querySelector( "div" ).style.border = "2px solid red";

console.info( "What's the difference?" );
differenceEngine();

console.info( "Resetting the style of the element" );
document.querySelector( "div" ).removeAttribute( "style" );

console.info( "What's the difference?" );
differenceEngine();

console.info( "Changing the class of one of the elements" );
document.querySelector( "p" ).classList.add( "foo" );

console.info( "What's the difference?" );
console.warn( "Properties that inherit from color have also changed" );
differenceEngine();

console.info( "Resetting the class of the element" );
document.querySelector( "p" ).classList.remove( "foo" );

console.info( "What's the difference?" );
differenceEngine();

＆＃13;

p.foo {
  color: red;
}

＆＃13;

<div>
  <p>Foo</p>
  <p>Bar</p>
  <p>Baz</p>
</div>

＆＃13;

＆＃13;

＆＃13;

喜欢追逐，作为建议而不是最终的解决方案。

可能Chrome DevTools Extension

由于getComputedStyle()正是如此，因此上述结果可能会有所帮助。

将注意力转向实际的DevTools，我们可以检查它们（当弹出并聚焦时）并在检查器上运行脚本。
这是使用Chrome扩展程序扩展DevTools的一步。

在思考构建过程的同时，我偶然发现SnappySnippet;一个灵感来自a Stack Overflow question的Chrome扩展程序据说（我还没有使用它）可以轻松地从网页创建Snippets。

该扩展程序可能会提供有效回答您问题的功能，但如果它没有（并且为了好玩），我已经开始处理可能成为另一个Chrome扩展程序的内容。
请注意，这个过程可能很长，很慢，没有结果;如果在任何时候我创建了比下面的代码更有用的东西，我将返回更新这个答案。

我在此提出最新的kludge！ \ O /

document.querySelectorAll( ".styles-section" ).forEach( ( e ) => {
  var output;
  const selector = e.querySelector( ".selector" ).textContent,
        properties = e.querySelector( ".style-properties" )
                       .shadowRoot.querySelectorAll( ".tree-outline > li" );
  if ( properties ) {
    output = selector + " {\n";
    properties.forEach( ( p ) => {
      const property = p.querySelector( ".webkit-css-property" ).textContent,
            value = p.querySelector( ".value" ).textContent;
      if ( p.classList.contains( "inactive" ) ) {
        output += "\t/* " + property + ": " + value + "; */\n";
      } else {
        output += "\t" + property + ": " + value + ";\n";
      }
    } );
  }
  console.log( output + "}" );
} );

此代码在检查器（而非拼写错误）上的检查器上运行时，将为原始HTML检查器中当前所选元素的样式窗格内容提供一个漂亮的副本。

Mhmm - kludge。

不是吐出一堆文本，而是可以相对简单地调整以吐出数据对象，就像在我的第一个响应的代码中一样，可以与其他快照进行比较以获得差异。

并且，由于此代码是在检查器上运行的，而不是在被操作的文档上运行，因此它是朝着我们使用DevTools扩展实现的目标迈出的坚实一步。

我会继续摆弄这个，并在我走的时候更新这个答案，但不要屏住呼吸。

手动解决方案（代替巫术）

虽然甚至远程高科技，但有一种非常简单可靠的方法可以跟踪资源或element.style表格对<style>和CSS所做的更改：

正如您在上面的屏幕截图中看到的，我们可以为我们更改或添加的任何属性的任何值添加注释，显示以前的值，或者该值是全新的。
当然，如果我们想删除任何东西，我们只需取消选中属性左侧的复选框，就可以保留该值。