ウェブ開発用の Chrome 拡張機能

2010 年 5 月 27 日（木）

Chrome デベロッパー ツールは、Chrome で HTML、JavaScript、CSS のデバッグを行う際に非常に便利なツールです。ウェブページを作成している場合、また Chrome ウェブストアに公開するウェブ アプリケーションを開発している場合でも、DOM 内の要素をチェックする、JavaScript を実行しながらデバッグする、表示中のページで直接 CSS のスタイルを編集するなどの作業を行うことができます。さらに拡張機能を導入すれば、ブラウザで簡単にアクセスできるさまざまな追加機能を利用して、Google Chrome をウェブ開発環境としてよりいっそう有効に活用できます。そこでそのような環境を求めるデベロッパーの皆様のために、ウェブ開発用の拡張機能を集めて紹介するページを作成しました。ウェブ向けのアプリケーションやサイトの作成に、これらがお役に立てば幸いです。

Chrome 拡張機能の Speed Tracer

たとえば、Speed Tracer は、ウェブ アプリケーションのパフォーマンス上の問題を特定して修正するのに便利な拡張機能です。Speed Tracer を使用すると、アプリケーション内で処理に時間がかかっている部分をより把握しやすくなり、JavaScript の解析と実行、CSS スタイルなどの問題のトラブルシューティングを行うことができます。

Chrome 拡張機能「Resolution Test」

その他の便利な拡張機能としては、Resolution Test があります。これはブラウザのウィンドウ サイズを変更して、ウェブ デベロッパーがさまざまな画面解像度でウェブサイトをプレビューできる拡張機能です。広く使用されている解像度の一覧や、独自の解像度を入力できるカスタム オプションも用意されています。

Chrome 拡張機能「Web Developer」

また Web Developer という拡張機能では、検証オプション、ページサイズ変更機能、CSS 要素ビューアーなどのデベロッパー ツールに、ツールバー上の 1 つのボタンからアクセスできます。

Chrome 拡張機能「Chrome Editor」

もう一つの便利な拡張機能は、Chrome Editor です。この機能を使用することで、ブラウザ内で簡単にコーディングできるため、ブラウザとコードエディタを切り替える必要がなくなります。コード参照を後日使用できるようご利用のローカル パソコンに保存することもできます。

上記で紹介したものはごく一部であり、その他にも多くの拡張機能をウェブ開発用 Chrome 拡張機能ページでご紹介しています。また、拡張機能ギャラリーでも探すことができます。

Written by Koh Kim, Google Chrome Team