Understand errors and warnings better with Console insights | 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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/docs/devtools/console/understand-messages"><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/console/understand-messages" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/devtools/console/understand-messages" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/devtools/console/understand-messages?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=vi" /><title>Understand errors and warnings better with Console insights  |  Chrome DevTools  |  Chrome for Developers</title> <meta property="og:title" content="Understand errors and warnings better with Console insights  |  Chrome DevTools  |  Chrome for Developers"><meta name="description" content="Understand errors and warnings in the Console better with Gemini."> <meta property="og:description" content="Understand errors and warnings in the Console better with Gemini."><meta property="og:url" content="https://developer.chrome.com/docs/devtools/console/understand-messages"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2024-05-10", "headline": "Understand errors and warnings better with Console insights" } </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": "Understand errors and warnings better with Console insights", "item": "https://developer.chrome.com/docs/devtools/console/understand-messages" }] } </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> <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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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" track-metadata-eventdetail="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " 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" track-metadata-eventdetail="https://developer.chrome.com/blog" class="devsite-tabs-content gc-analytics-event " 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" track-metadata-eventdetail="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " 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> <a href="#" role="button" aria-haspopup="true" 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"></a> <div class="devsite-tabs-dropdown" 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> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" track-metadata-eventdetail="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " 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" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" class="devsite-tabs-content gc-analytics-event " 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 class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/devtools/dom" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/dom" class="devsite-tabs-content gc-analytics-event " 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> <a href="#" role="button" aria-haspopup="true" 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"></a> <div class="devsite-tabs-dropdown" 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/ai-assistance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/ai-assistance" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> AI assistance </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" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/security" class="devsite-tabs-content gc-analytics-event " 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> <a href="#" role="button" aria-haspopup="true" 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"></a> <div class="devsite-tabs-dropdown" 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" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/settings" class="devsite-tabs-content gc-analytics-event " 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" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/accessibility/reference" class="devsite-tabs-content gc-analytics-event " 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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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/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 devsite-nav-experimental"><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><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><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><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><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><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><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><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" 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>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/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/memory-101" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/memory-problems/memory-101" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/memory-problems/memory-101" ><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/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> </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/ai-assistance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI assistance" track-type="navMenu" 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/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" 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"> Understand errors and warnings better with Console insights </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="Yang Guo" src="https://web.dev/images/authors/yangguo.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Yang Guo </span> <div class="dcc-author__links"> <a href="https://twitter.com/hashseed" aria-label="Yang Guo 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/hashseed" aria-label="Yang Guo 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://www.linkedin.com/in/ouggnay" aria-label="Yang Guo on LinkedIn" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 200 200"> <title>LinkedIn</title> <path d="M185.2 0H14.8C6.6 0 0 6.4 0 14.3v171.3c0 7.9 6.6 14.3 14.8 14.3h170.4c8.1 0 14.8-6.4 14.8-14.3V14.3C199.9 6.4 193.3 0 185.2 0zM60.6 167.3H30.4V77.1h30.2v90.2zM45.5 64.8h-.2c-10.1 0-16.7-6.9-16.7-15.6 0-8.8 6.7-15.6 17.1-15.6 10.3 0 16.7 6.7 16.9 15.6 0 8.6-6.5 15.6-17.1 15.6zm124 102.5h-30.2V119c0-12.1-4.4-20.4-15.3-20.4-8.4 0-13.3 5.6-15.5 11-.8 1.9-1 4.6-1 7.3v50.4H77.3s.4-81.8 0-90.3h30.2v12.8c4-6.1 11.2-14.9 27.2-14.9 19.9 0 34.8 12.9 34.8 40.6v51.8zm-62.2-77.1c0-.1.1-.2.2-.3v.3h-.2z" fill="currentColor" /> </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 class="dcc-author"> <img class="devsite-landing-row-item-icon" alt="Jecelyn Yeen" src="https://web.dev/images/authors/jecelynyeen.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Jecelyn Yeen </span> <div class="dcc-author__links"> <a href="https://twitter.com/jecfish" aria-label="Jecelyn Yeen 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/jecfish" aria-label="Jecelyn Yeen 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://jec.fish/" aria-label="Jecelyn Yeen's homepage" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30"> <title>Homepage</title> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </svg></a> </div> </div> </div> </div></p> <p>Ask Gemini to provide insights right in the DevTools <strong>Console</strong>, so you can better understand errors and warnings.</p> <p>See also <a href="#data-use">How your data is used</a> and <a href="#known-issues">Known issues</a>.</p> <h2 id="requirements" data-text="Requirements" tabindex="-1">Requirements</h2> <p>To use the <strong>Console insights</strong> feature, make sure that you:</p> <p></p> <p> <aside class="success"> Your location (<code translate="no" dir="ltr">SG</code>) is supported. </aside> </p> <ul> <li>Are at least 18 years old and are in one of the supported locations.</li> <li>Using Chrome version 125 or later.</li> <li>Are signed into Chrome with your Google Account.</li> <li>Have <strong>English (US)</strong> selected in <span class="material-symbols-outlined" aria-hidden="true">settings</span> <strong>Settings</strong> > <strong>Preferences</strong> > <strong>Appearance</strong> > <strong>Language</strong> in DevTools. <div> <devsite-expandable class="arrow-icon"> <h4 class="showalways" id="languages-setting-location..." data-text="Languages setting location..." tabindex="-1">Languages setting location...</h4> <img src="/static/docs/devtools/console/understand-messages/image/lang-setting.png" alt="Language setting in DevTools." width="700" srcset="https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_36.png 36w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_48.png 48w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_72.png 72w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_96.png 96w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_480.png 480w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_720.png 720w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_856.png 856w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_960.png 960w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/lang-setting_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </devsite-expandable> </div></li> <li><a href="#turn-on-understand-messages">Turned on 'Console insights'</a> in DevTools.</li> </ul> <h2 id="turn-on-understand-messages" data-text="Turn on 'Console insights'" tabindex="-1">Turn on 'Console insights'</h2> <p>If you haven't yet turned on the <strong>Console insights</strong>, the first time you use the feature, it will prompt you to do so and provide a link to <span class="material-symbols-outlined" aria-hidden="true">settings</span> <strong>Settings</strong> > <a href="/docs/devtools/settings/ai-innovations"><strong>AI innovations</strong></a>. Expand the <strong>Console insights</strong> section, read the considerations, and turn on the corresponding toggle.</p> <p><img src="/static/docs/devtools/console/understand-messages/image/turn-on-insights.png" alt="The 'Console insights' toggle in settings." width="700" srcset="https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_36.png 36w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_48.png 48w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_72.png 72w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_96.png 96w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_480.png 480w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_720.png 720w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_856.png 856w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_960.png 960w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/turn-on-insights_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>If you can't turn on the toggle, make sure to sign in to Chrome with your Google Account.</p> <h2 id="get-explanations" data-text="Get explanations for console messages" tabindex="-1">Get explanations for console messages</h2> <p>To get an explanation, do the following in Chrome:</p> <ol> <li>Visit this <a href="https://bubble-jingle.web.app/">demo page</a>.</li> <li><a href="/docs/devtools/open">Open DevTools</a> and inspect the page.</li> <li><a href="/docs/devtools/console/reference#open">Open the <strong>Console</strong></a> to inspect console messages.</li> <li><p>On the demo page, click inside the search box. The drop-down menu fails to fetch and the <strong>Console</strong> shows an error.</p> <p><img src="/static/docs/devtools/console/understand-messages/image/error.png" alt="An error in the Console when a drop-down menu fails to fetch." width="800" srcset="https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_36.png 36w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_48.png 48w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_72.png 72w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_96.png 96w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_480.png 480w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_720.png 720w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_856.png 856w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_960.png 960w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/error_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p></li> <li><p>Hover over the CORS error message. An <img src="/static/docs/devtools/console/understand-messages/image/lightbulb-spark.svg" class="inline-icon" alt="Lightbulb spark."> <strong>Understand this error</strong> button appears to the right of the error message.</p> <p><img src="/static/docs/devtools/console/understand-messages/image/explain-button.png" alt="The 'Understand this error' button." width="800" srcset="https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_36.png 36w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_48.png 48w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_72.png 72w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_96.png 96w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_480.png 480w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_720.png 720w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_856.png 856w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_960.png 960w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explain-button_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p></li> <li><p>To get an explanation of the error, click <img src="/static/docs/devtools/console/understand-messages/image/lightbulb-spark.svg" class="inline-icon" alt="Lightbulb spark."> <strong>Understand this error</strong>.</p> <p>If you are launching <strong>Console insights</strong> for the first time, it will prompt you to <a href="#turn-on-understand-messages">turn on the feature in settings</a>.</p></li> <li><p>After a few seconds, an explanation will appear below the console error.</p> <p><img src="/static/docs/devtools/console/understand-messages/image/explanation.png" alt="AI-generated explanation of the error." width="800" srcset="https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_36.png 36w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_48.png 48w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_72.png 72w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_96.png 96w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_480.png 480w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_720.png 720w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_856.png 856w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_960.png 960w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/explanation_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p></li> </ol> <p>To see what data Gemini used to generate an explanation, expand the <strong>Data used to understand this message</strong> section.</p> <p><img src="/static/docs/devtools/console/understand-messages/image/used-data.png" alt="The expanded 'Data used to understand this message' section." width="800" srcset="https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_36.png 36w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_48.png 48w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_72.png 72w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_96.png 96w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_480.png 480w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_720.png 720w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_856.png 856w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_960.png 960w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/used-data_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>If you don't think the explanation is satisfactory, you can click <strong>Use search instead</strong> to open a new tab with search results for the error.</p> <aside class="note"><strong>Note:</strong><span> To report the generated content, click <span class="material-symbols-outlined" aria-hidden="true">report</span> <strong>Report legal issue</strong> and follow instructions in a new tab.</span></aside> <h2 id="data-use" data-text="How your data is used" tabindex="-1">How your data is used</h2> <p>This notice and our <a href="https://policies.google.com/privacy">privacy notice</a> describe how Chrome DevTools handles your data. Read them carefully.</p> <p>Chrome DevTools uses the console message, associated stack trace, related source code, and the associated network headers as input data. When you use <strong>Understand this message</strong>, Google collects this input data, generated output, related feature usage information, and your feedback. Google uses this data to provide, improve, and develop Google products and services and machine learning technologies, including Google's enterprise products such as Google Cloud.</p> <p>To help with quality and improve our products, human reviewers may read, annotate, and process the above-mentioned input data, generated output, related feature usage information, and your feedback. Don't include sensitive (for example, confidential) or personal information that can be used to identify you or others in your prompts or feedback. Your data will be stored in a way where Google cannot tell who provided it and can no longer fulfill any deletion requests and will be retained for up to 18 months. We may not collect data to improve our product if your Google Account is managed by an organization.</p> <p>As you try <strong>Understand this message</strong>, here are key things to know:</p> <ul> <li>Chrome DevTools uses console message, associated stack trace, related source code, and the associated network headers to provide answers.</li> <li>Chrome DevTools uses experimental technology, and may generate inaccurate or offensive information that doesn't represent Google's views. Voting on the responses will help make this feature better.</li> <li>This feature is experimental and subject to future changes.</li> <li><a href="https://support.google.com/legal/answer/13505487">Use generated code snippets with caution</a>.</li> </ul> <p>To use the feature, you need to agree that your use of <strong>Understand this message</strong> is subject to the <a href="https://policies.google.com/terms">Google Terms of Service</a>.</p> <h2 id="known-issues" data-text="Known issues" tabindex="-1">Known issues</h2> <p>Chrome DevTools uses Google's large language models to generate an explanation. Large language models, or LLMs, are a new and active area of research. The responses that LLMs generate are sometimes questionable or even outright wrong. It is important that you understand that the results may be inaccurate or misleading, so always double check!</p> <h3 id="wrong-explanation" data-text="Wrong explanation" tabindex="-1">Wrong explanation</h3> <p>LLMs generate content that sounds likely and plausible. In most cases, this content contains truthful and useful insights that can help you understand an error or warning in the relevant context. Modern web development and debugging is a challenging craft with a high level of complexity that requires years of experience to become proficient in. Sometimes, the responses that LLMs produce sound convincing but are actually misleading or meaningless to a human web developer. We are doing our best to continuously improve the quality and correctness of generated insights. You can help us by submitting feedback when you encounter wrong explanations.</p> <h3 id="prompt-injection" data-text="Prompt injection" tabindex="-1">Prompt injection</h3> <p>Many of LLM applications are susceptible to a form of abuse known as prompt injection. This feature is no different. It is possible to trick the LLM into accepting instructions that are not intended by the developers.</p> <p>See the following harmless example:</p> <p><img src="/static/docs/devtools/console/understand-messages/image/prompt-injection.png" alt="An example of a prompt injection." width="800" srcset="https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_36.png 36w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_48.png 48w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_72.png 72w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_96.png 96w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_480.png 480w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_720.png 720w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_856.png 856w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_960.png 960w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/console/understand-messages/image/prompt-injection_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></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-05-10 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-05-10 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="FscQpmKzFE4wemsyVKfGdLpQT4Hfcx"> (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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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,["Profiles__enable_profile_collections","TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_project_variables","Cloud__enable_cloud_shell","BookNav__enable_tenant_cache_key","Search__enable_page_map","MiscFeatureFlags__enable_firebase_utm","CloudShell__cloud_code_overflow_menu","Profiles__enable_completecodelab_endpoint","TpcFeatures__enable_required_headers","CloudShell__cloud_shell_button","Profiles__enable_recognition_badges","Cloud__enable_free_trial_server_call","Cloud__enable_llm_concierge_chat","Profiles__enable_page_saving","Profiles__require_profile_eligibility_for_signin","Profiles__enable_dashboard_curated_recommendations","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloud_facet_chat","Profiles__enable_awarding_url","Experiments__reqs_query_experiments","Profiles__enable_release_notes_notifications","Analytics__enable_clearcut_logging","Search__enable_dynamic_content_confidential_banner","Search__enable_suggestions_from_borg","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__developers_footer_image","Profiles__enable_developer_profiles_callout","DevPro__enable_cloud_innovators_plus","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_explain_this_code","Concierge__enable_pushui","MiscFeatureFlags__enable_view_transitions","Cloud__enable_cloudx_experiment_ids","MiscFeatureFlags__enable_variable_operator","Profiles__enable_public_developer_profiles","DevPro__enable_developer_subscriptions","Cloud__enable_legacy_calculator_redirect","OnSwitch__enable","MiscFeatureFlags__emergency_css","Cloud__enable_cloudx_ping","Search__enable_ai_eligibility_checks","Cloud__enable_cloud_shell_fte_user_flow"],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]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Understand errors and warnings better with Console insights | Chrome DevTools | Chrome for Developers