Performance features reference | Chrome DevTools

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/chrome/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/docs/devtools/performance/reference"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/docs/devtools/performance/reference" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/devtools/performance/reference" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/devtools/performance/reference" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/devtools/performance/reference?hl=vi" /><title>Performance features reference  |  Chrome DevTools  |  Chrome for Developers</title> <meta property="og:title" content="Performance features reference  |  Chrome DevTools  |  Chrome for Developers"><meta name="description" content="A reference on all the ways to record and analyze performance in Chrome DevTools."> <meta property="og:description" content="A reference on all the ways to record and analyze performance in Chrome DevTools."><meta property="og:url" content="https://developer.chrome.com/docs/devtools/performance/reference"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2024-06-28", "headline": "Performance features reference" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Docs", "item": "https://developer.chrome.com/docs" },{ "@type": "ListItem", "position": 2, "name": "Chrome DevTools", "item": "https://developer.chrome.com/docs/devtools" },{ "@type": "ListItem", "position": 3, "name": "Performance features reference", "item": "https://developer.chrome.com/docs/devtools/performance/reference" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="chrome-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/case-studies" track-type="nav" track-metadata-position="nav - get inspired" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" > Get inspired </a> </tab> <tab > <a href="https://developer.chrome.com/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/blog" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs" track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Build with Chrome</li> <li class="devsite-nav-description">Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/capabilities" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Capabilities </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromedriver" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromedriver" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> ChromeDriver </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromium" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromium" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chromium </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/aurora" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/aurora" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Aurora </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/android" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/android" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/origintrials/" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Origin trials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/release-notes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/release-notes" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Release notes </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Productivity</li> <li class="devsite-nav-description">Create the best experience for your users with the web's best tools.</li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/crux" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/crux" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Chrome UX Report </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/accessibility" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section dcc-subnav second-column-list"> <li class="devsite-nav-description">Get things done quicker and neater, with our ready-made libraries. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/workbox" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Workbox </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/puppeteer" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/puppeteer" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Puppeteer </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Experience</li> <li class="devsite-nav-description">Design a beautiful and performant web with Chrome. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> AI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/performance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/performance" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/css-ui" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/css-ui" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> CSS and UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/identity" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/identity" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/payments" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/payments" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Payments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/privacy-security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Privacy and security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section resources-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Resources</li> <li class="devsite-nav-description">More from the Chrome team. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> All documentation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" track-type="nav" track-metadata-eventdetail="https://web.dev/baseline" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> Baseline </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" track-type="nav" track-metadata-eventdetail="https://web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> web.dev </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights audit </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/new" track-type="nav" track-metadata-position="nav - new in chrome" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" > New in Chrome </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Chrome DevTools" tenant-name="Chrome for Developers" > <form class="devsite-search-form" action="https://developer.chrome.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/docs/devtools" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Chrome DevTools" > Chrome DevTools </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://developer.chrome.com/docs/devtools" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-position="nav - devtools" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: DevTools" track-name="devtools" > DevTools </a> </tab> <tab > <a href="https://developer.chrome.com/docs/devtools/ai-assistance/quickstart" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/ai-assistance/quickstart" track-type="nav" track-metadata-position="nav - ai assistance" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: AI assistance" track-name="ai assistance" > AI assistance </a> </tab> <tab class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/devtools/dom" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/dom" track-type="nav" track-metadata-position="nav - panels" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Panels" track-name="panels" > Panels </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Panels" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/dom" track-metadata-position="nav - panels" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Panels" track-name="panels" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/elements" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/elements" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Elements </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/console" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/console" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Console </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/sources" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/sources" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Sources </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/network/overview" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/network/overview" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Network </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/performance/overview" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/performance/overview" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/memory" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/memory" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Memory </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/application" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/application" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Application </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/recorder/overview" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/recorder/overview" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Recorder </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/rendering" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/rendering" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Rendering </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown devsite-active "> <a href="https://developer.chrome.com/docs/devtools/security" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/security" track-type="nav" track-metadata-position="nav - more panels" track-metadata-module="primary nav" aria-label="More panels, selected" data-category="Site-Wide Custom Events" data-label="Tab: More panels" track-name="more panels" > More panels </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for More panels" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/security" track-metadata-position="nav - more panels" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: More panels" track-name="more panels" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/autofill" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/autofill" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Autofill </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/css/animations" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/css/animations" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Animations </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/changes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/changes" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Changes </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/coverage" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/coverage" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Coverage </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/developer-resources" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/developer-resources" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Developer resources </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/css-overview" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/css-overview" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> CSS overview </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/issues" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/issues" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Issues </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/layers" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/layers" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Layers </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/lighthouse" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/media-panel" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/media-panel" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Media </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/memory-inspector" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/memory-inspector" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Memory Inspector </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/device-mode/override-user-agent" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/device-mode/override-user-agent" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Network conditions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/network-request-blocking" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/network-request-blocking" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Network request blocking </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/performance-monitor" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/performance-monitor" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Performance monitor </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/protocol-monitor" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/protocol-monitor" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Protocol monitor </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/quick-source" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/quick-source" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Quick source </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/security" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Security </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/sensors" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/sensors" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Sensors </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/webaudio" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/webaudio" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> WebAudio </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/webauthn" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/webauthn" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> WebAuthn </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/whats-new" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/whats-new" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> What's new </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/docs/devtools/settings" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/settings" track-type="nav" track-metadata-position="nav - settings" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Settings" track-name="settings" > Settings </a> </tab> <tab > <a href="https://developer.chrome.com/docs/devtools/accessibility/reference" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/accessibility/reference" track-type="nav" track-metadata-position="nav - accessibility" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" > Accessibility </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get inspired" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get inspired </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: DevTools" track-name="devtools" data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/ai-assistance/quickstart" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: AI assistance" track-name="ai assistance" data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI assistance" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI assistance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/dom" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Panels" track-name="panels" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Panels" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Panels </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Panels" track-name="panels" > <span class="devsite-nav-text" tooltip menu="Panels"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Panels"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/security" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: More panels" track-name="more panels" data-category="Site-Wide Custom Events" data-label="Responsive Tab: More panels" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> More panels </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: More panels" track-name="more panels" > <span class="devsite-nav-text" tooltip menu="More panels"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="More panels"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/settings" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Settings" track-name="settings" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Settings" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Settings </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/accessibility/reference" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Get started</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/open" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/open" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/open" ><span class="devsite-nav-text" tooltip>Open Chrome DevTools</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/news" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/news" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/news" ><span class="devsite-nav-text" tooltip>What's new in DevTools</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/customize" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/customize" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/customize" ><span class="devsite-nav-text" tooltip>Customize DevTools</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/tips" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/tips" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/tips" ><span class="devsite-nav-text" tooltip>DevTools Tips</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Commands and shortcuts</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/command-menu" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/command-menu" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/command-menu" ><span class="devsite-nav-text" tooltip>Run commands in the Command Menu</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/javascript/disable" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/javascript/disable" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/javascript/disable" ><span class="devsite-nav-text" tooltip>Disable JavaScript</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/shortcuts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/shortcuts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/shortcuts" ><span class="devsite-nav-text" tooltip>Keyboard shortcuts</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/device-mode" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/device-mode" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/device-mode" ><span class="devsite-nav-text" tooltip>Simulate mobile devices with Device Mode</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/search" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/search" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/search" ><span class="devsite-nav-text" tooltip>Find text across all loaded resources with Search</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Elements</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/elements" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/elements" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/elements" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>DOM</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/devtools/dom" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/dom" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/dom" ><span class="devsite-nav-text" tooltip>View and change the DOM</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/dom/properties" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/dom/properties" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/dom/properties" ><span class="devsite-nav-text" tooltip>View properties of DOM objects</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/elements/badges" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/elements/badges" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/elements/badges" ><span class="devsite-nav-text" tooltip>Badges references</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>CSS</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/devtools/css" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/css" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/css" ><span class="devsite-nav-text" tooltip>View and change CSS</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/css/issues" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/css/issues" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/css/issues" ><span class="devsite-nav-text" tooltip>Find invalid, overridden, inactive, and other CSS</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/css/color" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/css/color" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/css/color" ><span class="devsite-nav-text" tooltip>Inspect and debug with the Color Picker</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/css/grid" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/css/grid" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/css/grid" ><span class="devsite-nav-text" tooltip>Inspect grid layouts</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/css/flexbox" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/css/flexbox" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/css/flexbox" ><span class="devsite-nav-text" tooltip>Inspect and debug flexbox layouts</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/css/container-queries" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/css/container-queries" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/css/container-queries" ><span class="devsite-nav-text" tooltip>Inspect and debug container queries</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/css/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/css/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/css/reference" ><span class="devsite-nav-text" tooltip>Feature reference</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>AI assistance</span> </div></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/docs/devtools/ai-assistance" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/ai-assistance" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/ai-assistance" ><span class="devsite-nav-text" tooltip>Overview</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/ai-assistance/quickstart" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/ai-assistance/quickstart" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/ai-assistance/quickstart" ><span class="devsite-nav-text" tooltip>Quickstart</span></a></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-experimental"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Topics</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/devtools/ai-assistance/styling" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/ai-assistance/styling" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/ai-assistance/styling" ><span class="devsite-nav-text" tooltip>Styling</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/ai-assistance/network" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/ai-assistance/network" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/ai-assistance/network" ><span class="devsite-nav-text" tooltip>Network</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/ai-assistance/sources" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/ai-assistance/sources" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/ai-assistance/sources" ><span class="devsite-nav-text" tooltip>Sources</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/ai-assistance/performance" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/ai-assistance/performance" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/ai-assistance/performance" ><span class="devsite-nav-text" tooltip>Performance</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Console</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/console" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/console" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/console" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/console/understand-messages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/console/understand-messages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/console/understand-messages" ><span class="devsite-nav-text" tooltip>Understand errors and warnings with console insights</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/console/log" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/console/log" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/console/log" ><span class="devsite-nav-text" tooltip>Log messages</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/console/javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/console/javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/console/javascript" ><span class="devsite-nav-text" tooltip>Run JavaScript</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/console/live-expressions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/console/live-expressions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/console/live-expressions" ><span class="devsite-nav-text" tooltip>Watch JavaScript in real-time</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/console/format-style" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/console/format-style" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/console/format-style" ><span class="devsite-nav-text" tooltip>Format and style messages</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/console/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/console/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/console/reference" ><span class="devsite-nav-text" tooltip>Feature reference</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/console/api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/console/api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/console/api" ><span class="devsite-nav-text" tooltip>API reference</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/console/utilities" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/console/utilities" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/console/utilities" ><span class="devsite-nav-text" tooltip>Utilities API reference</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Sources</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/sources" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/sources" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/sources" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/javascript" ><span class="devsite-nav-text" tooltip>Debug JavaScript</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/javascript/breakpoints" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/javascript/breakpoints" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/javascript/breakpoints" ><span class="devsite-nav-text" tooltip>Pause your code with breakpoints</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/javascript/snippets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/javascript/snippets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/javascript/snippets" ><span class="devsite-nav-text" tooltip>Run snippets of JavaScript</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/javascript/source-maps" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/javascript/source-maps" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/javascript/source-maps" ><span class="devsite-nav-text" tooltip>Debug original code instead of deployed with source maps</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/x-google-ignore-list" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/x-google-ignore-list" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/x-google-ignore-list" ><span class="devsite-nav-text" tooltip>ignoreList source map extension</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/workspaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/workspaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/workspaces" ><span class="devsite-nav-text" tooltip>Edit and save files in a workspace</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/overrides" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/overrides" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/overrides" ><span class="devsite-nav-text" tooltip>Override web content and HTTP response headers locally</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/javascript/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/javascript/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/javascript/reference" ><span class="devsite-nav-text" tooltip>JavaScript debugging reference</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/wasm" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/wasm" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/wasm" ><span class="devsite-nav-text" tooltip>Debug C/C++ WebAssembly</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Network</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/network/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/network/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/network/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/network" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/network" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/network" ><span class="devsite-nav-text" tooltip>Inspect network activity</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/network/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/network/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/network/reference" ><span class="devsite-nav-text" tooltip>Features reference</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/resources" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/resources" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/resources" ><span class="devsite-nav-text" tooltip>View page resources</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Performance</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/performance/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/performance/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/performance/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/performance" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/performance" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/performance" ><span class="devsite-nav-text" tooltip>Analyze runtime performance</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/performance/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/performance/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/performance/reference" ><span class="devsite-nav-text" tooltip>Features reference</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/performance/timeline-reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/performance/timeline-reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/performance/timeline-reference" ><span class="devsite-nav-text" tooltip>Timeline event reference</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/performance/selector-stats" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/performance/selector-stats" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/performance/selector-stats" ><span class="devsite-nav-text" tooltip>Analyze CSS selector performance</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/performance/nodejs" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/performance/nodejs" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/performance/nodejs" ><span class="devsite-nav-text" tooltip>Profile Node.js performance</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/performance/extension" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/performance/extension" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/performance/extension" ><span class="devsite-nav-text" tooltip>Customize your performance data with extensibility API</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/performance-insights" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/performance-insights" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/performance-insights" ><span class="devsite-nav-text" tooltip>Get actionable insights on your website's performance</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Lighthouse</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/lighthouse" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/lighthouse" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/lighthouse" ><span class="devsite-nav-text" tooltip>Optimize web speed</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Memory</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/memory" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/memory" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/memory" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/memory-problems/get-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/memory-problems/get-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/memory-problems/get-started" ><span class="devsite-nav-text" tooltip>Memory terminology</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/memory-problems" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/memory-problems" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/memory-problems" ><span class="devsite-nav-text" tooltip>Fix memory problems</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/memory-problems/heap-snapshots" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/memory-problems/heap-snapshots" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/memory-problems/heap-snapshots" ><span class="devsite-nav-text" tooltip>Record heap snapshots</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/memory-problems/allocation-profiler" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/memory-problems/allocation-profiler" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/memory-problems/allocation-profiler" ><span class="devsite-nav-text" tooltip>Allocation Profiler tool</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Application</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/application" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/application" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/application" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/progressive-web-apps" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/progressive-web-apps" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/progressive-web-apps" ><span class="devsite-nav-text" tooltip>Debug Progressive Web Apps</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>View and edit</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/devtools/storage/localstorage" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/storage/localstorage" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/storage/localstorage" ><span class="devsite-nav-text" tooltip>Local storage</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/storage/sessionstorage" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/storage/sessionstorage" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/storage/sessionstorage" ><span class="devsite-nav-text" tooltip>Session storage</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/storage/extensionstorage" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/storage/extensionstorage" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/storage/extensionstorage" ><span class="devsite-nav-text" tooltip>Extension storage</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/storage/indexeddb" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/storage/indexeddb" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/storage/indexeddb" ><span class="devsite-nav-text" tooltip>IndexedDB data</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/storage/websql" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/storage/websql" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/storage/websql" ><span class="devsite-nav-text" tooltip>Web SQL data</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/docs/devtools/application/cookies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/application/cookies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/application/cookies" ><span class="devsite-nav-text" tooltip>View, add, edit, and delete cookies</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/storage/cache" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/storage/cache" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/storage/cache" ><span class="devsite-nav-text" tooltip>View cache data</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/application/back-forward-cache" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/application/back-forward-cache" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/application/back-forward-cache" ><span class="devsite-nav-text" tooltip>Test back/forward caching</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/application/debugging-speculation-rules" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/application/debugging-speculation-rules" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/application/debugging-speculation-rules" ><span class="devsite-nav-text" tooltip>Debugging speculation rules</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/javascript/background-services" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/javascript/background-services" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/javascript/background-services" ><span class="devsite-nav-text" tooltip>Debug background services</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/application/frames" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/application/frames" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/application/frames" ><span class="devsite-nav-text" tooltip>View frame details</span></a></li> <li class="devsite-nav-item devsite-nav-deprecated"><a href="/docs/devtools/storage/applicationcache" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/storage/applicationcache" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/storage/applicationcache" ><span class="devsite-nav-text" tooltip>View Application Cache data</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Recorder</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/recorder/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/recorder/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/recorder/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/recorder" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/recorder" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/recorder" ><span class="devsite-nav-text" tooltip>Record, replay, and measure user flows</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/recorder/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/recorder/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/recorder/reference" ><span class="devsite-nav-text" tooltip>Features reference</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/recorder/extensions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/recorder/extensions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/recorder/extensions" ><span class="devsite-nav-text" tooltip>Customize the Recorder with extensions</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Rendering</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/rendering" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/rendering" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/rendering" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/rendering/performance" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/rendering/performance" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/rendering/performance" ><span class="devsite-nav-text" tooltip>Discover issues with rendering performance</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/rendering/emulate-css" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/rendering/emulate-css" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/rendering/emulate-css" ><span class="devsite-nav-text" tooltip>Emulate CSS media features</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/rendering/apply-effects" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/rendering/apply-effects" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/rendering/apply-effects" ><span class="devsite-nav-text" tooltip>Apply rendering effects</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>More panels</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/autofill" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/autofill" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/autofill" ><span class="devsite-nav-text" tooltip>Inspect and debug saved addresses with the Autofill panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/security" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/security" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/security" ><span class="devsite-nav-text" tooltip>Understand security issues with the Security panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/sensors" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/sensors" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/sensors" ><span class="devsite-nav-text" tooltip>Emulate device sensors with the Sensors panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/webaudio" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/webaudio" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/webaudio" ><span class="devsite-nav-text" tooltip>View WebAudio API metrics with the WebAudio panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/webauthn" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/webauthn" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/webauthn" ><span class="devsite-nav-text" tooltip>Emulate authenticators with the WebAuthn panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/css/animations" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/css/animations" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/css/animations" ><span class="devsite-nav-text" tooltip>Inspect and modify animations with the Animations panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/changes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/changes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/changes" ><span class="devsite-nav-text" tooltip>Track changes to HTML, CSS, and JavaScript with the Changes panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/coverage" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/coverage" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/coverage" ><span class="devsite-nav-text" tooltip>Find and analyze unused code with the Coverage panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/developer-resources" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/developer-resources" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/developer-resources" ><span class="devsite-nav-text" tooltip>View and manually load source maps with the Developer Resources panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/css-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/css-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/css-overview" ><span class="devsite-nav-text" tooltip>Identify potential CSS improvements with the CSS Overview panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/issues" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/issues" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/issues" ><span class="devsite-nav-text" tooltip>Find and fix problems with the Issues panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/layers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/layers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/layers" ><span class="devsite-nav-text" tooltip>Analyze the layers of your website with the Layers panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/media-panel" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/media-panel" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/media-panel" ><span class="devsite-nav-text" tooltip>Debug media players with the Media panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/memory-inspector" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/memory-inspector" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/memory-inspector" ><span class="devsite-nav-text" tooltip>Inspect ArrayBuffer, TypedArray, DataView or Wasm memory with the Memory inspector panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/device-mode/override-user-agent" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/device-mode/override-user-agent" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/device-mode/override-user-agent" ><span class="devsite-nav-text" tooltip>Override the user agent string with the Network conditions panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/network-request-blocking" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/network-request-blocking" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/network-request-blocking" ><span class="devsite-nav-text" tooltip>Selectively block resources with the Network request blocking panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/performance-monitor" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/performance-monitor" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/performance-monitor" ><span class="devsite-nav-text" tooltip>Analyze runtime performance in real-time with the Performance monitor panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/protocol-monitor" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/protocol-monitor" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/protocol-monitor" ><span class="devsite-nav-text" tooltip>View and send CDP requests with the Protocol monitor panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/quick-source" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/quick-source" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/quick-source" ><span class="devsite-nav-text" tooltip>View source files while having access to other tools with the Quick source panel</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/whats-new" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/whats-new" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/whats-new" ><span class="devsite-nav-text" tooltip>What's new</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Remote debugging</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/remote-debugging" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/remote-debugging" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/remote-debugging" ><span class="devsite-nav-text" tooltip>Remote debug Android devices</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/remote-debugging/local-server" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/remote-debugging/local-server" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/remote-debugging/local-server" ><span class="devsite-nav-text" tooltip>Access local servers and Chrome instances with port forwarding</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/remote-debugging/webviews" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/remote-debugging/webviews" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/remote-debugging/webviews" ><span class="devsite-nav-text" tooltip>Remote debugging WebViews</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Accessibility</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/accessibility/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/accessibility/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/accessibility/reference" ><span class="devsite-nav-text" tooltip>Features reference</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/accessibility/contrast" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/accessibility/contrast" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/accessibility/contrast" ><span class="devsite-nav-text" tooltip>Contrast and readability</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/accessibility/focus" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/accessibility/focus" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/accessibility/focus" ><span class="devsite-nav-text" tooltip>Track elements focus</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/accessibility/navigation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/accessibility/navigation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/accessibility/navigation" ><span class="devsite-nav-text" tooltip>Navigate DevTools with assistive technology</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Settings</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/settings" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>All settings</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/devtools/settings/preferences" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings/preferences" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings/preferences" ><span class="devsite-nav-text" tooltip>Preferences</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/settings/workspace" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings/workspace" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings/workspace" ><span class="devsite-nav-text" tooltip>Workspace</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/settings/ai-innovations" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings/ai-innovations" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings/ai-innovations" ><span class="devsite-nav-text" tooltip>AI innovations</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/settings/experiments" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings/experiments" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings/experiments" ><span class="devsite-nav-text" tooltip>Experiments</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/settings/ignore-list" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings/ignore-list" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings/ignore-list" ><span class="devsite-nav-text" tooltip>Ignore list</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/settings/devices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings/devices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings/devices" ><span class="devsite-nav-text" tooltip>Devices</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/settings/throttling" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings/throttling" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings/throttling" ><span class="devsite-nav-text" tooltip>Throttling</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/settings/locations" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings/locations" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings/locations" ><span class="devsite-nav-text" tooltip>Locations</span></a></li><li class="devsite-nav-item"><a href="/docs/devtools/settings/shortcuts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/settings/shortcuts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/settings/shortcuts" ><span class="devsite-nav-text" tooltip>Shortcuts</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Resources</span> </div></li> <li class="devsite-nav-item"><a href="/discover?category=engineeringblog" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /discover?category=engineeringblog" track-type="bookNav" track-name="click" track-metadata-eventdetail="/discover?category=engineeringblog" ><span class="devsite-nav-text" tooltip>Engineering blog</span></a></li> </ul> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build with Chrome </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/capabilities" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Capabilities" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Capabilities </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromedriver" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeDriver" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeDriver </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromium" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromium" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromium </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/aurora" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aurora" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aurora </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Origin trials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Origin trials </span> </a> </li> <li class="devsite-nav-item"> <a href="/release-notes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release notes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Release notes </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Productivity </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crux" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome UX Report" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome UX Report </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/workbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Workbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Workbox </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/puppeteer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Puppeteer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Puppeteer </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/css-ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS and UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS and UI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/payments" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Payments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Payments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/privacy-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy and security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy and security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All documentation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All documentation </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > web.dev </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights audit" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights audit </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Panels" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/devtools/elements" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Elements" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Elements </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/console" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Console" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Console </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/sources" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Sources" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Sources </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/network/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Network" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Network </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/performance/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/memory" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Memory" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Memory </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/application" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Application" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Application </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/recorder/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Recorder" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Recorder </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/rendering" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Rendering" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Rendering </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="More panels" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/devtools/autofill" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Autofill" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Autofill </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/css/animations" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Animations" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Animations </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/changes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Changes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Changes </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/coverage" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Coverage" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Coverage </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/developer-resources" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer resources" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer resources </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/css-overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS overview" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/issues" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Issues" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Issues </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/layers" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Layers" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Layers </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/media-panel" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Media" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Media </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/memory-inspector" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Memory Inspector" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Memory Inspector </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/device-mode/override-user-agent" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Network conditions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Network conditions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/network-request-blocking" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Network request blocking" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Network request blocking </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/performance-monitor" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance monitor" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance monitor </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/protocol-monitor" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Protocol monitor" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Protocol monitor </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/quick-source" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Quick source" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Quick source </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Security </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/sensors" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Sensors" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Sensors </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/webaudio" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: WebAudio" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WebAudio </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/webauthn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: WebAuthn" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WebAuthn </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/whats-new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: What's new" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > What's new </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Docs" > Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/devtools" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Chrome DevTools" > Chrome DevTools </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/devtools/security" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > More panels </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Performance features reference </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p><style> .wd-authors { --avatar-size: 65px; display: flex; gap: 2em; } .wd-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .wd-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-authors { --avatar-size: 65px; display: flex; gap: 2em; } .dcc-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .dcc-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-author__links a { margin-inline-end: 6px; } .dcc-author__links a:last-of-type { margin-inline-end: 0; } </style> <div class="dcc-authors" translate="no"> <div class="dcc-author"> <img class="devsite-landing-row-item-icon" alt="Kayce Basques" src="https://web.dev/images/authors/kaycebasques.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Kayce Basques </span> <div class="dcc-author__links"> <a href="https://twitter.com/kaycebasques" aria-label="Kayce Basques on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/kaycebasques" aria-label="Kayce Basques on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://glitch.com/@kaycebasques" aria-label="Kayce Basques on Glitch" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"> <title>Glitch</title> <path fill="currentColor" d="M31.734 16.76c-.385-.198-4.536 1.865-5.427 1.693-2.24-.401-1.828-.667-4.839-1.359-1.203-.266-1.031-.109-1.297-.307-.172-.135-.344-.161-.599-.401 4-.719 6.026-1.693 6.734-1.839.76-.146 5.161 1.958 5.427 1.469.266-.495-.964-1.578-.401-3.031.589-1.464-.693-2.422.016-3.583.719-1.161.573-2.932.396-3.026-.396-.203-4.531 1.865-5.438 1.693-2.24-.417-1.828-.682-4.839-1.359-1.203-.271-1.031-.12-1.297-.323-.266-.198-.521-.13-1.036-.974-.521-.839-6.51-2.13-6.906-2.13-.828 0-2.375 2.13-2.375 2.13s-.599 0-2.401.094c-1.802.094-3.375.896-5.495 2.563C-.173 9.737.134 11.414.134 11.414s1.969.667 1.969 1.042c0 .359-1.729.802-1.729.802 1.12 1.411 4.583 2.745 5.464 2.745h.693c-1.438.281-2.823 1.068-4.583 2.438-2.12 1.698-1.813 3.375-1.813 3.375s1.969.667 1.969 1.026-1.729.802-1.729.802c1.12 1.427 4.583 2.76 5.464 2.76.844 0 1.427.026 2.495-.172.078.172.906 1.932 2.599 2.292 1.786.385 2.776.078 2.776.078s.094-.786-.323-1.573c1.547.161 3.307.203 5.026-.068 4.76-.719 7.12-1.865 7.896-2.01.76-.161 5.161 1.948 5.427 1.464.266-.505-.964-1.583-.385-3.036.573-1.469-.708-2.417 0-3.589.719-1.161.573-2.932.396-3.026zM4.615 11.828a1.446 1.446 0 0 1-.297-.042h-.052c-.026-.01-.052-.026-.078-.042l-.052-.01-.083-.042h-.052a.418.418 0 0 1-.068-.042l-.068-.052-.063-.036-.057-.042c-.021-.016-.042-.036-.063-.052l-.042-.042c-.026-.026-.047-.052-.068-.078l-.026-.031a1.954 1.954 0 0 1-.094-.104l-.026-.026c-.021-.036-.036-.073-.052-.109l-.026-.036-.057-.083c-.005-.021-.016-.042-.026-.063l-.026-.083-.026-.052-.016-.094-.01-.068c-.01-.026-.021-.052-.026-.078v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.297 0-.719-.505-1.307-1.146-1.307-.625 0-1.13.573-1.146 1.281 0-.932.667-1.693 1.495-1.693.823 0 1.479.745 1.479 1.682 0 .932-.667 1.693-1.479 1.693zm-1-1.265c0-.203.13-.365.318-.365s.307.161.307.365c0 .198-.135.344-.307.344s-.318-.161-.318-.344zm1 11.651a.712.712 0 0 1-.146 0l-.057-.016a.6.6 0 0 1-.094-.01l-.052-.016-.078-.026-.052-.026c-.031-.005-.057-.016-.083-.026l-.052-.026c-.021-.016-.047-.026-.068-.042L3.881 22l-.068-.052-.052-.042-.068-.052-.042-.042c-.031-.031-.063-.057-.089-.094a.671.671 0 0 1-.094-.12l-.031-.026c-.016-.031-.036-.063-.052-.094l-.026-.052c-.016-.026-.036-.052-.052-.078l-.026-.057-.026-.094-.026-.052-.031-.094-.01-.052c-.01-.031-.021-.063-.026-.094v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.292 0-.724-.505-1.297-1.146-1.297-.625 0-1.13.563-1.146 1.266 0-.932.667-1.693 1.495-1.693.823 0 1.479.76 1.479 1.682 0 .917-.667 1.693-1.479 1.693zm-1-1.266c0-.188.13-.349.318-.349s.307.161.307.349c0 .188-.135.344-.307.344s-.318-.146-.318-.344zm6.77-7.333v-.042l.042-.078.078-.297c.182-.583.344-1.172.479-1.771.161-.708.229-1.281.203-1.599-.016-.12-.031-.245-.052-.359a8.276 8.276 0 0 0-.521-1.724l-.083-.172-.026-.068c-.12-.266.057-.573.323-.557h.188l.531.036 2.104.109 1.151.078a28.24 28.24 0 0 1 10.573 2.828l.891.401c.172.078.266.307.188.505-.068.188-.266.292-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.146-.068-.51-.026-1.599-.094h-.156c.188.51.339 1.031.453 1.562l.063.427c.042.453-.036 1.078-.224 1.88l-.203.823a23.62 23.62 0 0 1-.385 1.323l-.026.078v.042c-.068.188-.266.292-.438.214-.177-.068-.271-.292-.203-.495zm-2-6.349a.307.307 0 0 1 .479.026c.208.26.396.536.563.828.292.531.495 1.068.547 1.615.026.307 0 .651-.052 1.026a8.718 8.718 0 0 1-.271 1.104c-.094.313-.208.62-.333.922-.078.188-.276.266-.453.172-.172-.094-.24-.318-.156-.521l.026-.052.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.052-.802a3.47 3.47 0 0 0-.453-1.292 4.794 4.794 0 0 0-.443-.667l-.036-.042a.417.417 0 0 1 .026-.531zm1.537 13.869c-.063.38-.151.76-.271 1.13a9.549 9.549 0 0 1-.333.906c-.078.188-.276.266-.453.177-.172-.094-.24-.323-.156-.521l.026-.057.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.036-.802a3.365 3.365 0 0 0-.438-1.276 4.794 4.794 0 0 0-.443-.667l-.036-.057a.417.417 0 0 1 .026-.531.3.3 0 0 1 .464 0c.214.266.396.547.563.839.292.536.495 1.083.547 1.615.026.307 0 .651-.052 1.026zm16.531.157c-.068.188-.266.297-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.135-.063h-.063l-.458-.026c-.583-.036-1.172-.068-1.755-.094l.036.078c.234.615.396 1.255.479 1.906.042.453-.036 1.078-.224 1.88l-.203.828a24.99 24.99 0 0 1-.385 1.333l-.026.068v.036c-.068.203-.266.297-.438.229a.42.42 0 0 1-.203-.51v-.026l.042-.078.078-.292c.182-.589.344-1.177.479-1.776.161-.708.229-1.281.203-1.599-.016-.12-.031-.24-.052-.359a7.996 7.996 0 0 0-.521-1.708l-.052-.12-.031-.068-.026-.063c-.12-.271.057-.578.323-.563h.188l.531.042 2.12.104 1.135.083a28.14 28.14 0 0 1 10.573 2.823l.891.401c.172.078.266.307.188.505z"/> </svg></a> </div> </div> </div> <div class="dcc-author"> <img class="devsite-landing-row-item-icon" alt="Sofia Emelianova" src="https://web.dev/images/authors/sofiayem.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Sofia Emelianova </span> <div class="dcc-author__links"> <a href="https://github.com/sofiayem" aria-label="Sofia Emelianova on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> </div> </div> </div> </div></p> <p><devsite-video video-id="7A70hBrPL4I"></devsite-video></p> <p>This page is a comprehensive reference of Chrome DevTools features related to analyzing performance.</p> <p>See <a href="/docs/devtools/evaluate-performance">Analyze runtime performance</a> for a guided tutorial on how to analyze a page's performance using Chrome DevTools.</p> <h2 id="record" data-text="Record performance" tabindex="-1">Record performance</h2> <p>You can record runtime or load performance.</p> <h3 id="record-runtime" data-text="Record runtime performance" tabindex="-1">Record runtime performance</h3> <p>Record runtime performance when you want to analyze the performance of a page as it's running, as opposed to loading.</p> <ol> <li>Go to the page that you want to analyze.</li> <li>Click the <strong>Performance</strong> tab in DevTools.</li> <li><p>Click <strong>Record</strong> <img src="/static/docs/devtools/performance/reference/image/record-9c8c78a739971.png" alt="Record." width="24" height="24" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/record-9c8c78a739971_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">.</p> <p><img src="/static/docs/devtools/performance/reference/image/record-cb83f1ff81ddb.svg" alt="Record." width="800" height="468"></p></li> <li><p>Interact with the page. DevTools records all page activity that occurs as a result of your interactions.</p></li> <li><p>Click <strong>Record</strong> again or click <strong>Stop</strong> to stop recording.</p></li> </ol> <h3 id="record-load" data-text="Record load performance" tabindex="-1">Record load performance</h3> <p>Record load performance when you want to analyze the performance of a page as it's loading, as opposed to running.</p> <ol> <li>Go to the page that you want to analyze.</li> <li>Open the <strong>Performance</strong> panel of DevTools.</li> <li><p>Click <strong>Start profiling and reload page</strong> <img src="/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481.png" alt="Start profiling and reload page." width="20" height="20" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/start-profiling-reload-p-c8f638543b481_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">. DevTools first navigates to <code translate="no" dir="ltr">about:blank</code> to clear any remaining screenshots and traces. Then DevTools records performance metrics while the page reloads and then automatically stops the recording a couple seconds after the load finishes.</p> <p><img src="/static/docs/devtools/performance/reference/image/reload-page-ae1cce85a0198.svg" alt="Reload page." width="800" height="468"></p></li> </ol> <p>DevTools automatically zooms in on the portion of the recording where most of the activity occurred.</p> <p><img src="/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb.png" alt="A page-load recording." width="800" height="857" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/a-page-load-recording-d277d4adeb8bb_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>In this example, the <strong>Performance</strong> panel shows the activity during a page load.</p> <h3 id="screenshots" data-text="Capture screenshots while recording" tabindex="-1">Capture screenshots while recording</h3> <p>Enable the <strong>Screenshots</strong> checkbox to capture a screenshot of every frame while recording.</p> <p><img src="/static/docs/devtools/performance/reference/image/the-screenshots-checkbox-a09314b3a37ef.svg" alt="The Screenshots checkbox." width="800" height="468"></p> <p>See <a href="#view-screenshot">View a screenshot</a> to learn how to interact with screenshots.</p> <h3 id="garbage" data-text="Force garbage collection while recording" tabindex="-1">Force garbage collection while recording</h3> <p>While you are recording a page, click <strong>Collect garbage</strong> <span class="material-symbols-outlined" aria-hidden="true">mop</span> to force garbage collection.</p> <p><img src="/static/docs/devtools/performance/reference/image/collect-garbage-ee13aacdcc994.svg" alt="Collect garbage." width="800" height="468"></p> <h3 id="settings" data-text="Show recording settings" tabindex="-1">Show recording settings</h3> <p>Click <strong>Capture settings</strong> <img src="/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169.png" alt="Capture settings." width="28" height="28" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/capture-settings-fda2783ddc169_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> to expose more settings related to how DevTools captures performance recordings.</p> <p><img src="/static/docs/devtools/performance/reference/image/the-capture-settings-sect-4cd022a1d2323.svg" alt="The Capture Settings section." width="800" height="583"></p> <h3 id="disable-js-samples" data-text="Disable JavaScript samples" tabindex="-1">Disable JavaScript samples</h3> <p>By default, the <strong>Main</strong> track of a recording displays detailed call stacks of JavaScript functions that were called during the recording. To disable these call stacks:</p> <ol> <li>Open the <strong>Capture settings</strong> <img src="/static/docs/devtools/performance/reference/image/settings-8a138964eae2.svg" alt="Settings." width="24" height="24"> menu. See <a href="#settings">Show recording settings</a>.</li> <li>Enable the <strong>Disable JavaScript Samples</strong> checkbox.</li> <li>Take a recording of the page.</li> </ol> <p>The following screenshots show the difference between disabling and enabling JavaScript samples. The <strong>Main</strong> track of the recording is much shorter when sampling is disabled, because it omits all of the JavaScript call stacks.</p> <p><img src="/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774.png" alt="An example of a recording when JS samples are disabled." width="800" height="626" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-8fef1db16d774_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows a recording with disabled JS samples.</p> <p><img src="/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f.png" alt="An example of a recording when JS samples are enabled." width="800" height="781" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/an-example-a-recording-abd9e4ba75f8f_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows a recording with enabled JS samples.</p> <h3 id="network-throttle" data-text="Throttle the network while recording" tabindex="-1">Throttle the network while recording</h3> <p>To throttle the network while recording:</p> <ol> <li>Open the <strong>Capture settings</strong> <img src="/static/docs/devtools/performance/reference/image/settings-453a159afae5.svg" alt="Settings." width="24" height="24"> menu. See <a href="#settings">Show recording settings</a>.</li> <li>Set <strong>Network</strong> to the chosen level of throttling.</li> </ol> <h3 id="cpu-throttle" data-text="Throttle the CPU while recording" tabindex="-1">Throttle the CPU while recording</h3> <p>To throttle the CPU while recording:</p> <ol> <li>Open the <strong>Capture settings</strong> <img src="/static/docs/devtools/performance/reference/image/settings-9743ff44ced26.svg" alt="Settings." width="24" height="24"> menu. See <a href="#settings">Show recording settings</a>.</li> <li>Set <strong>CPU</strong> to the chosen level of throttling.</li> </ol> <p>Throttling is relative to your computer's capabilities. For example, the <strong>2x slowdown</strong> option makes your CPU operate 2 times slower than its usual ability. 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.</p> <h3 id="selector-stats" data-text="Enable CSS selector stats" tabindex="-1">Enable CSS selector stats</h3> <p>To view the statistics of your CSS rule selectors during long-running <strong>Recalculate Style</strong> events:</p> <ol> <li>Open the <strong>Capture settings</strong> <img src="/static/docs/devtools/performance/reference/image/settings-aed46a63a27e3.svg" alt="Settings." width="24" height="24"> menu. See <a href="#settings">Show recording settings</a>.</li> <li>Check the <strong>Enable CSS selector stats</strong> checkbox.</li> </ol> <p>For more details, see how to <a href="/docs/devtools/performance/selector-stats">Analyze CSS selector performance during Recalculate Style events</a>.</p> <h3 id="paint" data-text="Enable advanced paint instrumentation" tabindex="-1">Enable advanced paint instrumentation</h3> <p>To view detailed paint instrumentation:</p> <ol> <li>Open the <strong>Capture settings</strong> <img src="/static/docs/devtools/performance/reference/image/settings-aed46a63a27e3.svg" alt="Settings." width="24" height="24"> menu. See <a href="#settings">Show recording settings</a>.</li> <li>Check the <strong>Enable advanced paint instrumentation</strong> checkbox.</li> </ol> <p>To learn how to interact with the paint information, see <a href="#layers">View layers</a> and <a href="#paint-profiler">View paint profiler</a>.</p> <h2 id="annotate" data-text="Annotate a recording and share it" tabindex="-1">Annotate a recording and share it</h2> <p>Once a performance trace is <a href="#record">recorded</a>, you can <a href="#analyze">analyze</a> it, and annotate it to share your findings.</p> <p>To annotate a recording, open the <strong>Annotations</strong> tab in the <span class="material-symbols-outlined" aria-hidden="true">left_panel_open</span> sidebar on the left of the <strong>Performance</strong> panel. There are several ways to add an annotation:</p> <ul> <li><strong>Label item</strong>: To add a label to an item, double-click it and type a label.</li> <li><strong>Connect two items</strong>: To connect two items with an arrow, double-click the first item, click an arrow next to it, then click the second item.</li> <li><strong>Label a time range</strong>: To label an arbitrary time range, shift-drag from the start of a time range to its end, then type a label.</li> </ul> <p><img src="/static/docs/devtools/performance/reference/image/annotations.png" alt="Annotations on a performance recording." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/annotations_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>In this example, in the <strong>Network</strong> track, there are two annotated requests, a connection between them, and an annotated time range highlighted in pink. The <strong>Annotations</strong> tab shows the number of annotations next to its tab name, in this example, 4.</p> <p>To delete an annotation, hover over it in the <strong>Annotations</strong> tab and click the <span class="material-symbols-outlined" aria-hidden="true">delete</span> <strong>Delete</strong> button next to it.</p> <p>To hide annotations from the performance trace, check <span class="material-symbols-outlined" aria-hidden="true">check_box</span> <strong>Hide annotations</strong> at the bottom of the <strong>Annotations</strong> tab.</p> <h3 id="save" data-text="Save and share a recording" tabindex="-1">Save and share a recording</h3> <p>To save a recording and later share it with your annotated performance findings, in the action bar at the top of the <strong>Performance</strong> panel, click <span class="material-symbols-outlined" aria-hidden="true">download</span> <strong>Download</strong> and select <strong>Save trace</strong>.</p> <p><img src="/static/docs/devtools/performance/reference/image/save-trace.png" alt="Save trace with annotations." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/save-trace_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Alternatively, select <strong>Save trace without annotations</strong>.</p> <h3 id="load" data-text="Load a recording" tabindex="-1">Load a recording</h3> <p>To load a recording, click <span class="material-symbols-outlined" aria-hidden="true">upload</span> <strong>Upload</strong> in the action bar at the top of the <strong>Performance</strong> panel.</p> <p><img src="/static/docs/devtools/performance/reference/image/load-trace.png" alt="Load trace button in the action bar." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/load-trace_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>The <strong>Performance</strong> panel will show annotations if they are present in the trace.</p> <h2 id="clear" data-text="Clear the previous recording" tabindex="-1">Clear the previous recording</h2> <p>After making a recording, press <strong>Clear recording</strong> <img src="/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04.png" alt="Clear recording." width="26" height="26" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/clear-recording-1c1554dc7ce04_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> to clear that recording from the <strong>Performance</strong> panel.</p> <p><img src="/static/docs/devtools/performance/reference/image/clear-recording-90702eac22f47.svg" alt="Clear recording." width="800" height="547"></p> <h2 id="analyze" data-text="Analyze a performance recording" tabindex="-1">Analyze a performance recording</h2> <p>After you <a href="#record-runtime">record runtime performance</a> or <a href="#record-load">record load performance</a>, the <strong>Performance</strong> panel provides a lot of data for analyzing the performance of what just happened.</p> <h3 id="insights" data-text="Get actionable insights" tabindex="-1">Get actionable insights</h3> <p>The <strong>Performance</strong> panel consolidates performance insights from the <strong>Lighthouse</strong> report and the now deprecated <strong>Performance insights</strong> panel. These insights can suggest ways to improve performance and provide guided analysis on the following performance issues, including but not limited to:</p> <ul> <li>LCP and INP by subpart</li> <li>LCP request discovery</li> <li>Layout shift culprits</li> <li>Render blocking requests</li> <li>Third parties</li> <li>Image delivery</li> <li>Document request latency</li> <li>Viewport optimization for mobile</li> <li>CSS selector costs</li> </ul> <p>To make use of insights:</p> <ol> <li><a href="/docs/devtools/performance/reference#record">Make a performance recording</a>.</li> <li>In the left sidebar of the <strong>Performance</strong> panel, open the <strong>Insights</strong> tab, expand different sections, and hover over and click items. The <strong>Performance</strong> panel will highlight the corresponding events in the trace.</li> </ol> <video playsinline autoplay class="screenshot" controls loop muted width="800"> <source src="/static/docs/devtools/performance/reference/video/insights-tab.mp4" type="video/mp4" /> </video> <h3 id="navigate" data-text="Navigate the recording" tabindex="-1">Navigate the recording</h3> <p>To closely inspect your performance recording, you can select a portion of a recording, scroll a long flame chart, zoom in and out, and use breadcrumbs to jump between zoom levels.</p> <h4 id="select" data-text="Select a portion of the recording" tabindex="-1">Select a portion of the recording</h4> <p>Under the action bar of the <strong>Performance</strong> panel and at the top of the recording, you can see the <strong>Timeline overview</strong> section with the <strong>CPU</strong> and <strong>NET</strong> charts.</p> <p><img src="/static/docs/devtools/performance/reference/image/timeline-overview.png" alt="The Timeline overview under the action bar." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/timeline-overview_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>To select a portion of a recording, click and hold, then drag left or right across the <strong>Timeline overview</strong>.</p> <video playsinline autoplay class="screenshot" controls loop muted width="700" > <source src="/static/docs/devtools/performance/reference/video/select-portion.mp4" type="video/mp4" /> </video> <p>To select a portion using the keyboard:</p> <ol> <li>Focus the <strong>Main</strong> track or any of its neighbors.</li> <li>Use the <kbd>W</kbd>, <kbd>A</kbd>, <kbd>S</kbd>, <kbd>D</kbd> keys to zoom in, move left, zoom out, and move right, respectively.</li> </ol> <p>To select a portion using a trackpad:</p> <ol> <li>Hover over the <strong>Timeline overview</strong> section or any of the tracks (<strong>Main</strong> and its neighbors).</li> <li>Using two fingers, swipe up to zoom out, swipe left to move left, swipe down to zoom in, and swipe right to move right.</li> </ol> <h4 id="breadcrumbs" data-text="Create breadcrumbs and jump between zoom levels" tabindex="-1">Create breadcrumbs and jump between zoom levels</h4> <p>The <strong>Timeline overview</strong> lets you create multiple nested breadcrumbs in succession, increasing zoom levels, and then jump freely between zoom levels.</p> <p>To create and use breadcrumbs:</p> <ol> <li>In <strong>Timeline overview</strong>, <a href="#select">select a portion of the recording</a>.</li> <li>Hover over the selection and click the <strong>N ms</strong> <span class="material-symbols-outlined" aria-hidden="true">zoom_in</span> button. The selection expands to fill the <strong>Timeline overview</strong>. A chain of breadcrumbs starts building at top of the <strong>Timeline overview</strong>.</li> <li>Repeat the previous two steps to create another nested breadcrumb. You can continue to nest breadcrumbs as long as the selection range is greater than 5 milliseconds.</li> <li>To jump to a chosen zoom level, click the corresponding breadcrumb in the chain at top of the <strong>Timeline overview</strong>.</li> </ol> <video playsinline autoplay class="screenshot" controls loop muted width="700"> <source src="/static/docs/devtools/performance/reference/video/breadcrumb-zoom.mp4" type="video/mp4" /> </video> <p>To remove the childs of a breadcrumb, right-click the parent breadcrumb and select <strong>Remove child breadcrumbs</strong>.</p> <video playsinline autoplay class="screenshot" controls loop muted width="700"> <source src="/static/docs/devtools/performance/reference/video/remove-childs.mp4" type="video/mp4" /> </video> <h4 id="scroll" data-text="Scroll a long flame chart" tabindex="-1">Scroll a long flame chart</h4> <p>To scroll a long flame chart in the <strong>Main</strong> track or any of its neighbors, click and hold, then drag in any direction until what you are looking for comes into view.</p> <h3 id="search" data-text="Search activities" tabindex="-1">Search activities</h3> <p>You can search across the activities in the <strong>Main</strong> track and requests in the <strong>Network</strong> track.</p> <p>To open a search box at the bottom of the <strong>Performance</strong> panel, press:</p> <ul> <li>macOS: <kbd>Command</kbd>+<kbd>F</kbd></li> <li>Windows, Linux: <kbd>Control</kbd>+<kbd>F</kbd></li> </ul> <p><img src="/static/docs/devtools/performance/reference/image/search-box.png" alt="The search box." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/search-box_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows a regular expression in the search box at the bottom that finds any activity that begins with <code translate="no" dir="ltr">E</code>.</p> <p>To cycle through activities that match your query:</p> <ul> <li>Click <span class="material-symbols-outlined" aria-hidden="true">expand_less</span> <strong>Previous</strong> or <span class="material-symbols-outlined" aria-hidden="true">expand_more</span> <strong>Next</strong> buttons.</li> <li>Press <kbd>Shift</kbd>+<kbd>Enter</kbd> to select the previous or <kbd>Enter</kbd> to select the next.</li> </ul> <p>The <strong>Performance</strong> panel shows a tooltip over the activity selected in the search box.</p> <p>To modify query settings:</p> <ul> <li>Click <span class="material-symbols-outlined" aria-hidden="true">match_case</span> <strong>Match case</strong> to make the query case sensitive.</li> <li>Click <span class="material-symbols-outlined" aria-hidden="true">regular_expression</span> <strong>Regular expression</strong> to use a regular expression in your query.</li> </ul> <p>To hide the search box, click <strong>Cancel</strong>.</p> <h3 id="track-config" data-text="Change the order of tracks and hide them" tabindex="-1">Change the order of tracks and hide them</h3> <p>To declutter the performance trace, you can change the order of tracks and hide the irrelevant ones in track configuration mode.</p> <p>To move and hide tracks:</p> <ol> <li>To enter the configuration mode, right-click a track name and select <strong>Configure tracks</strong>.</li> <li>Click <span class="material-symbols-outlined" aria-hidden="true">arrow_upward</span> up or <span class="material-symbols-outlined" aria-hidden="true">arrow_downward</span> down to move a track up or down. Click <span class="material-symbols-outlined" aria-hidden="true">visibility_off</span> to hide it.</li> <li>When finished, click <strong>Finish configuring tracks</strong> at the bottom to exit the configuration mode.</li> </ol> <p>Watch the video to see this workflow in action.</p> <video playsinline autoplay class="screenshot" controls loop muted width="800"> <source src="/static/docs/devtools/performance/reference/video/track-config-mode.mp4" type="video/mp4" /> </video> <p>The <strong>Performance</strong> panel saves track configuration for new traces but not in next DevTools sessions.</p> <h3 id="main" data-text="View main thread activity" tabindex="-1">View main thread activity</h3> <p>Use the <strong>Main</strong> track to view activity that occurred on the page's main thread.</p> <p><img src="/static/docs/devtools/performance/reference/image/main-track.png" alt="The Main track." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/main-track_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Click an event to view more information about it in the <strong>Summary</strong> tab. The <strong>Performance</strong> panel outlines the selected event in blue.</p> <p><img src="/static/docs/devtools/performance/reference/image/selected-event.png" alt="More information about a main thread event in the Summary tab." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-event_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows more information about the <code translate="no" dir="ltr">get</code> function call event in the <strong>Summary</strong> tab.</p> <h3 id="flame-chart" data-text="Read the flame chart" tabindex="-1">Read the flame chart</h3> <p>The <strong>Performance</strong> panel represents main thread activity in a flame chart. The x-axis represents the recording over time. The y-axis represents the call stack. The events on top cause the events below.</p> <p><img src="/static/docs/devtools/performance/reference/image/flame-chart.png" alt="A flame chart." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/flame-chart_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows a flame chart in the <strong>Main</strong> track. A <code translate="no" dir="ltr">click</code> event caused an anonymous function call. This function, in turn, called <code translate="no" dir="ltr">onEndpointClick_</code>, which called <code translate="no" dir="ltr">handleClick_</code>, and so on.</p> <p>The <strong>Performance</strong> panel assigns scripts random colors to break up the flame chart and make it more readable. In the earlier example, function calls from one script are colored light blue. Calls from another script are colored light pink. The darker yellow represents scripting activity, and the purple event represents rendering activity. These darker yellow and purple events are consistent across all recordings.</p> <p><a href="/blog/new-in-devtools-83#long-tasks">Long tasks are also highlighted</a> with a red triangle, and with the part over 50 milliseconds shaded in red:</p> <p><img src="/static/docs/devtools/performance/reference/image/long-task.png" alt="A long task." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/long-task_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>In this example, the task took more than 400 milliseconds, so the part representing the last 350 milliseconds is shaded in red, while the initial 50 milliseconds is not.</p> <p>Additionally, the <strong>Main</strong> track shows information on CPU profiles started and stopped with <a href="/docs/devtools/console/utilities#profile-function"><code translate="no" dir="ltr">profile()</code> and <code translate="no" dir="ltr">profileEnd()</code></a> console functions.</p> <p>To hide the detailed flame chart of JavaScript calls, see <a href="#disable-js-samples">Disable JavaScript samples</a>. When JS samples are disabled, you see only the high-level events such as <code translate="no" dir="ltr">Event (click)</code> and <code translate="no" dir="ltr">Function Call</code>.</p> <h3 id="event-initiators" data-text="Track event initiators" tabindex="-1">Track event initiators</h3> <p>The <strong>Main</strong> track can show arrows that connect the following initiators and the events they caused:</p> <ul> <li>Style or layout invalidation -> <strong>Recalculate styles</strong> or <strong>Layout</strong></li> <li><strong>Request Animation Frame</strong> -> <strong>Animation Frame Fired</strong></li> <li><strong>Request Idle Callback</strong> -> <strong>Fire Idle Callback</strong></li> <li><strong>Install Timer</strong> -> <strong>Timer Fired</strong></li> <li><strong>Create WebSocket</strong> -> <strong>Send...</strong> and <strong>Receive WebSocket Handshake</strong> or <strong>Destroy WebSocket</strong></li> <li><strong>Schedule postTask</strong> -> <strong>Fire postTask</strong> or <strong>Abort postTask</strong></li> </ul> <p>To see the arrows, find either an initiator or the event it caused in the flame chart and select it.</p> <p><img src="/static/docs/devtools/performance/reference/image/event-initiators.png" alt="An arrow from the request to the firing of an idle callback." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/event-initiators_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>When selected, the Summary tab shows <strong>Initiator for</strong> links for initiators and <strong>Initiated by</strong> links for the events they caused. Click them to jump between the corresponding events.</p> <p><img src="/static/docs/devtools/performance/reference/image/initiator-link.png" alt="The 'Initiator for' link in the Summary tab." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/initiator-link_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <h3 id="hide-func" data-text="Hide functions and their children in the flame chart" tabindex="-1">Hide functions and their children in the flame chart</h3> <p>To declutter the flame chart in the <strong>Main</strong> thread, you can hide selected functions or their children:</p> <ol> <li><p>In the <strong>Main</strong> track, right-click a function and choose one of the following options or press the corresponding shortcut:</p> <ul> <li>Hide function (<code translate="no" dir="ltr">H</code>)</li> <li>Hide children (<code translate="no" dir="ltr">C</code>)</li> <li>Hide repeating children (<code translate="no" dir="ltr">R</code>)</li> <li>Reset children (<code translate="no" dir="ltr">U</code>)</li> <li>Reset trace (<code translate="no" dir="ltr">T</code>)</li> <li>Add script to ignore list (<code translate="no" dir="ltr">I</code>)</li> </ul> <p><img src="/static/docs/devtools/performance/reference/image/hide-func-menu.png" alt="The context menu with options to hide the selected function or its children." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hide-func-menu_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>A <span class="material-symbols-outlined" aria-hidden="true">arrow_drop_down</span> drop-down button appears next to the function name with hidden children.</p></li> <li><p>To see the number of hidden children, hover over the <span class="material-symbols-outlined" aria-hidden="true">arrow_drop_down</span> drop-down button.</p> <p><img src="/static/docs/devtools/performance/reference/image/hidden-children.png" alt="The tooltip over the drop-down button with the number of hidden children." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hidden-children_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p></li> <li><p>To reset a function with hidden children or the whole flame chart, select the function and press <code translate="no" dir="ltr">U</code> or right-click any function and select <strong>Reset trace</strong> respectively.</p></li> </ol> <h4 id="ignore_scripts_in_the_flame_chart" data-text="Ignore scripts in the flame chart" tabindex="-1">Ignore scripts in the flame chart</h4> <p>To add a script to the ignore list, right-click a script in the chart and select <strong>Add script to ignore list</strong>.</p> <p><img src="/static/docs/devtools/performance/reference/image/ignore-script.png" alt="The context menu with the ignore script option focused." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>The chart collapses ignored scripts, marks them as <strong>On ignore list</strong>, and adds them to the <strong>Custom exclusion</strong> rules in <span class="material-symbols-outlined" aria-hidden="true">settings</span> <strong>Settings > Ignore list</strong>. Ignored scripts are saved until you remove them either from the trace or from the <strong>Custom exclusion rules</strong>.</p> <p><img src="/static/docs/devtools/performance/reference/image/ignore-script-list.png" alt="The ignore script list tab in Settings." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/ignore-script-list_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <h3 id="activities" data-text="View activities in a table" tabindex="-1">View activities in a table</h3> <p>After recording a page, you don't need to rely solely on the <strong>Main</strong> track to analyze activities. DevTools also provides three tabular views for analyzing activities. Each view gives you a different perspective on the activities:</p> <ul> <li>When you want to view the root activities that cause the most work, use <a href="#call-tree">the <strong>Call Tree</strong> tab</a>.</li> <li>When you want to view the activities where the most time was directly spent, use <a href="#bottom-up">the <strong>Bottom-Up</strong> tab</a>.</li> <li>When you want to view the activities in the order in which they occurred during the recording, use <a href="#event-log">the <strong>Event Log</strong> tab</a>.</li> </ul> <p>To help you find what you are looking for faster, all three tabs have buttons for advanced filtering next to the <strong>Filter</strong> bar:</p> <ul> <li><span class="material-symbols-outlined" aria-hidden="true">match_case</span> <strong>Match case</strong>.</li> <li><span class="material-symbols-outlined" aria-hidden="true">regular_expression</span> <strong>Regular expression</strong>.</li> <li><span class="material-symbols-outlined" aria-hidden="true">match_word</span> <strong>Match whole word</strong>.</li> </ul> <p><img src="/static/docs/devtools/performance/reference/image/advanced-filtering.png" alt="The three button for advanced filtering." width="700" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/advanced-filtering_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Each tabular view in the <strong>Performance</strong> panel shows links for activities such as functions calls. To help you debug, DevTools finds the corresponding function declarations in source files. Additionally, if the appropriate <a href="/blog/sourcemaps">source maps</a> are present and enabled, DevTools automatically finds the original files.</p> <p>Click a link to open a source file in the <strong>Sources</strong> panel.</p> <p><img src="/static/docs/devtools/performance/reference/image/link-a-source-file.png" alt="Link to a source file in the Event Log tab." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/link-a-source-file_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <aside class="note"><b>Note:</b>The next three sections all refer to the same demo. You can run the demo yourself at <a href="https://activitytabs.glitch.me/">Activity Tabs Demo</a> and see the source at <a href="https://glitch.com/edit/#!/activitytabs?path=index.html">GoogleChrome/devtools-samples/perf/activitytabs.html</a>.</aside> <h4 id="root-activities" data-text="Root activities" tabindex="-1">Root activities</h4> <p>Here's an explanation of the <em>root activities</em> concept that's mentioned in the <strong>Call Tree</strong> tab, <strong>Bottom-Up</strong> tab, and <strong>Event Log</strong> sections.</p> <p>Root activities are those which cause the browser to do some work. For example, when you click a page, the browser fires an <code translate="no" dir="ltr">Event</code> activity as the root activity. That <code translate="no" dir="ltr">Event</code> then might cause a handler to execute.</p> <p>In the <strong>Main</strong> track's flame chart, root activities are at the top of the chart. In the <strong>Call Tree</strong> and <strong>Event Log</strong> tabs, root activities are the top-level items.</p> <p>See <a href="#call-tree">The Call Tree tab</a> for an example of root activities.</p> <h4 id="call-tree" data-text="The Call Tree tab" tabindex="-1">The Call Tree tab</h4> <p>Use the <strong>Call Tree</strong> tab to view which <a href="#root-activities">root activities</a> cause the most work.</p> <p>The <strong>Call Tree</strong> tab only displays activities during the selected portion of the recording. See <a href="#select">Select a portion of a recording</a> to learn how to select portions.</p> <p><img src="/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9.png" alt="The Call Tree tab." width="800" height="863" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-call-tree-tab-eab8749a085b9_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>In this example, the top-level of items in the <strong>Activity</strong> column, such as <code translate="no" dir="ltr">Event</code>, <code translate="no" dir="ltr">Paint</code>, and <code translate="no" dir="ltr">Composite Layers</code> are root activities. The nesting represents the call stack. In this example, the <code translate="no" dir="ltr">Event</code> caused the <code translate="no" dir="ltr">Function Call</code>, which caused <code translate="no" dir="ltr">button.addEventListener</code>, which caused <code translate="no" dir="ltr">b</code>, and so on.</p> <p><strong>Self Time</strong> represents the time directly spent in that activity. <strong>Total Time</strong> represents the time spent in that activity or any of its children.</p> <p>Click <strong>Self Time</strong>, <strong>Total Time</strong>, or <strong>Activity</strong> to sort the table by that column.</p> <p>Use the <strong>Filter</strong> box to filter events by activity name.</p> <p>By default the <strong>Grouping</strong> menu is set to <strong>No Grouping</strong>. Use the <strong>Grouping</strong> menu to sort the activity table based on various criteria.</p> <p>Click <strong>Show Heaviest Stack</strong> <img src="/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551.png" alt="Show Heaviest Stack." width="30" height="26" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/show-heaviest-stack-be0d37f78551_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> to reveal another table to the right of the <strong>Activity</strong> table. Click an activity to populate the <strong>Heaviest Stack</strong> table. The <strong>Heaviest Stack</strong> table shows you which children of the selected activity took the longest time to execute.</p> <h4 id="bottom-up" data-text="The Bottom-Up tab" tabindex="-1">The Bottom-Up tab</h4> <p>Use the <strong>Bottom-Up</strong> tab to view which activities directly took up the most time in aggregate.</p> <p>The <strong>Bottom-Up</strong> tab only displays activities during the selected portion of the recording. See <a href="#select">Select a portion of a recording</a> to learn how to select portions.</p> <p><img src="/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c.png" alt="The Bottom-Up tab." width="800" height="879" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-bottom-tab-235423addbe7c_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>In the <strong>Main</strong> track flame chart of this example, you can see that almost all of the time was spent executing the three calls to <code translate="no" dir="ltr">wait()</code>. Accordingly, the top activity in the <strong>Bottom-Up</strong> tab is <code translate="no" dir="ltr">wait</code>. In the flame chart, the yellow below the calls to <code translate="no" dir="ltr">wait</code> are actually thousands of <code translate="no" dir="ltr">Minor GC</code> calls. Accordingly, you can see that in the <strong>Bottom-Up</strong> tab, the next most expensive activity is <code translate="no" dir="ltr">Minor GC</code>.</p> <p>The <strong>Self Time</strong> column represents the aggregated time spent directly in that activity, across all of its occurrences.</p> <p>The <strong>Total Time</strong> column represents aggregated time spent in that activity or any of its children.</p> <h4 id="event-log" data-text="The Event Log tab" tabindex="-1">The Event Log tab</h4> <p>Use the <strong>Event Log</strong> tab to view activities in the order in which they occurred during the recording.</p> <p>The <strong>Event Log</strong> tab only displays activities during the selected portion of the recording. See <a href="#select">Select a portion of a recording</a> to learn how to select portions.</p> <p><img src="/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d.png" alt="The Event Log tab." width="800" height="826" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-event-log-tab-d429f1b31822d_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>The <strong>Start Time</strong> column represents the point at which that activity started, relative to the start of the recording. The start time of <code translate="no" dir="ltr">1573.0 ms</code> for the selected item in this example means that activity started 1573 ms after the recording started.</p> <p>The <strong>Self Time</strong> column represents the time spent directly in that activity.</p> <p>The <strong>Total Time</strong> columns represents time spent directly in that activity or in any of its children.</p> <p>Click <strong>Start Time</strong>, <strong>Self Time</strong>, or <strong>Total Time</strong> to sort the table by that column.</p> <p>Use the <strong>Filter</strong> box to filter activities by name.</p> <p>Use the <strong>Duration</strong> menu to filter out any activities that took less than 1 ms or 15 ms. By default the <strong>Duration</strong> menu is set to <strong>All</strong>, meaning all activities are shown.</p> <p>Disable the <strong>Loading</strong>, <strong>Scripting</strong>, <strong>Rendering</strong>, or <strong>Painting</strong> checkboxes to filter out all activities from those categories.</p> <h3 id="timings" data-text="View timings" tabindex="-1">View timings</h3> <p>On the <strong>Timings</strong> track, view important markers such as:</p> <ul> <li><a href="https://developer.mozilla.org/docs/Glossary/First_paint">First Paint (FP)</a></li> <li><a href="https://web.dev/articles/fcp">First Contentful Paint (FCP)</a></li> <li><a href="https://web.dev/articles/lcp">Largest Contentful Paint (LCP)</a></li> <li><a href="https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded Event (DCL)</a></li> <li><a href="https://developer.mozilla.org/docs/Web/API/Window/load_event">Onload Event (L)</a></li> <li>Your custom <a href="https://developer.mozilla.org/docs/Web/API/Performance/mark"><code translate="no" dir="ltr">performance.mark()</code></a> calls. An individual mark with tooltip is shown below at 813.44 ms, labelled <strong>Starting to run JavaScript</strong>.</li> <li>Your custom <a href="https://developer.mozilla.org/docs/Web/API/Performance/measure"><code translate="no" dir="ltr">performance.measure()</code></a> calls. A yellow span is shown below, labelled <strong>Slow Interaction</strong>.</li> </ul> <p><img src="/static/docs/devtools/performance/reference/image/performance-mark-and-measure.png" alt="Markers in the Timings track." width="800" class="screenshot" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/performance-mark-and-measure_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Select a marker to see more details in the <strong>Summary</strong> tab, including its timestamp, total time, self time, and the <a href="https://developer.mozilla.org/docs/Web/API/Performance/mark#detail"><code translate="no" dir="ltr">detail</code> object</a>. For <code translate="no" dir="ltr">performance.mark()</code> and <code translate="no" dir="ltr">performance.measure()</code> calls, the tab also shows stack traces.</p> <h3 id="interactions" data-text="View interactions" tabindex="-1">View interactions</h3> <p>View user interactions on the <strong>Interactions</strong> track to track down potential responsiveness issues.</p> <p>To view interactions:</p> <ol> <li><a href="/docs/devtools/open">Open DevTools</a>, for example, on this <a href="https://coffee-cart.app/?ad=1">demo page</a>.</li> <li>Open the <strong>Performance</strong> panel and <a href="/docs/devtools/evaluate-performance#record">start a recording</a>.</li> <li>Click an element (coffee) and stop the recording.</li> <li>Find the <strong>Interactions</strong> track in the timeline.</li> </ol> <p><img src="/static/docs/devtools/performance/reference/image/interactions-track.png" alt="The Interactions track." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/interactions-track_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>In this example, the <strong>Interactions</strong> track shows the <strong>Pointer</strong> interaction. Interactions have whiskers that indicate input and presentation delays at processing time boundaries. Hover over the interaction to see a tooltip with input delay, processing time, and presentation delay.</p> <p>The <strong>Interactions</strong> track also shows <a href="https://web.dev/articles/inp">Interaction to Next Paint (INP)</a> warnings for interactions longer than 200 milliseconds in the <strong>Summary</strong> tab and in a tooltip on hover:</p> <p><img src="/static/docs/devtools/performance/reference/image/inp-warning.png" alt="The INP warning." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/inp-warning_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>The <strong>Interactions</strong> track marks the interactions over 200 milliseconds with a red triangle in the top right corner.</p> <h3 id="layout-shifts" data-text="View layout shifts" tabindex="-1">View layout shifts</h3> <p>View layout shifts on the <strong>Layout shifts</strong> track. Shifts are shown as purple diamonds and are grouped in <a href="https://web.dev/blog/evolving-cls">clusters</a> (purple lines) based on their proximity on the timeline.</p> <p><img src="/static/docs/devtools/performance/reference/image/layout-shifts.png" alt="The Layout shifts track." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/layout-shifts_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>To highlight an element that caused a layout shift in the viewport, hover over the corresponding diamond.</p> <p>To see more information about a layout shift or shifts in the <strong>Summary</strong> tab with timings, scores, elements, and potential culprits, click the corresponding diamond or cluster.</p> <p>For more information, see <a href="https://web.dev/articles/cls">Cumulative Layout Shift (CLS)</a>.</p> <h3 id="animations" data-text="View animations" tabindex="-1">View animations</h3> <p>View animations on the <strong>Animations</strong> track. Animations are named as corresponding CSS properties or elements if any, for example, <code translate="no" dir="ltr">transform</code> or <code translate="no" dir="ltr">my-element</code>. Non-compositing animations are marked with red triangles in the top right corner.</p> <p><img src="/static/docs/devtools/performance/reference/image/animations-track.png" alt="The Animations track with a non-compositing animation selected." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/animations-track_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Select an animation to see more details in the <strong>Summary</strong> tab, including reasons for compositing failures.</p> <h3 id="gpu" data-text="View GPU activity" tabindex="-1">View GPU activity</h3> <p>View GPU activity in the <strong>GPU</strong> section.</p> <p><img src="/static/docs/devtools/performance/reference/image/the-gpu-section-28d7070b848aa.svg" alt="The GPU section." width="800" height="660"></p> <h3 id="raster" data-text="View raster activity" tabindex="-1">View raster activity</h3> <p>View raster activity in the <strong>Thread Pool</strong> section.</p> <p><img src="/static/docs/devtools/performance/reference/image/raster.png" alt="Raster activity in the 'Thread Pool' section." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/raster_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <h3 id="fps" data-text="Analyze frames per second (FPS)" tabindex="-1">Analyze frames per second (FPS)</h3> <p>DevTools provides numerous ways to analyze frames per second:</p> <ul> <li>Use <a href="#frames">the <strong>Frames</strong> section</a> to view how long a particular frame took.</li> <li>Use the <strong>FPS meter</strong> for a real time estimate of FPS as the page runs. See <a href="#fps-meter">View frames per second in real time with the FPS meter</a>.</li> </ul> <h4 id="frames" data-text="The Frames section" tabindex="-1">The Frames section</h4> <p>The <strong>Frames</strong> section tells you exactly how long a particular frame took.</p> <p>Hover over a frame to view a tooltip with more information about it.</p> <p><img src="/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a.png" alt="Hovering over a frame." width="800" height="542" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-frame-c3a15e9b0043a_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows a tooltip when you hover over a frame.</p> <p>The <strong>Frames</strong> section can show four types of frames:</p> <ol> <li><strong>Idle frame (white)</strong>. No changes.</li> <li><strong>Frame (green)</strong>. Rendered as expected and in time.</li> <li><strong>Partially presented frame (yellow with a sparse wide dash-line pattern)</strong>. Chrome did its best to render at least some visual updates in time. For example, in case the work of the main thread of the renderer process (canvas animation) is late but the compositor thread (scrolling) is in time.</li> <li><strong>Dropped frame (red with a dense solid-line pattern)</strong>. Chrome can't render the frame in reasonable time.</li> </ol> <p><img src="/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934.png" alt="Hovering over a partially presented frame." width="800" height="529" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/hovering-a-partially-pre-0cafd6bb3d934_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows a tooltip when you hover over a partially presented frame.</p> <p>Click a frame to view even more information about the frame in the <strong>Summary</strong> tab. DevTools outlines the selected frame in blue.</p> <p><img src="/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9.png" alt="Viewing a frame in the Summary tab." width="800" height="596" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-frame-the-summa-0be0c62ec76f9_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <h3 id="network" data-text="View network requests" tabindex="-1">View network requests</h3> <p>Expand the <strong>Network</strong> section to view a waterfall of network requests that occurred during the performance recording.</p> <p><img src="/static/docs/devtools/performance/reference/image/selected-request.png" alt="A request selected in the Network track, with the Summary tab open." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/selected-request_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Next to the <strong>Network</strong> track name, there's a legend with color-coded request types.</p> <p>Render blocking requests are marked with a red triangle in the upper right corner.</p> <p>Hover over a request to see a tooltip with:</p> <ul> <li>Request's URL and the total time it took to execute it.</li> <li>Priority or a change of priority, for example, <code translate="no" dir="ltr">Medium -> High</code>.</li> <li>Whether the request is <code translate="no" dir="ltr"><span style="color:red">Render blocking</span></code> or not.</li> <li>A breakdown of request timings, described later.</li> </ul> <p>When you click a request, the <strong>Network</strong> track draws an arrow from its initiator to the request.</p> <p>Additionally, the <strong>Performance</strong> panel shows you the <strong>Summary</strong> tab with more information about the request, including but not limited to <strong>Initial Priority</strong> and (final) <strong>Priority</strong> fields. If their values differ, the fetch priority of the request has changed during the recording. For more information, see <a href="https://web.dev/articles/fetch-priority">Optimizing resource loading with the Fetch Priority API</a>.</p> <p>The <strong>Summary</strong> tab also shows a breakdown of the request's timings.</p> <p><img src="/static/docs/devtools/performance/reference/image/request-timings.png" alt="The breakdown of request timings in the Summary tab." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/request-timings_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>The request for <code translate="no" dir="ltr">www.google.com</code> is represented by a line on the left (<code translate="no" dir="ltr">|–</code>), a bar in the middle with a dark portion and a light portion, and a line on the right (<code translate="no" dir="ltr">–|</code>).</p> <p>You can find another timings breakdown in the <strong>Network</strong> tab. Right-click the request in the <strong>Network</strong> track or its URL in the <strong>Summary</strong> tab and click <strong>Reveal in Network panel</strong>. DevTools takes you to the <strong>Network</strong> panel and selects the corresponding request. Open its <strong>Timing</strong> tab.</p> <p><img src="/static/docs/devtools/performance/reference/image/network-timing-tab.png" alt="The Timing tab of a request in the Network panel." width="800" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/network-timing-tab_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Here's how these two breakdowns map to each other:</p> <ul> <li>The left line (<code translate="no" dir="ltr">|–</code>) is everything up to the <code translate="no" dir="ltr">Connection start</code> group of events, inclusive. In other words, it's everything before <code translate="no" dir="ltr">Request Sent</code>.</li> <li>The light portion of the bar is <code translate="no" dir="ltr">Request sent</code> and <code translate="no" dir="ltr">Waiting for server response</code>.</li> <li>The dark portion of the bar is <code translate="no" dir="ltr">Content download</code>.</li> <li>The right line (<code translate="no" dir="ltr">–|</code>) is the time spent waiting for the main thread. The <strong>Network</strong> > <strong>Timing</strong> tab doesn't show it.</li> </ul> <h3 id="memory" data-text="View memory metrics" tabindex="-1">View memory metrics</h3> <p>Enable the <strong>Memory</strong> checkbox to view memory metrics from the last recording.</p> <p><img src="/static/docs/devtools/performance/reference/image/the-memory-checkbox-fa1d7fc7f4bda.svg" alt="The Memory checkbox." width="800" height="468"></p> <p>DevTools displays a new <strong>Memory</strong> chart, above the <strong>Summary</strong> tab. There's also a new chart below the <strong>NET</strong> chart, called <strong>HEAP</strong>. The <strong>HEAP</strong> chart provides the same information as the <strong>JS Heap</strong> line in the <strong>Memory</strong> chart.</p> <p><img src="/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e.png" alt="Memory metrics." width="800" height="493" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/memory-metrics-45572fb66914e_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows memory metrics above the <strong>Summary</strong> tab.</p> <p>The colored lines on the chart map to the colored checkboxes above the chart. Disable a checkbox to hide that category from the chart.</p> <p>The chart only displays the region of the recording that is selected. In the earlier example, the <strong>Memory</strong> chart shows only the memory usage for the start of the recording, up to around the 1000ms mark.</p> <h3 id="duration" data-text="View the duration of a portion of a recording" tabindex="-1">View the duration of a portion of a recording</h3> <p>When analyzing a section like <strong>Network</strong> or <strong>Main</strong>, 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.</p> <p><img src="/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445.png" alt="Viewing the duration of a portion of a recording." width="800" height="606" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-duration-a-port-eca1087d17445_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>In this example, the <code translate="no" dir="ltr">488.53ms</code> timestamp at the bottom of the selected portion indicates how long that portion took.</p> <h3 id="view-screenshot" data-text="View a screenshot" tabindex="-1">View a screenshot</h3> <p>See <a href="#screenshots">Capture screenshots while recording</a> to learn how to enable screenshots.</p> <p>Hover over the <strong>Timeline overview</strong> to view a screenshot of how the page looked during that moment of the recording. The <strong>Timeline overview</strong> is the section that contains the <strong>CPU</strong>, <strong>FPS</strong>, and <strong>NET</strong> charts.</p> <p><img src="/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b.png" alt="Viewing a screenshot." width="800" height="658" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-54fd1e28b997b_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>You can also view screenshots by clicking a frame in the <strong>Frames</strong> section. DevTools displays a small version of the screenshot in the <strong>Summary</strong> tab.</p> <p><img src="/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf.png" alt="Viewing a screenshot in the Summary tab." width="800" height="851" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/viewing-screenshot-the-a74a4646608cf_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows the screenshot for the <code translate="no" dir="ltr">195.5ms</code> frame in the <strong>Summary</strong> tab when you click it in the <strong>Frames</strong> section.</p> <p>Click the thumbnail in the <strong>Summary</strong> tab to zoom in on the screenshot.</p> <p><img src="/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358.png" alt="Zooming in on a screenshot from the Summary tab." width="800" height="851" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/zooming-on-screenshot-1d87073b99358_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows a zoomed-in screenshot after you click its thumbnail in the <strong>Summary</strong> tab.</p> <h3 id="layers" data-text="View layers information" tabindex="-1">View layers information</h3> <p>To view advanced layers information about a frame:</p> <ol> <li><a href="#paint">Enable advanced paint instrumentation</a>.</li> <li>Select a frame in the <strong>Frames</strong> section. DevTools displays information about its layers in the new <strong>Layers</strong> tab, next to the <strong>Event Log</strong> tab.</li> </ol> <p><img src="/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3.png" alt="The Layers tab." width="800" height="758" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-layers-tab-d1bf5e779f4f3_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Hover over a layer to highlight it in the diagram.</p> <p><img src="/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f.png" alt="Highlighting a layer." width="800" height="689" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/highlighting-layer-3b117fbca7a6f_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This example shows the layer <strong>#39</strong> highlighted as you hover over it.</p> <p>To move the diagram:</p> <ul> <li>Click <strong>Pan Mode</strong> <img src="/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c.png" alt="Pan Mode." width="32" height="32" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/pan-mode-8bf4e93239e5c_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> to move along the X and Y axes.</li> <li>Click <strong>Rotate Mode</strong> <img src="/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b.png" alt="Rotate Mode." width="32" height="32" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/rotate-mode-84206f82c854b_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> to rotate along the Z axis.</li> <li>Click <strong>Reset Transform</strong> <img src="/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784.png" alt="Reset Transform." width="30" height="30" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/reset-transform-d58bba9522784_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> to reset the diagram to its original position.</li> </ul> <p>See layer analysis in action:</p> <p><devsite-video video-id="6je49J67TQk"></devsite-video></p> <h3 id="paint-profiler" data-text="View paint profiler" tabindex="-1">View paint profiler</h3> <p>To view advanced information about a paint event:</p> <ol> <li><a href="#paint">Enable advanced paint instrumentation</a>.</li> <li>Select a <strong>Paint</strong> event in the <strong>Main</strong> track.</li> </ol> <p><img src="/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c.png" alt="The Paint Profiler tab." width="800" height="713" srcset="https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_36.png 36w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_48.png 48w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_72.png 72w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_96.png 96w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_480.png 480w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_720.png 720w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_856.png 856w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_960.png 960w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/performance/reference/image/the-paint-profiler-tab-36054fb3a177c_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <h2 id="rendering" data-text="Analyze rendering performance with the Rendering tab" tabindex="-1">Analyze rendering performance with the Rendering tab</h2> <p>Use the <strong>Rendering</strong> tab's features to help visualize your page's rendering performance.</p> <p><a href="/docs/devtools/rendering#open-rendering">Open the <strong>Rendering</strong> tab</a>.</p> <h3 id="fps-meter" data-text="View frames per second in real time with the FPS meter" tabindex="-1">View frames per second in real time with the FPS meter</h3> <p>The <strong>Frame rendering stats</strong> is an overlay that appears in the top-right corner of your viewport. It provides a real time estimate of FPS as the page runs.</p> <p>See <a href="/docs/devtools/rendering#frame-rendering-stats">Frame rendering stats</a>.</p> <h3 id="paint-flash" data-text="View painting events in real time with Paint Flashing" tabindex="-1">View painting events in real time with Paint Flashing</h3> <p>Use <strong>Paint Flashing</strong> to get a real time view of all paint events on the page.</p> <p>See <a href="/docs/devtools/rendering#paint-flashing">Paint flashing</a>.</p> <h3 id="layer-border" data-text="View an overlay of layers with Layer Borders" tabindex="-1">View an overlay of layers with Layer Borders</h3> <p>Use <strong>Layer Borders</strong> to view an overlay of layer borders and tiles on top of the page.</p> <p>See <a href="/docs/devtools/rendering#layer-borders">Layer borders</a>.</p> <h3 id="find_scroll_performance_issues_in_real_time" data-text="Find scroll performance issues in real time" tabindex="-1">Find scroll performance issues in real time</h3> <p>Use <strong>Scrolling Performance Issues</strong> 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.</p> <p>See <a href="/docs/devtools/rendering#scrolling-performance-issues">Scrolling performance issues</a>.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2024-06-28 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-06-28 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400036&template=1897236" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400036&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/deprecated" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Archive </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.dev/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-5QF3RT2", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Chrome DevTools", "signedIn": "False", "tenant": "chrome", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="Y6rpmnG6AkU9/zE3glD4T4dltdjTKt"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","developer.chrome.com","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Cloud__enable_cloudx_ping","CloudShell__cloud_code_overflow_menu","Profiles__enable_completecodelab_endpoint","Profiles__enable_page_saving","Cloud__enable_legacy_calculator_redirect","DevPro__enable_cloud_innovators_plus","Profiles__enable_complete_playlist_endpoint","Search__enable_suggestions_from_borg","Profiles__enable_release_notes_notifications","EngEduTelemetry__enable_engedu_telemetry","Analytics__enable_clearcut_logging","Search__enable_ai_eligibility_checks","Profiles__enable_stripe_subscription_management","BookNav__enable_tenant_cache_key","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__developers_footer_image","DevPro__enable_developer_subscriptions","Cloud__enable_cloudx_experiment_ids","OnSwitch__enable","Experiments__reqs_query_experiments","Profiles__enable_completequiz_endpoint","MiscFeatureFlags__developers_footer_dark_image","Profiles__require_profile_eligibility_for_signin","Search__enable_page_map","TpcFeatures__enable_unmirrored_page_left_nav","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_join_program_group_endpoint","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_public_developer_profiles","MiscFeatureFlags__emergency_css","Profiles__enable_developer_profiles_callout","CloudShell__cloud_shell_button","MiscFeatureFlags__enable_view_transitions","Cloud__enable_cloud_dlp_service","Profiles__enable_awarding_url","MiscFeatureFlags__enable_firebase_utm","Cloud__enable_llm_concierge_chat","Cloud__enable_free_trial_server_call","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_recognition_badges","TpcFeatures__enable_mirror_tenant_redirects","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_facet_chat","Cloud__enable_cloud_shell","Profiles__enable_profile_collections","MiscFeatureFlags__enable_variable_operator","Concierge__enable_pushui"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[53,"chrome","Chrome for Developers","developer.chrome.com",null,"chrome-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[69,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-5QF3RT2"],null,null,null,null,null,[["GTM-5QF3RT2",1]],1]],null,4],null,null,1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Performance features reference | Chrome DevTools | Chrome for Developers