Web制作で役立つChromeの拡張機能

Google Chrome（以下、Chrome）の拡張機能は、制作したWebサイトの検証に役立ちます。

Web制作であると便利な拡張機能を紹介します。

Chatworkを使う方は入れておきましょう。[info]、[title]、[code]、[hr]や一部の絵文字がワンクリックで入力できます。

Chatwork Input Tools - Chrome ウェブストア⁠（新しいタブで開く）

ページ全体のスクリーンショットを撮ることができる拡張機能です。

GoFullPage - Full Page Screen Capture - Chrome ウェブストア⁠（新しいタブで開く）

HTMLの構文が正しいかどうかをチェックする拡張機能です。

HTMLエラーチェッカー - Chrome ウェブストア⁠（新しいタブで開く）

拡張機能の設定より[サイトへのアクセス]を「クリックされた場合のみ」にしておかないと一部のサイトの処理が正しく動かない場合があるので、インストールした際に設定しておきましょう。

[サイトへのアクセス]を「クリックされた場合のみ」にする

ブラウザでJSONファイルを開いたときにコードがハイライトされたり、折りたためるようになったりしてとても見やすくなります。

JSONVue - Chrome ウェブストア⁠（新しいタブで開く）

クリップボードにコピーした複数リンクをまとめて開く拡張機能です。

Pasty - Chrome ウェブストア⁠（新しいタブで開く）

Pastyについては以下の記事で詳しく解説しています。

リンクをまとめて開きたいときに便利なChrome拡張機能「Pasty」

名前のとおり、開いているページのQRコードを生成する拡張機能です。

Chromeのアップデートでアドレスバーの側に表示されていたQRコードのボタンがなくなったため、ワンクリックでQRコードを表示できるこの拡張機能を重宝しています。

QR Code Generator - Chrome ウェブストア⁠（新しいタブで開く）

比率計算をする拡張機能です。width、heightに限らず、比率を簡単にしたいときにも活用できます。

CSSでaspect-ratioの値をわかりやすくしたいときに使用しています。

開いているページのページタイトル、説明文、キーワード、canonical、OGPなどのmeta情報を簡単に確認できます。

サイト構築時のmeta情報確認に使用しています。

TDK Meta Checker - Chrome ウェブストア⁠（新しいタブで開く）

見ているWebサイトがどのようなフレームワークを使用しているか、どのようなツールが使われているかなどが一目でわかるツールです。

Wappalyzer - Technology profiler - Chrome ウェブストア⁠（新しいタブで開く）

ウインドウのサイズを簡単に変更する拡張機能です。

27インチモニターのような大きい画面でWeb制作をしている方は、狭い画面幅での検証を忘れずに行うために入れておくと良いです。

Window Resizer - Chrome ウェブストア⁠（新しいタブで開く）