Documentation | Docs | Chrome for Developers

<!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"><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" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs?hl=vi" /><title>Documentation  |  Docs  |  Chrome for Developers</title> <meta property="og:title" content="Documentation  |  Docs  |  Chrome for Developers"><meta name="description" content="Code samples, guides, and API reference you need for whatever you're building."> <meta property="og:description" content="Code samples, guides, and API reference you need for whatever you're building."><meta property="og:url" content="https://developer.chrome.com/docs"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Documentation" } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="dcc-landing" template="landing" theme="chrome-theme" type="article" appearance layout="full" 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="Docs" 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 devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <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> </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="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> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /css/docs-landing.css */ /* * Temporary style changes for Docs landing page. This primarily is written * for 4-up style rows. */ @media screen and (min-width: 841px) and (max-width: 1200px) { .dcc-bullet-list.dcc-4-up li { list-style:none; } .dcc-bullet-list.dcc-4-up ul { padding:0; } .dcc-bullet-list.dcc-4-up .devsite-landing-row-item { padding: 14px; } .dcc-large-icon-left .devsite-landing-row-item-icon { font-size: 48px; height: 48px; width: 48px; } .dcc-large-icon-left .devsite-landing-row-header-icon-container, .dcc-large-icon-left .devsite-landing-row-item-icon-container { width: 52px; } .dcc-large-icon-left .devsite-landing-row-item-no-media h3 { font-size: 20px; } .dcc-large-icon-left.devsite-landing-row-cards .devsite-landing-row-item { padding: 32px 16px; } .dcc-icon-list.dcc-4-up .devsite-landing-row-item { padding: 14px; } .dcc-icon-list.dcc-4-up .devsite-landing-row-item-list-item-icon-container { display: none; } .dcc-icon-list.dcc-4-up h3 { font-size: 20px; } .dcc-icon-list.dcc-4-up .devsite-landing-row-item-list-item-description { max-width: 100%; } .dcc-icon-list.dcc-4-up .devsite-landing-row-item-list-item-buttons a { text-wrap: balance; text-align: left; } } @media screen and (min-width: 841px) and (max-width: 900px) { .dcc-bullet-list.dcc-4-up h4 { padding: 0 6px; } .dcc-large-icon-left .button { padding: 12px 20px; } } /* The following changes should be site-wide. Less important than what's above */ @media screen and (max-width: 1000px) { #documentation { font-size: 50px; } .dcc-docs-landing h2, .dcc-docs-landing .devsite-landing-row-large-headings h3, .dcc-docs-landing h1 { font-size:32px; } .dcc-docs-landing .devsite-landing-row-item-no-media h3 { font-size: 22px; } } </style> <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> </ul> </div> <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> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-50 devsite-landing-row-hero devsite-landing-row-no-image-background dcc-docs-landing" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <picture> <source class="devsite-dark-theme" srcset="https://developer.chrome.com/images/docs/docs-hero-dark.webp" media="(prefers-color-scheme: dark)" alt="" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" fetchpriority="high"> <img alt="" src="https://developer.chrome.com/images/docs/docs-hero.webp" srcset="https://developer.chrome.com/images/docs/docs-hero.webp" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" fetchpriority="high"> </picture> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="documentation" data-text="Documentation" class="hide-from-toc no-link" tabindex="0"> Documentation </h3> <div class="devsite-landing-row-item-description-content"> Find tutorials, user guides, code samples, API references, and all of the resources you need to start building. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-padding-small dcc-bullet-list dcc-docs-landing" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="build-with-chrome" data-text="Build with Chrome" tabindex="0"> Build with Chrome </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> lightbulb </div> </div> <div class="devsite-landing-row-item-body"> <h3 id="chrome-concepts" data-text="Chrome concepts" class="hide-from-toc no-link" tabindex="0"> Chrome concepts </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="what-are-chrome-release-channels" data-text="What are Chrome release channels?" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/web-platform/chrome-release-channels"> What are Chrome release channels? </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="what-are-chrome-flags" data-text="What are Chrome flags?" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/web-platform/chrome-flags"> What are Chrome flags? </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="get-started-with-origin-trials" data-text="Get started with origin trials" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/web-platform/origin-trials"> Get started with origin trials </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="new-in-chrome" data-text="New in Chrome" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/web-platform/new-in-chrome"> New in Chrome </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> extension </div> </div> <div class="devsite-landing-row-item-body"> <h3 id="extensions" data-text="Extensions" class="hide-from-toc no-link" tabindex="0"> Extensions </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="whats-new" data-text="What's new" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/whats-new"> What's new </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="get-started" data-text="Get started" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/get-started"> Get started </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="develop" data-text="Develop" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop"> Develop </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="chrome-web-store" data-text="Chrome Web Store" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/webstore"> Chrome Web Store </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> verified </div> </div> <div class="devsite-landing-row-item-body"> <h3 id="always-updating" data-text="Always updating" class="hide-from-toc no-link" tabindex="0"> Always updating </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="new-in-chrome" data-text="New in Chrome" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/new"> New in Chrome </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="release-notes" data-text="Release notes" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/release-notes"> Release notes </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="blog" data-text="Blog" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/blog"> Blog </a> </h4> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-cards devsite-landing-row-no-image-background devsite-landing-row-item-centered dcc-chrome-border-top dcc-bullet-list dcc-4-up dcc-docs-landing" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="productivity-made-easier" data-text="Productivity made easier" tabindex="0"> Productivity made easier </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" background="grey" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/devtools-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/devtools.svg" srcset="https://developer.chrome.com/images/docs/devtools.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="devtools" data-text="DevTools" class="hide-from-toc no-link" tabindex="0"> DevTools </h3> <div class="devsite-landing-row-item-description-content"> Web developer tools built directly into the Google Chrome browser. </div> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="overview" data-text="Overview" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/overview"> Overview </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="explore-the-panels" data-text="Explore the panels" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/dom"> Explore the panels </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="tips" data-text="Tips" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/tips"> Tips </a> </h4> </div> </div> </li> </ul> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/devtools" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="google-green" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/lighthouse-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/lighthouse.svg" srcset="https://developer.chrome.com/images/docs/lighthouse.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="lighthouse" data-text="Lighthouse" class="hide-from-toc no-link" tabindex="0"> Lighthouse </h3> <div class="devsite-landing-row-item-description-content"> An open-source, automated tool to improve the quality of your web apps. </div> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="get-started" data-text="Get started" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/lighthouse/overview"> Get started </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="performance-audit" data-text="Performance audit" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/lighthouse/performance/performance-scoring"> Performance audit </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="accessibility-audit" data-text="Accessibility audit" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/lighthouse/accessibility/scoring"> Accessibility audit </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="seo-audit" data-text="SEO audit" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/lighthouse/seo/meta-description"> SEO audit </a> </h4> </div> </div> </li> </ul> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/lighthouse" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="google-green" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/crux-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/crux.svg" srcset="https://developer.chrome.com/images/docs/crux.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="chrome-ux-report" data-text="Chrome UX Report" class="hide-from-toc no-link" tabindex="0"> Chrome UX Report </h3> <div class="devsite-landing-row-item-description-content"> Discover how real-world Chrome users experience popular destinations on the web. </div> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="overview" data-text="Overview" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/crux"> Overview </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="user-guides" data-text="User guides" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/crux/guides"> User guides </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="dashboard" data-text="Dashboard" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/crux/dashboard"> Dashboard </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="api-reference" data-text="API reference" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/crux/api"> API reference </a> </h4> </div> </div> </li> </ul> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/crux" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="google-green" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/pagespeed-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/pagespeed.svg" srcset="https://developer.chrome.com/images/docs/pagespeed.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="pagespeed-insights" data-text="PageSpeed Insights" class="hide-from-toc no-link" tabindex="0"> PageSpeed Insights </h3> <div class="devsite-landing-row-item-description-content"> Report and improve on a page's user experience for mobile and desktop. </div> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="core-web-vitals" data-text="Core Web Vitals" class=" no-link" tabindex="0"> <a href="https://developers.google.com/speed/docs/insights/v5/about"> Core Web Vitals </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="api-reference" data-text="API reference" class=" no-link" tabindex="0"> <a href="https://developers.google.com/speed/docs/insights/rest/v5/pagespeedapi/runpagespeed"> API reference </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="release-notes" data-text="Release notes" class=" no-link" tabindex="0"> <a href="https://developers.google.com/speed/docs/insights/release_notes"> Release notes </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="learn-performance" data-text="Learn Performance" class=" no-link" tabindex="0"> <a href="https://web.dev/explore#performance"> Learn Performance </a> </h4> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-no-image-background dcc-no-padding-top dcc-large-icon-left dcc-docs-landing" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <div class="devsite-landing-row-item-icon-container" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/workbox-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/workbox.svg" srcset="https://developer.chrome.com/images/docs/workbox.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="workbox" data-text="Workbox" class="hide-from-toc no-link" tabindex="0"> Workbox </h3> <div class="devsite-landing-row-item-description-content"> Production-ready service worker libraries and tooling. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/workbox" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <div class="devsite-landing-row-item-icon-container" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/chromedriver-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/chromedriver.svg" srcset="https://developer.chrome.com/images/docs/chromedriver.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="chromedriver" data-text="ChromeDriver" class="hide-from-toc no-link" tabindex="0"> ChromeDriver </h3> <div class="devsite-landing-row-item-description-content"> An open source tool for automated testing of web apps across many browsers </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/chromedriver" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <div class="devsite-landing-row-item-icon-container" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/puppeteer-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/puppeteer.svg" srcset="https://developer.chrome.com/images/docs/puppeteer.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="puppeteer" data-text="Puppeteer" class="hide-from-toc no-link" tabindex="0"> Puppeteer </h3> <div class="devsite-landing-row-item-description-content"> A Node library for high-level control of headless Chrome, over the DevTools Protocol. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/puppeteer" class="button " >Read the docs</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-padding-large dcc-bullet-list dcc-docs-landing" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="powerful-platform-capabilities" data-text="Powerful platform capabilities" tabindex="0"> Powerful platform capabilities </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.chrome.com/docs/ai"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/aipencil.svg" srcset="https://developer.chrome.com/images/docs/aipencil.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="built-in-ai" data-text="Built-in AI" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/ai"> Built-in AI </a> </h3> <div class="devsite-landing-row-item-description-content"> Reimagine what's possible with AI APIs and Gemini Nano in Chrome. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/ai" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.chrome.com/docs/capabilities"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="medium" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/browser-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/browser.svg" srcset="https://developer.chrome.com/images/docs/browser.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="web-apps-and-capabilities" data-text="Web apps and Capabilities" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/capabilities"> Web apps and Capabilities </a> </h3> <div class="devsite-landing-row-item-description-content"> Cross-Google effort to enable amazing apps on the web. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/capabilities" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.chrome.com/docs/web-platform"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="medium" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/platform-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/platform.svg" srcset="https://developer.chrome.com/images/docs/platform.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="web-platform" data-text="Web Platform" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/web-platform"> Web Platform </a> </h3> <div class="devsite-landing-row-item-description-content"> Documentation for experimental web platform APIs. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/web-platform" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.chrome.com/docs/android"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="medium" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/web-android-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/web-android.svg" srcset="https://developer.chrome.com/images/docs/web-android.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="web-on-android" data-text="Web on Android" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/android"> Web on Android </a> </h3> <div class="devsite-landing-row-item-description-content"> Libraries and APIs to embed web content into Android applications. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/android" class="button " >Read the docs</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-padding-large devsite-landing-row-item-centered devsite-landing-row-cards dcc-icon-list dcc-4-up dcc-docs-landing" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="solutions-for-quality-experience" data-text="Solutions for quality experience" tabindex="0"> Solutions for quality experience </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="google-red" size="medium" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/security-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/security.svg" srcset="https://developer.chrome.com/images/docs/security.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="privacy-and-security" data-text="Privacy and security" class="hide-from-toc no-link" tabindex="0"> Privacy and security </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/identity/webauthn"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/identity/webauthn" class="button button-white " >WebAuthn</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/privacy-security/permissions-policy"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/privacy-security/permissions-policy" class="button button-white " >Permissions policy</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/payments/secure-payment-confirmation"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/payments/secure-payment-confirmation" class="button button-white " >SPC Overview</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/privacy-sandbox"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> pages </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/privacy-sandbox" class="button button-white " >Privacy Sandbox</a> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="google-red" size="medium" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/performance-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/performance.svg" srcset="https://developer.chrome.com/images/docs/performance.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="performance" data-text="Performance" class="hide-from-toc no-link" tabindex="0"> Performance </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/lighthouse/performance"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/lighthouse/performance" class="button button-white " >Lighthouse audit</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/devtools/performance"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/devtools/performance" class="button button-white " >DevTools performance</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/discover?keyword=performance"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> pages </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/discover?keyword=performance" class="button button-white " >Best practices</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="//web.dev/learn/performance"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> school </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="//web.dev/learn/performance" class="button button-white " >Learn Performance</a> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="google-red" size="medium" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/design-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/design.svg" srcset="https://developer.chrome.com/images/docs/design.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="css-and-ui" data-text="CSS and UI" class="hide-from-toc no-link" tabindex="0"> CSS and UI </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/css-ui"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/css-ui" class="button button-white " >Get started</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="//web.dev/learn/css"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> school </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="//web.dev/learn/css" class="button button-white " >Learn CSS</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="//web.dev/learn/design"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> school </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="//web.dev/learn/design" class="button button-white " >Learn Responsive Design</a> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" background="grey" foreground="google-red" size="medium" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/a11y-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/a11y.svg" srcset="https://developer.chrome.com/images/docs/a11y.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="accessibility" data-text="Accessibility" class="hide-from-toc no-link" tabindex="0"> Accessibility </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/blog/full-accessibility-tree"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/blog/full-accessibility-tree" class="button button-white " >Accessibility tree</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/lighthouse/accessibility"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/lighthouse/accessibility" class="button button-white " >Lighthouse audit</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/devtools/accessibility/reference"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> pages </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/devtools/accessibility/reference" class="button button-white " >DevTools accessibility</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="//web.dev/learn/accessibility"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> school </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="//web.dev/learn/accessibility" class="button button-white " >Learn Accessibility</a> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-padding-medium dcc-docs-landing" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="build-an-open-web" data-text="Build an open web" tabindex="0"> Build an open web </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.chrome.com/docs/aurora"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/aurora-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/aurora.svg" srcset="https://developer.chrome.com/images/docs/aurora.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="project-aurora" data-text="Project Aurora" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/aurora"> Project Aurora </a> </h3> <div class="devsite-landing-row-item-description-content"> A collaboration between Chrome and open-source web frameworks to improve user experience on the web. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/aurora" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.chrome.com/docs/chromium"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/chromium-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/chromium.svg" srcset="https://developer.chrome.com/images/docs/chromium.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="chromium" data-text="Chromium" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/chromium"> Chromium </a> </h3> <div class="devsite-landing-row-item-description-content"> Documentation for the open-source projects behind the Google Chrome browser and Google Chrome OS. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/chromium" class="button " >Read the docs</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="//web.dev/baseline"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="theme" size="large" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/images/docs/baseline-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/docs/baseline.svg" srcset="https://developer.chrome.com/images/docs/baseline.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="baseline" data-text="Baseline" class="hide-from-toc no-link" tabindex="0"> <a href="//web.dev/baseline"> Baseline </a> </h3> <div class="devsite-landing-row-item-description-content"> Gain clarity about browser support for web platform features. </div> <div class="devsite-landing-row-item-buttons"> <a href="//web.dev/baseline" class="button " >Go to Baseline</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-padding-medium devsite-landing-row-no-image-background devsite-landing-row-cards dcc-docs-landing dcc-chrome-border-top" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="more-to-learn" data-text="More to learn" tabindex="0"> More to learn </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="//www.youtube.com/@ChromeDevs"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/chrome-youtube.svg" srcset="https://developer.chrome.com/images/chrome-youtube.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="chrome-for-developers-on-youtube" data-text="Chrome for Developers on YouTube" class="hide-from-toc no-link" tabindex="0"> <a href="//www.youtube.com/@ChromeDevs"> Chrome for Developers on YouTube </a> </h3> <div class="devsite-landing-row-item-description-content"> Subscribe to stay up to speed with Chrome and web updates, tutorials, case studies, and more. </div> <div class="devsite-landing-row-item-buttons"> <a href="//www.youtube.com/@ChromeDevs" class="button button-primary " >Subscribe</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="//www.linkedin.com/showcase/chrome-for-developers/"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/images/chrome-linkedin.svg" srcset="https://developer.chrome.com/images/chrome-linkedin.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="chrome-for-developers-on-linkedin" data-text="Chrome for Developers on LinkedIn" class="hide-from-toc no-link" tabindex="0"> <a href="//www.linkedin.com/showcase/chrome-for-developers/"> Chrome for Developers on LinkedIn </a> </h3> <div class="devsite-landing-row-item-description-content"> Follow to to discover the latest content from Chrome and the web. </div> <div class="devsite-landing-row-item-buttons"> <a href="//www.linkedin.com/showcase/chrome-for-developers/" class="button button-primary " >Follow</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="//web.dev/learn"> <div class="devsite-landing-row-item-icon-container" background="google-green" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> school </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="learn-web-development" data-text="Learn web development" class="hide-from-toc no-link" tabindex="0"> <a href="//web.dev/learn"> Learn web development </a> </h3> <div class="devsite-landing-row-item-description-content"> Explore our growing collection of courses on key web design and development subjects. </div> <div class="devsite-landing-row-item-buttons"> <a href="//web.dev/learn" class="button button-primary " >Explore</a> </div> </div> </div> </div> </div> </div> </section> </div> <div class="devsite-floating-action-buttons"> </div> </article> <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"]],[],[],[]] </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": "Docs", "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="EsejXxI3xkahNHi2Nw/r2pGVfE0gVj"> (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,["Experiments__reqs_query_experiments","Cloud__enable_cloud_facet_chat","BookNav__enable_tenant_cache_key","DevPro__enable_developer_subscriptions","Profiles__enable_dashboard_curated_recommendations","Concierge__enable_pushui","MiscFeatureFlags__enable_project_variables","TpcFeatures__enable_required_headers","OnSwitch__enable","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__emergency_css","DevPro__enable_cloud_innovators_plus","CloudShell__cloud_shell_button","Cloud__enable_cloud_dlp_service","Profiles__enable_release_notes_notifications","Cloud__enable_legacy_calculator_redirect","Cloud__enable_cloud_shell_fte_user_flow","TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__enable_view_transitions","Profiles__enable_recognition_badges","Profiles__enable_completecodelab_endpoint","Cloud__enable_cloudx_ping","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_developer_profiles_callout","Search__enable_dynamic_content_confidential_banner","MiscFeatureFlags__developers_footer_dark_image","Search__enable_page_map","Profiles__enable_awarding_url","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_llm_concierge_chat","Profiles__enable_page_saving","Profiles__enable_profile_collections","Search__enable_ai_eligibility_checks","CloudShell__cloud_code_overflow_menu","Profiles__enable_public_developer_profiles","Cloud__enable_cloudx_experiment_ids","Profiles__require_profile_eligibility_for_signin","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_variable_operator","Cloud__enable_cloud_shell","Search__enable_suggestions_from_borg","Analytics__enable_clearcut_logging","MiscFeatureFlags__enable_firebase_utm","Cloud__enable_free_trial_server_call"],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

Documentation | Docs | Chrome for Developers