コーダーにオススメするChromeアドオン集!

ブログ

2017.06.01 コーディング

コーダーにオススメするChromeアドオン集!

コーダー(フロントエンドエンジニア)の必須ツールとしてあげられるのが 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 をオフにしてどう表示されるかのチェックなど、サイトの検証ができる。

 

【なぜこれを使っているか】

言わずと知れた定番ツール……らしいです。

ブロックレベルで要素にアウトラインを引いてくれたり、レスポンシブデザインの確認用に異なる画面サイズでの表示を1ページで見ることができたりと、細かいところで便利です。

 

 

おすすめ設定

さらに、上記アドオンに対してショートカットキーを割り当ててあげると、キーボード操作がメインの方には便利かと思われます。

Chrome の「拡張機能」の設定画面一番下に「キーボードショートカット」のという項目があり、アドオンに任意のキーを割り当てる事ができます。

ご興味がある方はぜひ。

 

おわりに

いかがでしたでしょう。

他にも使っているアドオンは多くあるのですが、今回はコーダーにおすすめできるアドオンに絞って紹介いたしました。

次回はもっとコーダーっぽい記事を書きたいですね。

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら
c