Important: This document no longer represents the most current version of Safari developer tools. Links to downloads and other resources may no longer be valid. For new documentation on Safari Web Inspector, please visit Safari Developer Help.
All timelines record simultaneously. You can start recording timelines two ways:
Reloading the webpage while Web Inspector is open. This shows all activity as it happens during page load.
To stop recording, click the Stop Recording button. The content browser shows various details depending on the selected timeline.
Figure 3-1 shows recorded network requests as blue horizontal bars.
When the Network Requests timeline is selected, the bottom portion of the content browser displays each individual file requested from the webpage. The horizontal bar graph shows you when each resource was requested, the latency of the server, and the download time for each resource. Hover over any bar to see additional details in a tooltip.
The vertical dashed blue line indicates when the DOM becomes available to Safari, and is equivalent to the
Layout and Rendering
Just as you can see great detail about every resource that has loaded, you can see great detail about how Safari's rendering engine, WebKit, renders the page. Click on Layout & Rendering in the Timelines pane to display a table of each paint that has been rendered, as shown in Figure 3-2. Each layout calculation and paint rendering is represented by a purple horizontal bar.
console.profile() call in your script. To start recording manually, click the record button () in the top right of the Timelines pane. The record button becomes a stop button (). To stop the record, click the click the stop button. You can manually stop the recording call
console.profile() are named with the title of the record provided as an optional argument. If multiple records are captured under the same name, a disclosure triangle reveals multiple runs within the record.
The time spent in each function executed during the record is displayed, as well as the number of times each function is called and the start time.
The time spent is grouped into three categories: Self, the total time spent in the function itself; Total, the total time spent in the function and any subordinate functions it calls in turn; and Average, the average time spent in the function itself during each call (the Self time divided by the number of calls).
If a function is declared with a name, the function name is displayed. If a function is created programmatically by an
eval() statement or inline
<script> </script> tagset, it is labeled
(program) in the record. Other unnamed functions, for example, a function defined within a variable declaration, are labeled
(anonymous function). To be less vague, you can rename anonymous functions in a record by assigning a string value to the
displayName property of the function.
Where applicable, the source URL and line number of the function declaration is shown in gray to the right of the function name. The source URL is a link. Clicking it opens the source in the content browser, scrolled to the line number where the function is declared.