Webデザインはコンポーネント指向になってきています。Web componentsという仕様も作られており、さらにこの流れは加速するでしょう。Webサイトの一部を埋め込んだり、再利用性高い部品を使うのが当たり前になっています。 そんなWebサイトの一部をピックアップするのに最適なGoogle Chrome機能拡張がWeb Design Pirateになります。

Web Design Pirateの使い方

起動したところです。インスペクタから要素を選択します。

要素を選択するとこのようにプレビューが表示されます。

上にあるレンジを動かすとDOMの深さを変更できます。

プレビューで内容を確認できます。

Web Design PirateではDOM中の一部要素を指定して埋め込みできるタグを簡単に知ることができます。もちろんCORS制限に引っかかる場合もあるので注意してください。今後この手のツールが広く使われるようになるのではないでしょうか。

Web Design PirateはGoogle Chrome向けのソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

Web Design Pirate - Chrome ウェブストア Dalimil/Web-Design-Pirate: Chrome DevTools Extension - Fast and easy way to copy full HTML widgets, components, and parts of web design.