GoogleのChromeストアでは、便利な機能を持つ拡張機能が数多く提供されています。

業務内容にあわせて自分に最適なツールをインストールすれば作業効率アップが期待できますが、拡張機能の数が多すぎてどれをインストールしたらよいのか迷ってしまうことはないでしょうか。

今回は、エンジニアやデザイナーをはじめとしたWeb開発業務の方におすすめのChrome拡張機能7選を紹介します。便利なものは取り入れて、作業を効率化して行きましょう。

エンジニアやデザイナーにおすすめなChrome拡張機能7選

1.DevTools Theme: Zero Dark Matrix

DevTools_Theme-_Zero_Dark_Matrix.png
Chromeウェブストア

「DevTools Theme: Zero Dark Matrix」は、Google Chromeデベロッパーツールの視認性を高めてくれる拡張機能です。

Google Chromeのデベロッパーツールは、デフォルトだと白背景になっています。ハイライトされていてもコードが見づらいですが、こちらの拡張機能をインストールすれば黒背景になるため、視認性が高まりコードを確認しやすくなります。

利用の際は設定が必要です。以下の手順を参考にしてください。

1.画面上部のアドレスバーに「chrome://flags」を入力する。
2.「デベロッパーツールのテストを有効にする」の項目を有効にする。
3.Chromeを再起動し、デベロッパーツールの設定画面で「Experiments」をクリックする。
4.「Allow custom UI themes」にチェックを入れる。
5.再度デベロッパーツールを表示する。

2.Wappalyzer

Wappalyzer.png
Chromeウェブストア

「Wappalyzer」は、ブラウザ上で現在表示しているホームページCMSや解析ツール、広告配信システム、OS、サーバなどを表示してくれるChrome拡張機能です。

拡張機能をインストールした後にホームページを表示し、ブラウザのアドレスバー横に表示された拡張機能アイコンをクリックすると、ホームページCMSをはじめ、様々な情報が表示されます。

数多くのアプリケーションを検出できるので、Web開発で参考にしたいホームページに、どのような技術が使われているのかを確認する際に便利です。

3.Page Ruler

Page_Ruler.png
Chromeウェブストア

「Page Ruler」は、ブラウザ上で表示されている画像やブラウザの幅などを定規で測るように簡単に計測できるChrome拡張機能です。

拡張機能をインストールするとアドレスバー横にアイコンが表示されますので、クリックします。カーソルが十字キーに変化しますので、計測したい場所をドラッグします。
すると計測部分が薄い青色で表示され、幅や高さ、左側の位置、上部の位置、右側の位置、下部の位置がピクセル単位で表示されます。

この拡張機能では、さらにページの要素を計測することも可能です。要素の種類や上位の要素、同じ階層の要素などを確認できますので、Web開発を行う上で一度使用すると手放せなくなります。

4.CSS Peeper

CSS_Peeper.png
Chromeウェブストア

CSS Peeper」は、現在表示しているホームページCSS情報を解析ができるChrome拡張機能です。

使用方法も簡単で、拡張機能をインストールした状態で解析したいホームページを表示し、アドレスバー横の拡張機能アイコンをクリックするだけです。

これで様々な情報が一覧で表示され、カラーパレットが自動生成されます。
指定した箇所のCSS詳細情報を調べることもできます。このChrome拡張機能導入で、デザイナーの作業効率アップが期待できるでしょう。。

5.Web Maker

Web_Maker.png
Chromeウェブストア

「Web Maker」は、Google Chromeのタブを開発ツールとして使用できるようになるChrome拡張機能です。

HTMLCSS、JavaScriptなどで記述したコードがプレビュー上でリアルタイム更新されるため、別のブラウザで更新してチェックする手間がかかりません。作成したソースは、HTML形式でダウンロード可能です。

さらにオフライン上でも動作しますので、いつでもどこでもテストができます。

使用の際は、拡張機能をインストールするとアドレスバー横に表示される拡張機能アイコンをクリックしてください。これだけで新規タブが開くと同時に拡張機能が起動し、すぐにコードを書けるようになります。

6.xvg

xvg.png
Chromeウェブストア

「xvg」は、ホームページ上やローカルファイルなどで使用されているSVGのパスやアンカーポイントが、視覚的にわかるようになるChrome拡張機能です。

拡張機能をインストールした後に表示されるアイコンをクリックするだけで、SVGのパスがアウトライン化します。変化したアウトラインにカーソルを合わせると拡大表示され、より確認しやすくなります。

ワンクリックでSVGのデバックを行うことができますので、こちらもデザイナーにおすすめです。

7.Sizzy

Sizzy.png
Chromeウェブストア

「Sizzy」は、制作したホームページがiPhoneやiPadなどの各種デバイス上でどのように表示されるのかをまとめて確認できるChrome拡張機能です。

実際にどのように動作するのかの確認も可能で、その場合は以下のSizzyのホームページを開き「Enter an URL」と表示されているボックス内にURLを入力するだけです。

ホームページ制作後にどのように表示されるのか、どのように動作するのかを各デバイス上でそれぞれ確認するのは手間も時間もかかります。

こちらの拡張機能を使用すれば、作業時間の短縮が期待できるでしょう。

参考:
Sizzy

まとめ:Chrome拡張機能の導入で無駄な作業時間を減らそう

今回はWeb開発者におすすめのChrome拡張機能を紹介しました。

時間がかかっている作業や面倒に感じている作業が、Chrome拡張機能導入により効率化できる場合があります。

導入〜使用は非常に簡単ですので、必要な機能があればぜひ使用してみましょう。