在 chrome 开发工具中更改样式时，有啥方法可以触发事件？

Posted 2023-03-06

【中文标题】在 chrome 开发工具中更改样式时，有啥方法可以触发事件？

【英文标题】：Any way to fire an event off when a style is changed in chrome dev tools?在 chrome 开发工具中更改样式时，有什么方法可以触发事件？

【发布时间】：2017-12-19 05:39:49

【问题描述】：

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

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

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

【问题讨论】：

您可以看到在开发工具中应用的更改。转到源选项卡并在顶部找到 css 文件。右键单击它，选择“本地修改...”。

当设置为弹出式（ctrl+shift+i）时，可以像网页一样检查开发工具。在那里，您可以对网页执行与网页相同的操作，例如在其中挖掘数据。例如，运行document.querySelector(".styles-pane").querySelectorAll(".styles-section").forEach((e)=>console.log(e.querySelector(".style-properties").shadowRoot.textContent);); 将在样式窗格中输出每个部分的textContent。抱歉，太累了，无法找到正确的答案。

@Gerard 是的，我只是想知道我是否可以以编程方式获取所有已更改的样式。我知道我可以查看它们。我希望能够以编程方式将它们存储在数组或其他东西中。

P.S.我上面评论中的匆忙代码并没有说明任何有用的信息。我当时没有正确检查结果，实际上大部分输出都是样式的样式，所以derp。不过，我肯定朝着正确的方向前进 ;-)

【参考方案1】：

window.getComputedStyle( element )

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

下面的演示省略了对 pseudo-elements 的跟踪，但使用 window.getComputedStyle(element[, pseudoElt]); 时可能会硬塞住该功能，其中：

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

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

用法

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

示例

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

sn-p 将按预期运行（在 Chrome 中测试），但由于大量数据记录到 console，我禁用了 sn-p 的 控制台（为了提高效率）所以您需要在浏览器中查看输出。

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 的检查器中当前选定的元素输出样式窗格内容的漂亮副本。

嗯-混搭。

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

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

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

手动解决方案（代替魔法）

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

正如您在上面的屏幕截图中所见，我们可以将 cmets 添加到我们更改或添加的任何属性的任何值中，显示以前的值是什么，或者该值是全新的。 当然，如果我们想删除任何东西，我们可以取消选中属性左侧的复选框，这样该值就会被保留。

【讨论】：

谢谢。这太酷了。我想知道是否有办法让它不显示没有直接影响的样式。我明白它为什么这样做，我只是想知道是否有办法让你编辑color:red;，它只会输出color:red; 而不是border:"0px none rgb(255, 0, 0)";border-bottom:"0px none rgb(255, 0, 0)";border-color:"rgb(255, 0, 0)"; 等。谢谢你的回答！

@JoshuaTerrill - 我刚起床并登录，所以虽然我已经阅读并理解了您的信息，但我的大脑只会回复“我现在可以喝茶了吗？”我会在一段时间内看看我能弄清楚什么。 例如 如果您更改 CSS 类的 color 的值并且该类依赖于 color 以应用相同颜色的 border；如果不在检查器上运行脚本（根据我在您的问题下的评论），仅获得 color 已更改可能是一场噩梦。如果您在检查器中创建一个新类，则会有一大堆其他问题介入。先喝茶，然后遛狗。待会见！

完全可以理解。期待您的回复！

@JoshuaTerrill - 我已经开始了这个过程，但可能需要一些时间（我之前只发布了一个 Chrome 扩展程序，而且很简单）。我更新了答案以展示我的工作，提供了一些有用的代码，并提供了一个链接，指向可能是现成的解决方案。

添加了实际上还不错的手动解决方案，但我已经构建了一个 devtools 扩展，它具有真正可怕的 UX，我可能无法做得很好。当我放弃或成功时，我将继续努力并发布我拥有的任何东西。