Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
La herramienta de performance UI consta de cuatro piezas principales:
- Recordings pane
- Recording overview
- Details pane, which may contain any one of:
La barra de herramienta contiene los siguientes botones:
- comenzar y parar la grabación.
- importar una grabación previamente guardada.
- limpiar el panel de grabación. Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.
- Filtros de marcas, estos se mostrarán en la vista en cascada.
- Selector de tipo de vista.
- acceso a la ventana de configuración.
Panel de Grabaciónes
Lista todas las grabacines que hayan sido cargadas, incluyendo la grabación actual.
At any given time, one recording is selected, and that recording is displayed in the rest of the tool. To select a different recording, click its entry in the pane. To save the recording as a JSON file click "Save".
This displays an overview of the entire recording, with the x-axis representing time.
It contains two elements: an overview of the Waterfall and a frame rate graph.
This presents a compressed view of the Waterfall:
Recorded operations are color-coded using the same scheme as in the main Waterfall view.
Frame rate graph
The frame rate gives you an overview of the browser's responsiveness during the recording:
See the separate article on frame rate.
Because these elements are synchronized, you can correlate events in one element with events in another.
For example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate:
You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:
The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the Toolbar.
To learn much more about the Waterfall, see the separate Waterfall page.
To learn much more about the Call Tree, see the separate Call Tree page.
If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:
To learn much more about the Flame Chart, see the separate Flame Chart page.