As a web developer, you often look at the source of HTML web pages to understand how that style was created? How that slideshow was added? How that hover effect was achieved?

The developer tools in Chrome easily let you inspect the source code and styles associated with any web element on a web page. The Snappy snippet extension for Chrome makes it even easier for you to inspect the styles.

When you select any element, Snappy Snippets extracts the HTML and CSS for the specified DOM note and send it straight to code editors like CodePen, jsFiddle or JS Bing.

Just right-click any element on a web page, choose Inspect Element, switch the Snappy Snippets tab near the console and choose Create a Snippet. It only copy the CSS styles and HTML required to create that web element and no extra information is saved in the snippet.