便利なのが登場！ これ一つでWeb制作に役立つ機能がたくさん使用できるChromeの拡張機能 -SuperDev

Web制作に役立つ機能、ルーラー・ガイドを表示したり、ボックスモデルを視覚化したり、カラーピッカーやカラーパレットを取得、気になった要素のHTMLとCSSをCodePenに表示させたりなど、たくさん用意されているChromeの便利な機能拡張を紹介します。

SuperDevはオープンソースで開発されており、SuperDev -GitHubでコードも公開されています。2022年現在、ChromeとEdgeとBraveの機能拡張として利用できます。

SuperDevをChromeで利用する場合は他の機能拡張と同様に、Chrome ウェブストアからインストールできます。

SuperDev -Chrome ウェブストア

上部の「Chromeに追加」をクリックするだけで、インストールできます。

というわけで、インストールしてさっそく使用してみました。

SuperDevを起動したところ

SuperDevには、Web制作に役立つ機能がたくさん用意されています。

SuperDevのパネル

• Text Editor: Webページのテキストを編集
• Page Ruler: 2点間の距離をピクセル単位で測定
• Color Picker: Webページ上のあらゆる箇所（画像も）からカラーを抽出
• Color Palette: 1クリックでWebページのカラーパレットを取得
• Page Guideline: ガイドラインでリアルタイムに位置合わせを確認
• Page Highlight: CSSのボックスモデルをハイライトで視覚化
• Move Element: Webページ上の任意の要素を移動
• Delete Element: Webページ上の任意の要素を削除
• Export Element: 任意の要素のHTML+CSSをエクスポート
• Take Screenshot: Webページのスクリーンショットを撮影
• Go Incognito: アクティブなタブをシークレットモードで開く
• Clear All Cache: キャッシュをクリア

たとえば、「Page Highlight」をクリックすると、下記のようにCSSのボックスモデルをハイライトで視覚化します。

「Page Highlight」をクリック

「Page Guideline」をクリックすると、カーソルに合わせてリアルタイムにガイドラインを表示します。

「Page Guideline」をクリック

ピクセルを測定したいときは、「Page Ruler」をクリック。

「Page Ruler」をクリック

Webページのカラーパレットも1クリックで簡単に生成できます。

「Color Palette」をクリック

その要素がどのように実装されているのかCodePenにHTMLとCSSを持っていくこともできます。

「Export Element」をクリック

任意の要素を移動（Move）したり、削除（Delete）することもできます。

「Move Element」をクリック