The option to record profile works very similarly to the recording function in the Performance panel. After beginning the recording process, you should interact with the page.
Once you're done exploring features and buttons on your page, you should stop and inspect the results, this time displayed in a table:. These problems should be addressed as soon as possible since they strongly affect your users' experience while using your web applications. To diagnose the memory problems, you can make use of the Performance and Memory panels. More about this in later tutorials. Code has been added to clipboard!
Home Chrome DevTools Memory. Reading time 7 min. Learn about the main features of this panel and optimize your website's performance! Contents 1. Chrome Memory Tab: Main Tips 2. Memory Panel Explained 3. Usage and Purpose of Heap Snapshots 3. Comparison 3. Containment 3. Statistics 4. Profile Recording: Inspect Memory Usage 5. Memory Issues and Their Symptoms 6.
Chrome Memory Tab: Summary. Pros Simplistic design no unnecessary information High-quality courses even the free ones Variety of features. Both versions are supposed to move each square the same amount of space in the same amount of time. Take a recording in the Performance panel to learn how to detect the performance bottleneck in the un-optimized version. In DevTools, click Record. DevTools captures performance metrics as the page runs.
Click Stop. DevTools stops recording, processes the data, then displays the results on the Performance panel. Once you've got a recording of the page's performance, you can measure how poor the page's performance is, and find the cause s.
The main metric for measuring the performance of any animation is frames per second FPS. Users are happy when animations run at 60 FPS. Look at the FPS chart. Whenever you see a red bar above FPS , it means that the framerate dropped so low that it's probably harming the user experience.
In general, the higher the green bar, the higher the FPS. The colors in the CPU chart correspond to the colors in the Summary tab, at the bottom of the Performance panel. Whenever you see the CPU maxed out for long periods, it's a cue to find ways to do less work.
DevTools shows a screenshot of the page at that point in time. Move your mouse left and right to replay the recording. This is called scrubbing, and it's useful for manually analyzing the progression of animations. Figure 7 : Viewing a screenshot of the page around the ms mark of the recording. In the Frames section, hover your mouse over one of the green squares. DevTools shows you the FPS for that particular frame.
Each frame is probably well below the target of 60 FPS. Of course, with this demo, it's pretty obvious that the page is not performing well. But in real scenarios, it may not be so clear, so having all of these tools to make measurements comes in handy. A new overlay appears in the top-right of your viewport. You won't be using it in this tutorial. Now that you've measured and verified that the animation is not performing well, the next question to answer is: why?
Note the summary tab. When no events are selected, this tab shows you a breakdown of activity. The page spent most of its time rendering. Since performance is the art of doing less work, your goal is to reduce the amount of time spent doing rendering work. Expand the Main section. DevTools shows you a flame chart of activity on the main thread, over time.
The x-axis represents the recording, over time. Each bar represents an event. A wider bar means that event took longer. The y-axis represents the call stack. When you see events stacked on top of each other, it means the upper events caused the lower events. There's a lot of data in the recording. The Main section and Summary tab only display information for the selected portion of the recording.
In the flame chart of Figure 18, the yellow below the calls to wait are actually thousands of Minor GC calls. The Self Time column represents the aggregated time spent directly in that activity, across all of its occurrences. The Total Time column represents aggregated time spent in that activity or any of its children.
Use the Event Log tab to view activities in the order in which they occurred during the recording. The Event Log tab only displays activities during the selected portion of the recording. The Start Time column represents the point at which that activity started, relative to the start of the recording.
For example, the start time of The Total Time columns represents time spent directly in that activity or in any of its children. Use the Duration menu to filter out any activities that took less than 1 ms or 15 ms. By default the Duration menu is set to All , meaning all activities are shown. Disable the Loading , Scripting , Rendering , or Painting checkboxes to filter out all activities from those categories.
Use the Interactions section to find and analyze user interactions that happened during the recording. The FPS chart provides an overview of the frame rate across the duration of a recording.
In general, the higher the green bar, the better the frame rate. A red bar above the FPS chart is a warning that the frame rate dropped so low that it probably harmed the user's experience. Click on a frame to view even more information about the frame in the Summary tab. DevTools outlines the selected frame in blue. Expand the Network section to view a waterfall of network requests that occurred during the recording. Click on a request to view more information about it in the Summary tab.
For example, in Figure 23 the Summary tab is displaying more information about the blue request that's selected in the Network section. A darker-blue square in the top-left of a request means it's a higher-priority request. A lighter-blue square means lower-priority.
For example, in Figure 23 the blue, selected request is higher-priority, and the green one above it is lower-priority. In Figure 24, the request for www. Figure 25 shows the corresponding representation of the same request in the Timing tab of the Network panel.
Here's how these two representations map to each other:. The line-bar representation of the www. The Timing tab representation of the www. DevTools displays a new Memory chart, above the Summary tab. The colored lines on the chart map to the colored checkboxes above the chart. Disable a checkbox to hide that category from the chart. The chart only displays the region of the recording that is currently selected.
For example, in Figure 27, the Memory chart is only showing memory usage for the start of the recording, up to around the ms mark. When analyzing a section like Network or Main , sometimes you need a more precise estimate of how long certain events took. Hold Shift, click and hold, and drag left or right to select a portion of the recording.
At the bottom of your selection, DevTools shows how long that portion took. The See Capture screenshots while recording to learn how to enable screenshots. Hover over the Overview to view a screenshot of how the page looked during that moment of the recording.
You can also view screenshots by clicking a frame in the Frames section. DevTools displays a small version of the screenshot in the Summary tab. After clicking the After clicking the thumbnail in the Summary tab, DevTools zooms in on the screenshot. Use the Rendering tab's features to help visualize your page's rendering performance. The FPS meter is an overlay that appears in the top-right corner of your viewport. It provides a realtime estimate of FPS as the page runs.
To open the FPS meter :. Use Paint Flashing to get a realtime view of all paint events on the page. Whenever a part of the page gets re-painted, DevTools outlines that section in green.
Use Layer Borders to view an overlay of layer borders and tiles on top of the page. Use Scrolling Performance Issues to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page.
DevTools outlines the potentially-problematic elements in teal. Scrolling Performance Issues is indicating that there's a mousewheel event listener encompassing the entire viewport that may harm scroll performance.
Skip to content. Chrome DevTools. Overview Open Chrome DevTools. Inspect network activity Network features reference. Simulate mobile devices with Device Mode Override the user agent string Override geolocation Simulate device orientation. Analyze runtime performance Optimize website speed Performance features reference Timeline Event Reference. Accessibility features reference Navigate Chrome DevTools with assistive technology Track element focus.
Customization Enable dark theme Change placement: undock, dock to bottom, dock to left. Documentation Chrome DevTools Performance.
0コメント