CINXE.COM
What are source maps? | Articles | web.dev
<!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="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><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/web/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/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/articles/source-maps"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/articles/source-maps" /><link rel="alternate" hreflang="x-default" href="https://web.dev/articles/source-maps" /><link rel="alternate" hreflang="ar" href="https://web.dev/articles/source-maps?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/articles/source-maps?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/articles/source-maps?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/articles/source-maps?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/articles/source-maps?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/articles/source-maps?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/articles/source-maps?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/articles/source-maps?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/articles/source-maps?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/articles/source-maps?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/articles/source-maps?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/articles/source-maps?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/articles/source-maps?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/articles/source-maps?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/articles/source-maps?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/articles/source-maps?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/articles/source-maps?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/articles/source-maps?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/articles/source-maps?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/articles/source-maps?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/articles/source-maps" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/articles/source-maps" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/articles/source-maps?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/articles/source-maps?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/articles/source-maps?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/articles/source-maps?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/articles/source-maps?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/articles/source-maps?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/articles/source-maps?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/articles/source-maps?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/articles/source-maps?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/articles/source-maps?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/articles/source-maps?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/articles/source-maps?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/articles/source-maps?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/articles/source-maps?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/articles/source-maps?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/articles/source-maps?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/articles/source-maps?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/articles/source-maps?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/articles/source-maps?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/articles/source-maps?hl=vi" /><title>What are source maps? | Articles | web.dev</title> <meta property="og:title" content="What are source maps? | Articles | web.dev"><meta name="description" content="Improve web debugging experience with source maps."> <meta property="og:description" content="Improve web debugging experience with source maps."><meta property="og:url" content="https://web.dev/articles/source-maps"><meta property="og:image" content="https://web.dev/static/articles/source-maps/image/thumbnail.jpeg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2023-03-31", "headline": "What are source maps?" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Articles", "item": "https://web.dev/articles" },{ "@type": "ListItem", "position": 2, "name": "What are source maps?", "item": "https://web.dev/articles/source-maps" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner" data-nosnippet> <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="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </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 class="devsite-dropdown devsite-dropdown-full "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > Resources </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Web Platform</li> <li class="devsite-nav-description">Dive into the web platform, at your pace. </li> <li class="devsite-nav-item"> <a href="https://web.dev/html" track-type="nav" track-metadata-eventdetail="https://web.dev/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/css" track-type="nav" track-metadata-eventdetail="https://web.dev/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> JavaScript </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>User experience</li> <li class="devsite-nav-description">Learn how to build better user experiences. </li> <li class="devsite-nav-item"> <a href="https://web.dev/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/identity" track-type="nav" track-metadata-eventdetail="https://web.dev/identity" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Learn</li> <li class="devsite-nav-description">Get up to speed on web development.</li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/html" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/css" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn JavaScript </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> More courses </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Additional resources</li> <li class="devsite-nav-description">Explore content collections, patterns, and more.</li> <li class="devsite-nav-item"> <a href="https://web.dev/explore/ai" track-type="nav" track-metadata-eventdetail="https://web.dev/explore/ai" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> AI and the web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/explore" track-type="nav" track-metadata-eventdetail="https://web.dev/explore" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Explore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev/" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/patterns" track-type="nav" track-metadata-eventdetail="https://web.dev/patterns" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Patterns </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/shows" track-type="nav" track-metadata-eventdetail="https://web.dev/shows" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Podcasts & shows </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/newsletter" track-type="nav" track-metadata-eventdetail="https://web.dev/newsletter" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Developer Newsletter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/about" track-type="nav" track-metadata-eventdetail="https://web.dev/about" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> About web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://web.dev/baseline" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/baseline" track-type="nav" track-metadata-position="nav - baseline" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" > Baseline </a> </tab> <tab > <a href="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/blog" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/case-studies" track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" > Case Studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Articles" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/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="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="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </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"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip > Resources </span> </span> <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: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip menu="Resources"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Resources"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="globalNav" 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="/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="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case Studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case Studies </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Resources" 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 > Web Platform </span> </span> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > User experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/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="/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="/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 devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Learn </span> </span> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: More courses" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > More courses </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI and the web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI and the web </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/shows" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Podcasts &amp; shows" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Podcasts &amp; shows </span> </a> </li> <li class="devsite-nav-item"> <a href="/newsletter" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Newsletter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Newsletter </span> </a> </li> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" 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://web.dev/articles" 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="Articles" > Articles </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> What are source maps? <div class="devsite-actions" data-nosnippet><devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip></div> </h1> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p><style> .wd-author__links { display: flex; } </style> <div class="wd-authors" translate="no"> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Jecelyn Yeen" src="https://web.dev/images/authors/jecelynyeen.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Jecelyn Yeen </span> <div class="wd-author__links"> <a href="https://twitter.com/jecfish" aria-label="Jecelyn Yeen on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/jecfish" aria-label="Jecelyn Yeen on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://bsky.app/profile/jec.fish" aria-label="Jecelyn Yeen on Bluesky" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 568 501"> <title>Bluesky</title> <path fill="currentColor" d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/> </svg> </a> <a href="https://jec.fish/" aria-label="Jecelyn Yeen's homepage" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30"> <title>Homepage</title> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </svg></a> </div> </div> </div> </div></p> <p><devsite-video video-id="FIYkjjFYvoI"></devsite-video></p> <p>Source maps are a crucial tool in modern web development that make debugging significantly easier. This page explores the basics of source maps, how they're generated, and how they improve the debugging experience.</p> <h2 id="why" data-text="The need for source maps" tabindex="-1">The need for source maps</h2> <p>Early web apps were built with low complexity. Developers deployed HTML, CSS, and JavaScript files directly to the web.</p> <p>More modern and complex web apps can need a variety of tools in their development workflow. For example:</p> <ul> <li>Templating languages and HTML preprocessors: <a href="https://pugjs.org/">Pug</a>, <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a>, <a href="https://daringfireball.net/projects/markdown/">Markdown</a>.</li> <li>CSS preprocessors: <a href="https://sass-lang.com/">SCSS</a>, <a href="https://lesscss.org/">LESS</a>, <a href="https://postcss.org/">PostCSS</a>.</li> <li>JavaScript frameworks: <a href="https://angular.io/">Angular</a>, <a href="https://react.dev/">React</a>, <a href="https://vuejs.org/">Vue</a>, <a href="https://svelte.dev/">Svelte</a>.</li> <li>JavaScript meta frameworks: <a href="https://nextjs.org/">Next.js</a>, <a href="https://nuxt.com/">Nuxt</a>, <a href="https://astro.build/">Astro</a>.</li> <li>High-level programming languages: <a href="https://www.typescriptlang.org/">TypeScript</a>, <a href="https://dart.dev/tools/dart2js">Dart</a>, <a href="https://coffeescript.org/">CoffeeScript</a>.</li> </ul> <figure> <img src="/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c.png" alt="A brief overview of various tooling." width="800" height="450" srcset="https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_36.png 36w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_48.png 48w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_72.png 72w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_96.png 96w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_480.png 480w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_720.png 720w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_856.png 856w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_960.png 960w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_1440.png 1440w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_1920.png 1920w,https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Some of the common web app development tools.</figcaption> </figure> <p>These tools require a build process to transpile your code into standard HTML, JavaScript, and CSS that browsers can understand. It's also common practice to optimize performance by minifying and combining these files, using a tool like <a href="https://github.com/terser/terser">Terser</a>.</p> <p>For example, using build tools, we can transpile and compress the following TypeScript file into a single line of JavaScript. You can try it for yourself in this <a href="https://github.com/jecfish/parcel-demo">demo on GitHub</a>.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="TypeScript"><code translate="no" dir="ltr"><span class="devsite-syntax-cm">/* A TypeScript demo: example.ts */</span> <span class="devsite-syntax-nb">document</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">querySelector</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'button'</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-o">?</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">addEventListener</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'click'</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span>><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">num</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kt">number</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Math</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">floor</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nb">Math</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">random</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">*</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">101</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">greet</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kt">string</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'Hello'</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nb">document</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">querySelector</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'p'</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kr">as</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">HTMLParagraphElement</span><span class="devsite-syntax-p">).</span><span class="devsite-syntax-nx">innerText</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-sb">`</span><span class="devsite-syntax-si">${</span><span class="devsite-syntax-nx">greet</span><span class="devsite-syntax-si">}</span><span class="devsite-syntax-sb">, you are no. </span><span class="devsite-syntax-si">${</span><span class="devsite-syntax-nx">num</span><span class="devsite-syntax-si">}</span><span class="devsite-syntax-sb">!`</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">console</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">log</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">num</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-p">});</span> </code></pre></devsite-code> <p>A compressed version would be:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-cm">/* A compressed JavaScript version of the TypeScript demo: example.min.js */</span> <span class="devsite-syntax-nb">document</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">querySelector</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"button"</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-o">?</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">addEventListener</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"click"</span><span class="devsite-syntax-p">,(()</span><span class="devsite-syntax-o">=</span>><span class="devsite-syntax-p">{</span><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">e</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-nb">Math</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">floor</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-mf">101</span><span class="devsite-syntax-o">*</span><span class="devsite-syntax-nb">Math</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">random</span><span class="devsite-syntax-p">());</span><span class="devsite-syntax-nb">document</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">querySelector</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"p"</span><span class="devsite-syntax-p">).</span><span class="devsite-syntax-nx">innerText</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-sb">`Hello, you are no. </span><span class="devsite-syntax-si">${</span><span class="devsite-syntax-nx">e</span><span class="devsite-syntax-si">}</span><span class="devsite-syntax-sb">!`</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">console</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">log</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">e</span><span class="devsite-syntax-p">)}));</span> </code></pre></devsite-code> <p>However, compressing your code can make debugging more difficult. Source maps can remove this problem: by mapping your compiled code back to the original code, they can help you quickly find the source of an error.</p> <h2 id="generate" data-text="Generate source maps" tabindex="-1">Generate source maps</h2> <p>Source maps are files whose names end with <code translate="no" dir="ltr">.map</code> (for example, <code translate="no" dir="ltr">example.min.js.map</code> and <code translate="no" dir="ltr">styles.css.map</code>). They can be generated by most build tools, including <a href="https://vitejs.dev/">Vite</a>, <a href="https://webpack.js.org/">webpack</a>, <a href="https://rollupjs.org/">Rollup</a>, <a href="https://parceljs.org/">Parcel</a>, and <a href="https://esbuild.github.io/">esbuild</a>.</p> <p>Some tools include source maps by default. Others might need additional configuration to produce them:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-cm">/* Example configuration: vite.config.js */</span> <span class="devsite-syntax-cm">/* https://vitejs.dev/config/ */</span> <span class="devsite-syntax-k">export</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">default</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">defineConfig</span><span class="devsite-syntax-p">({</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">build</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">sourcemap</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">true</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// enable production source maps</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">css</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">devSourcemap</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">true</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// enable CSS source maps during development</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">})</span> </code></pre></devsite-code> <h2 id="understand" data-text="Understand the source map" tabindex="-1">Understand the source map</h2> <p>To help with debugging, these source map files contain essential information about how the compiled code maps to the original code. Here's an example of a source map:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"mappings"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"AAAAA,SAASC,cAAc,WAAWC, ..."</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"sources"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-s2">"src/script.ts"</span><span class="devsite-syntax-p">],</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"sourcesContent"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-s2">"document.querySelector('button')..."</span><span class="devsite-syntax-p">],</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"names"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-s2">"document"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-s2">"querySelector"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">...],</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"version"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">3</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"file"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"example.min.js.map"</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <p>To understand each of these fields, you can read the <a href="https://bit.ly/sourcemap">source map specification</a> or <a href="https://developer.chrome.com/blog/sourcemaps#the_anatomy_of_a_source_map">The anatomy of a source map</a>.</p> <p>The most important part of a source map is the <code translate="no" dir="ltr">mappings</code> field. It uses a <a href="https://developer.chrome.com/blog/sourcemaps#base64-vlq-and-keeping-the-source-map-small">VLQ base 64 encoded string</a> to map lines and locations in the compiled file to the corresponding original file. You can view this mapping using a source map visualizer like <a href="https://sokra.github.io/source-map-visualization/">source-map-visualization</a> or <a href="https://evanw.github.io/source-map-visualization/">Source Map Visualization</a>.</p> <figure> <img src="/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59.png" alt="A source map visualization." width="800" height="483" srcset="https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_36.png 36w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_48.png 48w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_72.png 72w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_96.png 96w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_480.png 480w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_720.png 720w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_856.png 856w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_960.png 960w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_1440.png 1440w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_1920.png 1920w,https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> A visualization of the previous code example, generated by a <a href="https://sokra.github.io/source-map-visualization/">visualizer</a>. </figcaption> </figure> <p>The <strong>generated</strong> column on the left shows the compressed content, and the <strong>original</strong> column shows the original source.</p> <p>The visualizer color-codes each line in the <strong>original</strong> column with its corresponding code in the <strong>generated</strong> column.</p> <p>The <strong>mappings</strong> section shows decoded mappings of the code. For example, the entry <code translate="no" dir="ltr">65 -> 2:2</code> means:</p> <ul> <li><strong>Generated</strong> code: The word <code translate="no" dir="ltr">const</code> starts at position 65 in the compressed content.</li> <li><strong>Original</strong> code: The word <code translate="no" dir="ltr">const</code> starts at line 2 and column 2 in the original content.</li> </ul> <figure> <img src="/static/articles/source-maps/image/mapping-entry-dc9df15808405.png" alt="Mapping entry." width="800" height="483" srcset="https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_36.png 36w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_48.png 48w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_72.png 72w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_96.png 96w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_480.png 480w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_720.png 720w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_856.png 856w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_960.png 960w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_1440.png 1440w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_1920.png 1920w,https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">The mapping visualization, focusing on the <code translate="no" dir="ltr">65 -> 2:2</code> entry.</figcaption> </figure> <p>This lets developers quickly identify the relationship between the minified code and the original code, making debugging a smoother process.</p> <p>Browser developer tools apply these source maps to help you pinpoint your debugging issues quickly in the browser.</p> <figure> <img src="/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb.png" alt="Developer tools applying a source map." width="800" height="439" srcset="https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_36.png 36w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_48.png 48w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_72.png 72w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_96.png 96w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_480.png 480w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_720.png 720w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_856.png 856w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_960.png 960w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_1440.png 1440w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_1920.png 1920w,https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">An example of how browser developer tools apply source maps and show the mappings between files.</figcaption> </figure> <h3 id="extensions" data-text="Source map extensions" tabindex="-1">Source map extensions</h3> <p>Source maps support custom extension fields that start with an <code translate="no" dir="ltr">x_</code> prefix. One example is the <code translate="no" dir="ltr">x_google_ignoreList</code> extension field proposed by Chrome DevTools. See <a href="https://developer.chrome.com/articles/x-google-ignore-list">x_google_ignoreList</a> to learn more about how these extensions help you focus on your code.</p> <h2 id="drawbacks" data-text="Source map drawbacks" tabindex="-1">Source map drawbacks</h2> <p>Unfortunately, source mappings aren't always as complete as you need them to be. In our first example, the variable <code translate="no" dir="ltr">greet</code> was optimized away during the build process, even though its value is directly embedded into the final string output.</p> <figure> <img src="/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171.png" alt="Variable greet is not mapped." width="800" height="483" srcset="https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_36.png 36w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_48.png 48w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_72.png 72w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_96.png 96w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_480.png 480w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_720.png 720w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_856.png 856w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_960.png 960w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_1440.png 1440w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_1920.png 1920w,https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">The <code translate="no" dir="ltr">greet</code> variable in the original code is missing from the mapping.</figcaption> </figure> <p>In this case, when you debug the code, developer tools might not be able to infer and display the actual value. This kind of error can make your code monitoring and analysis harder.</p> <figure> <img src="/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26.png" alt="Variable greet is undefined." width="800" height="457" srcset="https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_36.png 36w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_48.png 48w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_72.png 72w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_96.png 96w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_480.png 480w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_720.png 720w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_856.png 856w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_960.png 960w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_1440.png 1440w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_1920.png 1920w,https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">The developer tool can't find a value for <code translate="no" dir="ltr">greet</code>.</figcaption> </figure> <p>This is a problem that needs to be solved within the design of source maps. One potential solution is to include scope information in the source maps in the same way other programming languages do with their debug information.</p> <p>However, this requires the whole ecosystem to work together to improve the source map specification and implementation. To follow the ongoing on improving debuggability with source maps, refer to the proposal for <a href="https://github.com/source-map/source-map-rfc/issues/12">Source Maps v4</a> on GitHub.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2023-03-31 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2023-03-31 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <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=1400680&template=1857359" 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:1400680&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://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <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 2)" > 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 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/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="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-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Articles", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="ofpCNOKelj6agRxXuzir0Qp7vBwudm"> (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/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759","https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/vbddb2c68c6e27c8062b052e877e6ccde82ab61ee731962a34dca560b12d02759/web/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","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Cloud__enable_llm_concierge_chat","Search__enable_dynamic_content_confidential_banner","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_cloud_shell","Profiles__enable_purchase_prompts","MiscFeatureFlags__emergency_css","Profiles__enable_recognition_badges","DevPro__enable_developer_subscriptions","Profiles__enable_completecodelab_endpoint","Profiles__enable_stripe_subscription_management","Cloud__enable_cloudx_experiment_ids","Profiles__enable_public_developer_profiles","Cloud__enable_cloud_facet_chat","Profiles__enable_page_saving","Profiles__enable_completequiz_endpoint","MiscFeatureFlags__enable_view_transitions","Search__enable_suggestions_from_borg","OnSwitch__enable","MiscFeatureFlags__enable_framebox_badge_methods","Search__enable_page_map","MiscFeatureFlags__enable_variable_operator","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_awarding_url","Concierge__enable_pushui","CloudShell__cloud_shell_button","Profiles__enable_profile_collections","Profiles__enable_join_program_group_endpoint","Cloud__enable_cloudx_ping","Cloud__enable_free_trial_server_call","DevPro__enable_cloud_innovators_plus","Profiles__enable_complete_playlist_endpoint","CloudShell__cloud_code_overflow_menu","TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__enable_project_variables","Search__enable_ai_eligibility_checks","Profiles__enable_developer_profiles_callout","TpcFeatures__enable_unmirrored_page_left_nav","Profiles__require_profile_eligibility_for_signin","DevPro__enable_devpro_offers","Analytics__enable_clearcut_logging","BookNav__enable_tenant_cache_key","MiscFeatureFlags__enable_variable_operator_index_yaml","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_firebase_utm","Concierge__enable_actions_menu","Profiles__enable_release_notes_notifications","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__enable_explain_this_code","Experiments__reqs_query_experiments"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-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,[38,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-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4],null,null,1,null,"https://developerscontentinsights-pa.googleapis.com","AIzaSyC11xEGtFhkmSh_iF6l_itbxnFz2GrIBOg","AIzaSyAXJ10nRF73mmdSDINgkCNX5bbd2KPcWm8"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>