Chrome 拡張機能でウェブ制作をより快適に | Google ウェブマスター向け公式ブログ

Google が開発するブラウザ、Google Chrome は、ウェブサイトの閲覧だけではなく、ウェブの制作/開発用のツールとしてもご活用いただける便利なソフトウェアです。本日はウェブ開発に Chrome をどのようご活用いただけるかをご紹介します。
※リンク先コンテンツは一部英語であることをご了承ください。

Chrome デベロッパー ツール は、Chrome 上で HTML、JavaScript、CSS のデバッグ作業を行う際に役立つ便利なツールです。ウェブサイトの制作だけでなく、（例えば Chrome ウェブ ストア で公開予定の）ウェブ アプリケーションの開発にも非常に便利なツールで、DOM 内の要素を調査する、JavaScript を実行しながらデバッグする、表示中のページで直接 CSS のスタイルを編集するといった作業を簡単に行うことができます。さらに様々な Chrome 拡張機能 追加することで、Google Chrome をウェブ開発環境として、より便利に活用できます 。そこでそのような環境を求めるウェブ開発者の皆様のために、ウェブ開発用の拡張機能を紹介するページ をご用意しました。ご紹介する各種拡張機能をウェブ アプリケーションの開発やウェブサイトの制作に大いに役立てていただければと思います。



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



次にご紹介したい便利な拡張機能は、Resolution Test です。これはウェブ開発者がさまざまな画面解像度でウェブサイトを確認するために、ブラウザのウィンドウ サイズを変更してプレビュー出来る拡張機能です。広く一般的に使用されている解像度に加えて、独自の解像度を入力できるカスタム オプションも用意されています。



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



もう 1 つご紹介したいのは、Chrome Editor という拡張機能です。この拡張機能では、Chrome だけで簡単にコードを記述・プレビューできるため、作業中にブラウザとコード エディタをこまめに切り替える必要がありません。もちろん記述したコードをお使いの PC に保存することもできます。

今回ご紹介する拡張機能は以上となりますが、ご紹介したものはごく一部であり、その他にも多くの便利な ウェブ開発者向け Chrome 拡張機能 がありますので是非ご覧いただければと思います。また、Chrome は Web 開発用以外にも様々な拡張機能があります。こちらのページ にまとめてありますので、是非ご覧いただき、お気に入りの拡張機能を見つけていただければと思います。

Written by Koh Kim, Google Chrome Team
Original version: Chrome Extensions for web development