How to easily inspect styled-components using dev tools? : <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>
