Firebugに相当するGoogle Chromeとは何ですか？

29

私はできるツールを探しています：

HTML要素を検査する
JavaScriptの管理/デバッグ
プロファイルのパフォーマンス
リアルタイムで要素を変更する

— エヴァン・プライス
ソース

32

組み込まれています。ページ[論文]->開発者->開発者ツール（Chrome v5以前）。v6では、ページボタンがそのバージョンで消えているように見えるため、異なる可能性があります。

— マーク・ハットン
ソース

3

Googleのツールにはいくつかの欠点があります。ajaxリクエストの表示はそれほど簡単ではありません。便利なマルチラインモードはありません。ウィンドウでHTMLを編集することはできません。実際のDOM（HTMLツリーだけ）をナビゲートすることはできません。最後になりましたが、CSS編集機能は不格好です-Googleにはオートコンプリートがありません。それでも非常に使いやすいですが、Firebugの方が優れています。

— cgp

2

または、怠zyな場合はshift-ctrl-I :)

— ティムポスト

1

@Mark注、5.0.375.99を使用しています。しかし、それが現在または将来に違いをもたらすかどうかはわかりません。

— エヴァンプライス

1

v6では、レンチ->ツール->開発者ツール

— -enobrev

17

右クリック->要素の検査

— HoLyVieR
ソース

13

Google Chrome用Firebug Lite。

— エメット
ソース

FireBug Liteは優れたツールであり、IE、Opera、Safari、Firefoxでも動作します。getfirebug.com

— Nat Ryall

5

元の質問が尋ねられてから4年が経ちました。Chrome（安定版）は現在バージョン38です。長い間、Firebug for Firefoxとほぼ同等の開発者ツールのフルセットが含まれていました（ただし、Firefoxにはインスペクターも組み込まれています）。

Chromeのデベロッパーツールでできること：

DOMを検査する
CSSを調べる
JavaScriptコンソールにアクセスする
JavaScriptをデバッグする
ネットワーク要求、タイミング、および応答を表示する
ビューのレンダリング、JavaScript、およびCSSのパフォーマンス
ローカルストレージとCookieを検査する

開発ツールにはさまざまな方法でアクセスできます。

Chromeメニュー -> ツール -> 開発者ツール
Ctrl+ Shift+ IのWindowsまたはCmd+ Shift+ IMac上
F12 Windowsで
ページ上の任意の場所を右クリックして、「要素を検査」を選択します

3

ブラウザー内ツールはその仕事に優れており、通常は最初の選択肢として最適です。ただし、HTTPリクエスト/レスポンスペイロードに関する十分な技術的詳細を提供しない場合や、ページ固有である場合もあります。

このような場合、Fiddlerなどの専用のHTTPインスペクションツールまたはLinuxの代替ツールを使用すると、より多くの洞察が得られることがあります。

本当にベアメタルを取得する必要がある場合、WiresharkはHTTPを超えて完全なネットワークトラフィック分析を行いますが、最初は圧倒される準備をしてください。

— ジェイソンバーチ
ソース

私はフィドラーに精通しているとは言えませんが、Wiresharkは明らかに過度にベアメタルです。Wiresharkは、低レベルのプロトコルの詳細を確認する必要がある場合にのみ実際に役立ちます。

— エヴァンプライス

Fiddlerは使いやすさのためにfirebug / chrome開発者ツールにより近いです。私が最も便利だと思った場所の1つは、KMLファイルをWebサイトに公開するときです。ウェブブラウザだけでなく、Google EarthなどのWindowsデスクトップアプリケーションからのリクエストとレスポンスを確認できます。Wiresharkを数回使用したことがありますが、一般的には日々のウェブマスターには役に立たないことに同意します。

— ジェイソンバーチ

1

GoogleのオープンソースのSpeed Tracer（http://code.google.com/webtoolkit/speedtracer/）を試すこともできます。

Speed Tracerは、Webアプリケーションのパフォーマンスの問題を特定して修正するためのツールです。ブラウザ内の低レベルの計測ポイントから取得したメトリックを視覚化し、アプリケーションの実行時にそれらを分析します。Speed TracerはChrome拡張機能として利用可能であり、拡張機能が現在サポートされているすべてのプラットフォーム（WindowsおよびLinux）で動作します。

Speed Tracerを使用すると、アプリケーションのどこで時間が費やされているかをより正確に把握できます。これには、JavaScriptの解析と実行、レイアウト、CSSスタイルの再計算とセレクターの一致、DOMイベント処理、ネットワークリソースの読み込み、タイマーの起動、XMLHttpRequestコールバック、ペイントなどに起因する問題が含まれます。

— mvark
ソース