title: How to tell what is directly manipulating styles in the DOM
body: <p>I recently ran into a bug where I was not able to control the style of an HTML element (without using <code>!important</code>) due to the fact that something in my codebase was directly adding inline styles to my DOM element. </p>
  
  <p>After quite a bit of digging, I discovered it was due to a third party module I was using that had: <code>document.body.style.overflow = 'visible';</code> </p>
  
  <p>It was frustrating that it took me as long as it did to find the source of this issue and it got me wondering. Is there any efficient way to determine the source of direct DOM manipulation like this? There wasn't something obvious in the Chrome Dev Tools.</p>