Analyzing memory usage and processing demands

The Profiles panel allows you to analyze the memory usage and processing demands of your content. You can use the Profiles panel to create a performance profile for your JavaScript and CSS files.

  • For JavaScript files, Web Inspector examines and reports on the CPU usage for each function. You can view the CPU usage for a particular function, as well as the number of times that function was called.
  • For CSS files, Web Inspector examines the processing demands for each selector. Web Inspector records the amount of time it took to search for matches for a particular selector, as well as the total number of matches for that selector.

To use the Profiles panel, you must first enable profiling. Web Inspector prompts you to enable profiling when you first view the Profiles panel; you can choose to enable profiling for just the current session, or to always enable profiling.

The Profiles panel

You can click the Profiles icon in the toolbar to display the Profiles panel. If you have not already enabled profiling, Web Inspector prompts you to do so.

Screen showing the Profiles panel.

Profile the memory usage of your scripts

  1. Click the Profiles icon on the toolbar to display the Profiles panel.
  2. On the Profiles panel, select Collect JavaScript CPU Profile.
  3. To start profiling your memory usage, click Start. The button turns red as the Web Inspector is recording the memory usage.
  4. To stop recording, click Stop. When you stop recording, the new profile is added under the CPU Profiles section in the left pane, and the profile's contents are displayed in the right pane:

    Screen showing the results of a CPU profile.

    The profile results indicate the amount of time the browser engine spent executing each function during the recording process, as well as the number of times each function was called. An excessive amount of time spent in any one function can indicate that there is an issue.

  5. To sort the data, perform any of the following actions:
    • To sort the data by values in any column, double-click the column heading.
    • To display calls based on greatest impact on all exceptions or where they occurred in the call stack, in the status bar at the bottom of the panel, toggle between Heavy (Bottom Up) and Tree (Top down).
    • To specify whether values are presented as a time value or as a percentage of the total CPU usage required to process all the functions, toggle the percent button (percent button image) on or off.
    • To view a single function, select the call in the table and click the focus button (focus button image).
    • To exclude a single function from the data, select the function in the table and click the exclude button (exclude button image).
    • To reload the original profile after focusing on or excluding a function, click the reload button (reload button image).

Profile the performance of your CSS selectors

  1. Click the Profiles icon on the toolbar to display the Profiles panel.
  2. On the Profiles panel, select Collect CSS Selector Profile.
  3. To start profiling your memory usage, click Start. The button turns red as the Web Inspector is recording the memory usage.
  4. To stop recording, click Stop. When you stop recording, the new profile is added under the CSS Selector Profiles section in the left pane, and the profile's contents are displayed in the right pane:

    Screen showing the results of a CSS Selector profile.

    The profile results indicate the amount of time the browser engine spent matching each selector in the associated stylesheets, as well as the total number of times the browser engine found a match for the selector.

  5. To specify whether the value of the Total column is presented as a time value or as a percentage of the total time required to process the CSS, toggle the percent button (percent button image) on or off.

Last modified: 2014-09-29



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus