javascript - 在 chrome 开发工具中更改样式时有什么方法可以触发事件吗？

Question

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

我在想你可以做的一件事就是存储页面的 HTML，然后当你进行更改时，将当前的 HTML 与存储的内容进行比较。这将允许您跟踪对 element.style 所做的样式更改，因为它们会作为内联样式应用到元素上，如下所示，我添加了 color:red;:

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

Answer 1

window.getComputedStyle( element )

The window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

下面的演示省略了对 pseudo-elements 的跟踪，但是该功能可以通过使用 window.getComputedStyle(element[, pseudoElt]); 来硬塞进去。其中:

element
The Element for which to get the computed style.

pseudoElt Optional
A string specifying the pseudo-element to match. Must be omitted (or null) for regular elements.

用法

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

示例

此代码将受益于一些优化，并且改变口味即输出格式可能是不可取的。

该代码段将按预期运行(在 Chrome 中测试)，但由于大量数据被记录到 console ，我禁用了代码片段的控制台(为了提高效率)，因此您需要在浏览器中查看输出。

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

p.foo {
  color: red;
}

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

出于对追逐的热爱而制作，作为建议，而不是最终解决方案。

可能 Chrome DevTools Extension

自 getComputedStyle()正是这样做，上面的结果可能有点没有帮助。

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

在思考构建过程时，我偶然发现了 SnappySnippet ;受 a Stack Overflow question 启发的 Chrome 扩展据说(我没有使用过它)使得从网页创建片段变得容易。

该扩展程序可能提供的功能可以有效地回答您的问题，但如果它不能(并且为了好玩)，我已经开始研究可能成为另一个 Chrome 扩展程序的功能。
请注意，这个过程可能是漫长、缓慢且没有结果的；如果我在任何时候创建了比下面的代码更有用的东西，我将返回更新此答案。

我在此介绍我最新的拼凑!\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 的检查器中当前选定的元素输出样式 Pane 内容的漂亮副本。

嗯——拼凑。

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

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

我将继续摆弄这个，并随时更新这个答案，但不要屏住呼吸。

手动解决方案(代替魔法)

虽然不是高科技，但有一种非常简单可靠的方法来跟踪对 element.style 所做的更改和来自资源的 CSS 或 <style>床单:

正如您在上面的屏幕截图中看到的，我们可以向我们更改或添加的任何属性的任何值添加注释，显示该值曾经是什么，或者该值是全新的。
当然，如果我们想要删除任何内容，我们只需取消选中属性左侧的复选框即可，这样该值就会被保留。