2016-07-18 19 views
5

Ich versuche, die Chrome Devtools Timeline verwenden, um die Leistung der Animationen zu verbessern, aber ich kann die nicht finden. Ich habe einige Sekunden einer Animation aufgenommen und dann auf ein Paint-Event in der Timeline geklickt, wie hier beschrieben, im Grunde genommen: https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool#profile-paintingKeine Farbe Profiler in Chrome DevTools

Aber ich sehe keine Registerkarte.

Hier ist, wie ich das Konsolenfenster zu sehen:

enter image description here

Ich verwende Google Chrome Version 51.0.2704.106 (64-Bit) auf einem Mac

Antwort

6

-Update 8. Juli 2017:

Das Verhalten hier hat sich in neueren Versionen von Chrome geändert. Siehe Li's Antwort jetzt.


Alte Antwort:

Sie müssen zuerst auf dem Paint-Ereignisse im Ereignisprotokoll Registerkarte klicken. Auf der rechten Seite finden Sie dann eine Vorschau-Abschnitt mit einem Lack Profiler Link zu sehen, wie pro unten:

Event Log > Event Profile

Sobald Sie auf den Link geklickt haben, wird die Registerkarte in das Ereignisprotokoll nächsten erscheinen Registerkarte nach unten:

Event Profile

+0

dieser Link in der Vorschau erscheint mir nicht. So sehe ich diesen Teil: http: // imgur.com/5V8UVCj – Carlo

+0

@Carlo Meine Vermutung ist, dass der Profiler gerade diese Daten nicht richtig verfolgen konnte. Ich finde, dass das mehrfache Auffrischen der Seite zu unterschiedlichen Ergebnissen führte, und gelegentlich bekam ich das gleiche Problem wie bei ein paar Paint-Ereignissen. –

+0

ist es tatsächlich wahr. Nach vielen Versuchen habe ich festgestellt, dass einige der Paint-Ereignisse den Paint Profiler-Link anzeigen, aber nicht alle. Ich frage mich, ob es einen Grund dafür gibt, vielleicht schlägt es fehl, das Ereignis für ein Speicherproblem richtig aufzuzeichnen, oder es ist nur ein Fehler. Wie auch immer, danke, ich habe Ihre Antwort als richtig markiert, weil ich meine, es ist – Carlo

12

bei 12/05/2017

aktualisiert Es wird noch schwieriger in Version 57.0.2987 zu finden .98 (64-Bit). Im Folgenden finden Sie die Schritte, um es zu finden,

1) Aktivieren Sie "Advanced Farbe Instrumentierung (langsam)"

enter image description here

2) auf diesem Block eine Zeitleiste 3) Nehmen Sie einen Farbblock ein und klicken Sie

enter image description here

4) Klicken Sie auf den "Farb Profiler" inside Vorschau Abschnitt

enter image description here

5) Hier ist der "Paint Profiler", den Sie suchen.

enter image description here

0

Sie brauchen nicht wirklich zu halten die Seite zu aktualisieren. Sobald die Seite geladen und Profile Paint nicht angezeigt wird, drücken Sie einfach Strg + f und geben Sie Paint ein und es wird angezeigt. Abhängig von Ihrer Computerhardware dauert es einige Sekunden, bis schließlich der Farbsatz geladen wird, selbst wenn Sie nachsehen (Strg + f). Warte ein paar Sekunden und sieh dann nach Farbe, du musst nicht auffrischen!

Verwandte Themen