WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： はっち
カテゴリー： マークアップ >作業効率化

みなさんは、普段使っているブラウザの「拡張機能（アドオン）」を利用していますか？
私は普段、GoogleChromeを使用しているのですが、拡張機能を使うと作業がはかどることに気付きました。

そこで今回は、私自身がGoogleChromeで使用している拡張機能を、コーダー目線で8個紹介していきたいと思います。

Alt & Meta viewer

alt確認を行う際ソースコードを表示して確認を行うと思いますが、この拡張機能を利用すれば画面上に表示してくれるので簡単に確認することができます。

ColorPick Eyedropper

ブラウザ上で使用されている色コードを確認することができます。
拡張機能のアイコン付近にズームされた画面が表示されるので、細かな要素の色も取りやすいのがいいですね。

HTML Coding Checker（β版）

この拡張機能では、簡易的なリンクチェックや使用画像・metaタグ情報を一覧で確認できます。
また、定規ツールも利用できるので、marginやpadding・要素の高さや横幅を確認する際に便利ですので、コーディングを行う際に重宝します。

CSSViewer

この拡張機能では、対象の要素には現在どのようなCSSが効いている状態なのかを確認することが出来ます。「font-family」や「line-height」等プロパティ毎の確認が出来るので便利です。
もちろんデベロッパーツール等で確認できますが、こちらを利用するとブラウザ上に自動で表示されるのでおすすめです。

ウェブページ全体をスクリーンショット – FireShot

基本的にスクリーンショットが撮影可能な範囲は、画面内に表示されているものに限ります。
しかし、この拡張機能を利用すると開いているページ内を丸ごとスクリーンショットとして保存が可能になります。もちろん範囲指定も可能です。

PerfectPixel by WellDoneCode

こちらはデザインデータとコーディング結果との間に差異がないかの確認に利用しています。
デザインデータをJPG等の画像で書き出してしまえば、ブラウザ上で重ね合わせて確認ができるのでおすすめです。
透過だけでははなくモノクロでの確認や、画像を固定しブラウザの開発者ツールでのプレビューも可能になります。

Clear Cache

ブラウザのキャッシュを飛ばしてくれる優れものです。
コーディング時にブラウザで確認する際、キャッシュが残っていることが原因で思い通りに表示されないことがあります。
その際は、キャッシュを消す必要があるのでこの拡張機能を使用し、解決することが多いです。
ブラウザによる消去も可能ですが、いくつか手順を踏まなければいけないのでこちらを使用しています。

テキストエンコーディング

名前の通り、ブラウザ側の文字コード設定を変更する拡張機能です。
最近はあまり使う機会はないとは思いますが、あると便利な拡張機能です。

まとめ

いかがでしたでしょうか？
日頃の作業で「面倒だな」と感じた際に拡張機能を検索してみると、意外な発見があるかもしれません。

使えるものはどんどん使用し、作業をはかどらせていきましょう！