【Google Chrome】Web制作に役立つ拡張機能「CanvasFlip」を使ってみた

02 Oct

今回はいつもの記事とは少し趣向を変えて、Google Chromeの拡張機能について紹介したいと思います。

「CanvasFlip」というWeb制作お役立ち系の拡張機能です。基本的にデフォルトのデベロッパーツールで事足りていると思ったのですが、ちょっと気になっていたのでインストールして使ってみました！

使い方自体は至って簡単です！ツールバーに追加されたアイコンをクリックすると、もうツールのUIが立ち上がります。

使われているフォントや色の数、画像の枚数等の基本情報が表示されたパネルが表示されます。また、この時点でChrome自体も要素をクリックで解析できるモードに切り替わってます。

例えば、ツールが起動された状態で要素をクリックすると、以下のようにパネルが切り替わります。

その要素の位置やサイズ、更にツール上を下にスクロールしていくと直感的なUIでCSSの調整を行うことができます。

選択した要素がデバイスフォントのテキストだった場合、その場で内容を打ち替えてみることも可能ですね！

そして、これ結構面白い機能だなーと思ったのがありまして。上記キャプチャ上の緑枠で囲まれたボタンですが、このボタンを押すと選択された要素のキャプチャをダウンロードできるのです！

他にもサイト内で使われているカラーを検出し変えて試してみる事ができたり、使われている画像を検出しダウンロードできたりと、プチ便利な機能が盛り沢山！

デフォルトのデベロッパーツールの補助的な役割として、是非試してみてはいかがでしょうか？