This keyboard workflow only works when one of these sections is in focus. Click on the background of the Main section, or any of the sections next to it, such as Interactions, Network, or GPU.Dragging the mouse across the Overview to zoom The Overview is the section that contains the FPS, CPU, and NET charts.įigure 12.
# Select a portion of a recordingĭrag your mouse left or right across the Overview to select a portion of a recording. Clear recording, outlined in blue # Analyze a performance recordingĪfter you record runtime performance or record load performance, the Performance panel provides a lot of data for analyzing the performance of what just happened.
Load Profile # Clear the previous recordingĪfter making a recording, press Clear recording to clear that recording from the Performance panel.įigure 11. To load a recording, right-click and select Load Profile.įigure 10. To save a recording, right-click and select Save Profile.įigure 9.
#SCREENSHOT GOOGLE CHROME WEBSITE HOW TO#
To learn how to interact with the paint information, see View layers and View paint profiler.
Check the Enable advanced paint instrumentation checkbox. DevTools can't truly simulate the CPUs of mobile devices, because the architecture of mobile devices is very different from that of desktops and laptops. For example, the 2x slowdown option makes your CPU operate 2 times slower than its usual ability. Throttling is relative to your computer's capabilities. Set CPU to the desired level of throttling. Set Network to the desired level of throttling. An example of a recording when JS samples are enabled # Throttle the network while recording An example of a recording when JS samples are disabledįigure 8. The Main section of the recording is much shorter when sampling is disabled, because it omits all of the JavaScript call stacks.įigure 7. Enable the Disable JavaScript Samples checkbox.įigure 7 and Figure 8 show the difference between disabling and enabling JavaScript samples. The Capture settings section, outlined in blue # Disable JavaScript samplesīy default, the Main section of a recording displays detailed call stacks of JavaScript functions that were called during the recording. Collect garbage, outlined in blue # Show recording settingsĬlick Capture settings to expose more settings related to how DevTools captures performance recordings.įigure 6. While you are recording a page, click Collect garbage to force garbage collection.įigure 5. # Force garbage collection while recording See View a screenshot to learn how to interact with screenshots. A page-load recording # Capture screenshots while recordingĮnable the Screenshots checkbox to capture a screenshot of every frame while recording. DevTools records performance metrics while the page reloads and then automatically stops the recording a couple seconds after the load finishes.ĭevTools automatically zooms in on the portion of the recording where most of the activity occurred.įigure 3. Record load performance when you want to analyze the performance of a page as it's loading, as opposed to running.Ĭlick Reload page. DevTools records all page activity that occurs as a result of your interactions.Ĭlick Record again or click Stop to stop recording. Record runtime performance when you want to analyze the performance of a page as it's running, as opposed to loading. # Record performance # Record runtime performance See Get Started With Analyzing Runtime Performance for a guided tutorial on how to analyze a page's performance using Chrome DevTools. This page is a comprehensive reference of Chrome DevTools features related to analyzing performance.
0 kommentar(er)
