title: How to easily inspect styled-components using dev tools?
body: <p>I am using styled-components in a React project. When the components are rendered in the browser they are assigned a randomly generated classname, for example:</p>
  
  <p><code>&lt;div class="sc-KSdffgy oPwefl"&gt;</code></p>
  
  <p>This class name does not help me identify from which component the <code>&lt;div&gt;</code> came from, so is there a way to do this easily?</p>
  
  <p>P.s. currently I am adding attrs to my styled components so that I can recognise them in dev tools, for example:</p>
  
  <pre><code>const Foo = styled.div.attrs({
     'data-id': 'foo'
  })`
      ...
  `;
  </code></pre>