Web制作で役立つChromeの拡張機能
投稿日:
更新日:
はじめに
制作したWebサイトの検証に役立つGoogle Chrome(以下、Chrome)の拡張機能。
Web制作であると便利な拡張機能を紹介します。
基本編
Chatwork Input Tools
Chatworkを使う方は入れておきましょう。[info]
、[title]
、[code]
、[hr]
や一部の絵文字がワンクリックで入力できます。
GoFullPage - Full Page Screen Capture
ページ全体のスクリーンショットを撮ることができる拡張機能です。
HTMLエラーチェッカー
HTMLの構文が正しいかどうかをチェックする拡張機能です。
拡張機能の設定より[サイトのアクセス]を「クリックされた場合のみ」にしておかないと一部のサイトの処理が正しく動かない場合があるので、インストールした際に設定しておきましょう。
JSONVue
ブラウザでJSONファイルを開いた時にコードがハイライトがされたり、折りたためるようになったりしてとても見やすくなります。
Pasty
クリップボードにコピーした複数リンクをまとめて開く拡張機能です。
Pastyについては以下の記事で詳しく解説しています。
QR Code Generator
名前の通り開いているページのQRコードを生成する拡張機能です。
Chromeのアップデートでアドレスバーの側に表示されていたQRコードのボタンがなくなったため、ワンクリックでQRコードを表示できるこの拡張機能を重宝しています。
Ratio Calculator
比率計算をする拡張機能です。width、heightに限らず、比率を簡単にしたい時にも活用できます。
CSSでaspect-ratio
の値をわかりやすくしたいときに使用しています。
TDK Meta Checker
開いているページのページタイトル、説明文、キーワード、canonical、OGPなどのmeta情報を簡単に確認できます。
サイト構築時のmeta情報確認に使用しています。
Wappalyzer - Technology profiler
見ているWebサイトがどのようなフレームワークを使用しているか、どのようなツールが使われているかなどが一目でわかるツールです。
Window Resizer
ウインドウのサイズを簡単に変更する拡張機能です。
27インチモニターのような大きい画面でWeb制作をしている方は、狭い画面幅での検証を忘れずに行うために入れておくと良いです。