web-dev-qa-db-ja.com

Firebugと同等のGoogle Chromeとは何ですか？

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

  • hTML要素を検査する
  • javaScriptの管理/デバッグ
  • プロファイルのパフォーマンス
  • リアルタイムで要素を変更する
developmentperformancegoogle-chromeprofiling
29
Evan Plaice

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

32
Mark Hatton

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

17
HoLyVieR

Google Chrome用Firebug Lite 。

13
Emmett

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

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

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

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

  • Chromeメニュー->ツール->開発者ツール

  • Ctrl + Shift + I Windowsまたは Cmd + Shift + I Macで

  • F12 Windowsで

  • ページの任意の場所を右クリックして、Inspect Elementを選択します

5
user9877

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

このような場合、 Fiddler または Linuxの代替 のような専用のHTTP検査ツールがより多くの洞察を提供することに気付くかもしれません。

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

3
JasonBirch

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

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

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

1
mvark