web-dev-qa-db-ja.com

Google Chromeの「要素の検査」機能とは何ですか?

Googleの要素の検査機能とは何ですかchromeそしてそれからどのように利益を得ることができますか?[要素の検査]ウィンドウで[リソース]タブをクリックしても表示されませんこの機能を効果的に使用するにはどうすればよいですか?

ページを右クリックして[要素の検査]項目を選択して[要素の検査]を開くと、次の画面が表示されます。

alt text

4
Prashant

Inspect ElementはChrome版のFirebugです。フル機能ではありませんが、それでも非常に便利なツールです。

[リソース]タブが有効になっていることを確認してください。有効になっていないと、読み込み時間が発生しません。大きな[リソーストラッキングを有効にする]ボタンをクリックします。

Screenshot

7
Dan Walker

他の人が言及しているように、これは WebKit Web Inspector であり、ページのHTMLやその他のリソースを検査し、読み込み時間などを評価できます。これは、このページでの使用のスクリーンショットです(Safariから、同じインスペクター):

WebKit web inspector

4
jtbandes

Inspect Elementを使用すると、Firefox拡張機能 firebug のように、クリックした領域に最も近いHTML要素を検査できます。リソース追跡を永続的に有効にする必要があるタイミングを確認したい場合は、プロンプトが表示されます。

2
John T

Load Time Chrome他の人が使用しているバージョン、14.0.835.202 Developer Toolsには、選択できるものがかなりあります。最も便利なものの1つは、要素を検査し、a)htmlまたはbをライブ編集することです。 )Web開発用のCSSのライブ編集。すべてが機能するようになったら、本物を編集できます。レイアウトの変更を確認するためにedit-flush-reloadダンスを実行する必要はありません。

これは、ページ要素の読み込み時間を示すネットワークセクションです(FirebugのYSlowなど)。

FirefoxのFirebugよりもはるかに高速で、私の使用に適したレイアウトであることが証明されています。

1
Fiasco Labs