Was ist die Funktion "Inspect Element" in Google Chrome?

84704
Prashant

Was ist die Inspect Element- Funktion in Google Chrome und wie kann ich davon profitieren? Wenn ich im Fenster "Inspect Element" auf die Registerkarte "Resource" klicke, werden keine Ladezeiten angezeigt. Wie kann ich diese Funktion effektiv nutzen?

Ich sehe den folgenden Bildschirm, wenn ich "Inspect Element" öffne, indem Sie mit der rechten Maustaste auf die Seite klicken und das Element "Inspect Element" auswählen:

alt text

4

4 Antworten auf die Frage

7
Dan Walker

Inspect Elementist Chrome-Version von Firebug. Es ist nicht ganz so voll ausgestattet, aber es ist immer noch ein sehr nützliches Werkzeug.

Stellen Sie sicher, dass die Registerkarte "Ressource" aktiviert ist. Wenn dies nicht der Fall ist, werden keine Ladezeiten angezeigt. Klicken Sie auf die große Schaltfläche "Ressourcenverfolgung aktivieren".

Screenshot

@Dan, ich sehe einen völlig anderen Bildschirm als Sie. Ich habe meine Frage mit meinem Screenshot aktualisiert, was ich sehe. Ich sehe nicht die Registerkarte Scrips und Profile. Bitte sag mir, warum es passiert? Prashant vor 14 Jahren 0
Es ist wahrscheinlich anders, weil ich auf dem dev-Kanal für Chrome statt der stabilen Version laufe. Der einzige Rat, den ich geben kann, ist, Chrome neu zu starten und die Seite neu zu laden. Dan Walker vor 14 Jahren 0
"Ich laufe auf dem Dev-Channel", was ist das und kann ich auch meinen Browser so laufen lassen, wie Sie laufen? Können Sie mir bitte zeigen, wie das geht? Prashant vor 14 Jahren 0
http://dev.chromium.org/getting-involved/dev-channel - ich wäre jedoch vorsichtig bei der Installation, insbesondere wenn es sich um Ihren Hauptbrowser handelt. Manchmal kann es zu Abstürzen und scheinbar zufälligen Hängen kommen. Dan Walker vor 14 Jahren 0
4
jtbandes

Wie bereits erwähnt, handelt es sich dabei um den WebKit Web Inspector, mit dem Sie den HTML-Code und andere Ressourcen einer Seite überprüfen und Ladezeiten und dergleichen ermitteln können. Hier ist ein Screenshot der Verwendung auf dieser Seite (von Safari; derselbe Inspektor):

WebKit web inspector

2
John T

Mit Inspect Element können Sie prüfen, welches HTML-Element dem angeklickten Bereich am nächsten ist, genau wie der Firefox-Erweiterungs- Firebug . Wenn Sie Timings sehen möchten, müssen Sie die Ressourcenverfolgung permanent aktivieren, es sollte Sie dazu auffordern.

1
Fiasco Labs

Load Time Nicht sicher, welche Chrome-Version von allen anderen verwendet wird, haben 14.0.835.202 Developer Tools eine große Auswahl an Möglichkeiten. Eine der nützlichsten Aufgaben ist die Überprüfung eines Elements und a) Live-Bearbeitung von HTML oder b) Live-Bearbeitung von CSS für die Webentwicklung. Sobald Sie alles zum Laufen gebracht haben, können Sie das Original bearbeiten und müssen nicht den Edit-Flush-Reload-Tanz ausführen, um Layoutänderungen zu sehen.

Hier ist der Netzwerkbereich, der die Ladezeiten von Seitenelementen anzeigt (wie YSlow in Firebug).

Es hat sich als viel schneller und besser für meinen Einsatz als Firebug in Firefox herausgestellt.

Verwandte Probleme