SnappySnippet is an amazingly handy little Chrome Extension by Konrad Dzwinel. It allows you to select an HTML element from the Chrome DevTools, then move that element over to CodePen in which to work with it.

Here's a step-by-step tutorial, after you have it installed.

1) Select the HTML element in DevTools

select-html-element

2) Click over to the SnappySnippet tab, and click the "Create a snippet..." button

click-snappy-snippet

3) Click the "Send to CodePen" Button

send-to-codepen

4) Rock'n'Roll

A new Pen is created with the HTML and CSS moved over for you to start playing with.

been-moved

Note that SnappySnippet adds ID attributes to every single HTML element, then styles the elements based on those ID's and the computed CSS values from DevTools. The class names the CSS uses are not the original class names used to style from the actual web page.

For those curious about under the hood, it uses our API for prefilling Pens, which anyone can use.