ウェブマスター向け公式ブログ
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
Chrome 拡張機能でウェブ制作をより快適に
2010年7月28日水曜日
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
ラベル
+1 ボタン
2
AMP
11
API
3
App Indexing
8
CAPTCHA
1
Chrome
2
First Click Free
1
Google アシスタント
1
Google ニュース
1
Google プレイス
2
Javascript
1
Lighthouse
4
Merchant Center
8
NoHacked
4
PageSpeed Insights
1
reCAPTCHA v3
1
Search Console
101
speed
1
イベント
25
ウェブマスターガイドライン
57
ウェブマスタークイズ
2
ウェブマスターツール
83
ウェブマスターフォーラム
10
オートコンプリート
1
お知らせ
69
クロールとインデックス
75
サイトクリニック
4
サイトマップ
15
しごと検索
1
スマートフォン
11
セーフブラウジング
5
セキュリティ
18
ダイナミック レンダリング
1
データー ハイライター
2
ハッキング
19
ハングアウト
2
ビデオチュートリアル
7
フィードバックとコミュニケーション
1
プロダクトエキスパート
1
マルウェア
9
モバイル
2
モバイルサイト
54
リッチカード
2
リッチスニペット
12
リッチリザルト
4
画像
3
画像検索
2
検索エンジン最適化
13
検索結果
85
構造化データ
25
国際化
4
再審査リクエスト
9
初級者向け
160
上級者向け
203
中級者向け
206
動画
1
アーカイブ
2020
11月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2019
11月
10月
9月
8月
6月
5月
4月
3月
2月
1月
2018
12月
11月
10月
7月
6月
5月
4月
3月
2月
1月
2017
12月
11月
10月
9月
8月
7月
6月
4月
3月
2月
1月
2016
12月
11月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2015
12月
11月
10月
9月
8月
7月
5月
4月
3月
2月
1月
2014
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2013
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2012
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2011
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2010
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2009
12月
11月
10月
8月
7月
6月
4月
3月
2月
1月
2008
12月
Feed
Follow @googlewmc