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

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

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

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

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.CSS Peeper

CSS_Peeper.png
Chromeウェブストア

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

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

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

4.Web Maker

Web_Maker.png
Chromeウェブストア

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

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

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

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

5.Sizzy

Sizzy.png
Chromeウェブストア

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

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

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

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

参考：
Sizzy