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

投稿日:

更新日:

はじめに

制作したWebサイトの検証に役立つGoogle Chrome(以下、Chrome)の拡張機能。

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

基本編

Chatwork Input Tools

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

GoFullPage - Full Page Screen Capture

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

HTMLエラーチェッカー

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

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

Google Chromeの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制作をしている方は、狭い画面幅での検証を忘れずに行うために入れておくと良いです。

この記事をシェアする