コーダー（フロントエンドエンジニア）の必須ツールとしてあげられるのが Google Chrome のデベロッパーツールですが、 Google Chrome にはコーディングに役立つアドオンが数多く存在します。
今回は新人コーダーの私が使っている Chrome のアドオンについてご紹介してみようかと思います。
なお、デベロッパーツールや Chrome の機能で簡単に解決できるようなアドオンは載せていませんのであしからず……
目次
Full Page Screen Capture
【このアドオンの機能】
ウェブページ全体を丸ごとキャプチャーできる。
【なぜこれを使っているか】
ディレクターやクライアントとのやり取りの際、ページ全体のキャプチャー画像が必要になることがあると思います。そのときに使います。
ちなみに、有名なキャプチャー機能アドオンとして下記のようなものがあります。
・『Awesome Screenshot』
・『FireShot』
そんな中なぜ今回のアドオンを紹介したかというと、上記アドオンを使って某大手ECサイトを全体キャプチャーしようとしたとき「ページ上部の固定バナーが何度も写り込んでしまう」といった事態が起こったためです。
いろいろなアドオンを試してみたのですが、思い通りのキャプチャーを取れたのは『Full Page Screen Capture』だけでした。
有名アドオンにある「キャプチャーへの書き込み」や「選択範囲のみキャプチャー」などの機能はないのですが、入れておいて損はないかと。
余計な権限付与もないですし、他のアドオンと併用しても良いかもしれません。
（アドオン追加はこちらから！）
Dimensions
【このアドオンの機能】
いちいちドラッグで範囲指定しなくても、要素の幅や高さ、要素感の幅を測ることができる。
【なぜこれを使っているか】
Chromeのデベロッパーツールを使っている方なら、そんなの margin や padding を見ればいい、と思うかもしれませんが、上部 section の margin と下部 section の padding が合わさっていたりするといちいち計算しなければいけません。
そういった場合、自動で計算してくれるこのアドオンです。
時間はコスト。有益に使いましょう。
（アドオン追加はこちらから！）
WhatFont
【このアドオンの機能】
クリックした文字の font-family、font-size、line-height などが調べられる。
【なぜこれを使っているか】
クライアントから指定された参考サイトなどがあった際など、見ているWebページの文字情報を知りたい時があります。
そんな時、わざわざデベロッパーツールでCSSを確認しなくでも一瞬で確認できるのがこのアドオンです。
時短しましょう。
（アドオン追加はこちらから！）
PerfectPixel by WellDoneCode
【このアドオンの機能】
ブラウザーに透過した画像を重ねて、デザイン画像とコーディングのズレをチェックできる。
【なぜこれを使っているか】
コーダーに求められるものとしてよく聞くのがPSD通りの正確なコーディングですが、このアドオンを使いつつデベロッパーツールで修正を行えば、表面に関してはかなり正確なものを作れるかと。
ただし、PSDを直接重ねることはできないのでご注意を。キャプチャー等でJPEGやPNGにしてからご利用ください。
（アドオン追加はこちらから！）
Web Developer
【このアドオンの機能】
画像・CSS・JavaScript をオフにしてどう表示されるかのチェックなど、サイトの検証ができる。
【なぜこれを使っているか】
言わずと知れた定番ツール……らしいです。
英語版のユーザーはなんと100万を超えているのだとか。
ブロックレベルで要素にアウトラインを引いてくれたり、レスポンシブデザインの確認用に異なる画面サイズでの表示を1ページで見ることができたりと、細かいところで便利です。
※2017年08月初め、作者のChromeアカウントが乗っ取られ、一時的に「ブラウザに不正な広告を表示する」コードが仕込まれたようです。直ちに修正版（バージョン0.5）がアップされたそうですが、何らかの理由で自動更新されていない方は直ちに更新してください。
（アドオン追加はこちらから！）
おすすめ設定
さらに、上記アドオンに対してショートカットキーを割り当ててあげると、キーボード操作がメインの方には便利かと思われます。
Chrome の「拡張機能」の設定画面一番下に「キーボードショートカット」のという項目があり、アドオンに任意のキーを割り当てる事ができます。
ご興味がある方はぜひ。
おわりに
いかがでしたでしょう。
ブラウザのアドオンはとても便利ですが、導入する際は注意も必要です。
その点に関しては、ぜひこちらの記事を↓
『権限に注意⁉ブラウザのアドオンを使うときに気を付けること』
他にも使っているアドオンは多くあるのですが、ひと記事にまとめると長くなってしまうので、
別記事としてまとめてあります。
→『Google検索・タブ管理で使えるChromeアドオン集！』
→『コーダー・ディレクター必見！デバックに使えるChromeアドオン集』
社内の先輩もChromeのアドオンに関する記事を書いておりましたので、合わせてご紹介。
→『【新人Webディレクター必見】Web制作に役立つChrome拡張機能10選』
次回はもっとコーダーっぽい記事を書きたいですね。ではでは。
