CINXE.COM

<!DOCTYPE html> <html class='v2 list-page' dir='ltr' itemscope='' itemtype='http://schema.org/Blog' lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <link href='https://www.blogger.com/static/v1/widgets/3566091532-css_bundle_v2.css' rel='stylesheet' type='text/css'/> <title> Chromium Blog: 10th birthday </title> <meta content='width=device-width, height=device-height, initial-scale=1.0' name='viewport'/> <meta content='IE=Edge' http-equiv='X-UA-Compatible'/> <meta content='Chromium Blog' property='og:title'/> <meta content='en_US' property='og:locale'/> <meta content='https://blog.chromium.org/search/label/10th%20birthday' property='og:url'/> <meta content='Chromium Blog' property='og:site_name'/>  <meta content='Chromium Blog' property='og:title'/> <meta content='summary' name='twitter:card'/> <meta content='@ChromiumDev' name='twitter:creator'/> <link href='https://fonts.googleapis.com/css?family=Roboto:400italic,400,500,500italic,700,700italic' rel='stylesheet' type='text/css'/> <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>  <style id='page-skin-1' type='text/css'></style> <style id='template-skin-1' type='text/css'></style>  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link href='https://blog.chromium.org/favicon.ico' rel='icon' type='image/x-icon'/> <link href='https://blog.chromium.org/search/label/10th%20birthday' rel='canonical'/> <link rel="alternate" type="application/atom+xml" title="Chromium Blog - Atom" href="https://blog.chromium.org/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Chromium Blog - RSS" href="https://blog.chromium.org/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Chromium Blog - Atom" href="https://www.blogger.com/feeds/2471378914199150966/posts/default" />  <meta content='https://blog.chromium.org/search/label/10th%20birthday' property='og:url'/> <meta content='Chromium Blog' property='og:title'/> <meta content='News and developments from the open source browser project' property='og:description'/>  <base target='_self'/> <style> html { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body { padding: 0; /* This ensures that the scroll bar is always present, which is needed */ /* because content render happens after page load; otherwise the header */ /* would "bounce" in-between states. */ min-height: 150%; } h2 { font-size: 16px; } h1, h2, h3, h4, h5 { line-height: 2em; } html, h4, h5, h6 { font-size: 14px; } a, a:visited { /* Ensures links meet minimum contrast ratios. */ color: #3974d6; text-decoration: none; } a:focus, a:hover, a:active { text-decoration: none; } .Header { margin-top: 15px; } .Header h1 { font-size: 32px; font-weight: 300; line-height: 32px; height: 42px; } .header-inner .Header .titlewrapper { padding: 0; margin-top: 30px; } .header-inner .Header .descriptionwrapper { padding: 0; margin: 0; } .cols-wrapper { margin-top: 56px; } .header-outer, .cols-wrapper, .footer-outer, .google-footer-outer { padding: 0 60px; } .header-inner { height: 256px; position: relative; } html, .header-inner a { color: #212121; color: rgba(0,0,0,.87); } .header-inner .google-logo { display: inline-block; background-size: contain; z-index: 1; height: 70px; overflow: hidden; margin-top: 4px; margin-right: 8px; } .header-left { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 12px; width: 100%; } .google-logo { margin-left: -4px; } .google-logo img{ height:70px; } #google-footer { position: relative; font-size: 13px; list-style: none; text-align: right; } #google-footer a { color: #444; } #google-footer ul { margin: 0; padding: 0; height: 144px; line-height: 144px; } #google-footer ul li { display: inline; } #google-footer ul li:before { color: #999; content: "\00b7"; font-weight: bold; margin: 5px; } #google-footer ul li:first-child:before { content: ''; } #google-footer .google-logo-dark { left: 0; margin-top: -16px; position: absolute; top: 50%; } /** Sitemap links. **/ .footer-inner-2 { font-size: 14px; padding-top: 42px; padding-bottom: 74px; } .footer-inner-2 .HTML h2 { color: #212121; color: rgba(0,0,0,.87); font-size: 14px; font-weight: 500; padding-left: 0; margin: 10px 0; } .footer-inner-2 .HTML ul { font-weight: normal; list-style: none; padding-left: 0; } .footer-inner-2 .HTML li { line-height: 24px; padding: 0; } .footer-inner-2 li a { color: rgba(65,132,243,.87); } /** Archive widget. **/ .BlogArchive { font-size: 13px; font-weight: normal; } .BlogArchive .widget-content { display: none; } .BlogArchive h2, .Label h2 { color: #4184F3; text-decoration: none; } .BlogArchive .hierarchy li { display: inline-block; } /* Specificity needed here to override widget CSS defaults. */ .BlogArchive #ArchiveList ul li, .BlogArchive #ArchiveList ul ul li { margin: 0; padding-left: 0; text-indent: 0; } .BlogArchive .intervalToggle { cursor: pointer; } .BlogArchive .expanded .intervalToggle .new-toggle { -ms-transform: rotate(180deg); transform: rotate(180deg); } .BlogArchive .new-toggle { float: right; padding-top: 3px; opacity: 0.87; } #ArchiveList { text-transform: uppercase; } #ArchiveList .expanded > ul:last-child { margin-bottom: 16px; } #ArchiveList .archivedate { width: 100%; } /* Months */ .BlogArchive .items { max-width: 150px; margin-left: -4px; } .BlogArchive .expanded .items { margin-bottom: 10px; overflow: hidden; } .BlogArchive .items > ul { float: left; height: 32px; } .BlogArchive .items a { padding: 0 4px; } .Label { font-size: 13px; font-weight: normal; } .sidebar-icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin-right: 12px; margin-top: -1px } .Label a { margin-right: 4px; } .Label .widget-content { display: none; } .FollowByEmail { font-size: 13px; font-weight: normal; } .FollowByEmail h2 { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: 0 50%; text-indent: 30px; } .FollowByEmail .widget-content { display: none; } .searchBox input { border: 1px solid #eee; color: #212121; color: rgba(0,0,0,.87); font-size: 14px; padding: 8px 8px 8px 40px; width: 164px; font-family: Roboto, sans-serif; background: url("https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png") 8px center no-repeat; } .searchBox ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: rgba(0,0,0,.54); } .searchBox :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; opacity: 0.54; } .searchBox ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000; opacity: 0.54; } .searchBox :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #757575; } .widget-item-control { margin-top: 0px; } .section { margin: 0; padding: 0; } #sidebar-top { border: 1px solid #eee; } #sidebar-top > div { margin: 16px 0; } .widget ul { line-height: 1.6; } /*main post*/ .post { margin-bottom:30px; } #main .post .title { margin: 0; } #main .post .title a { color: #212121; color: rgba(0,0,0,.87); font-weight: normal; font-size: 24px; } #main .post .title a:hover { text-decoration:none; color: #3974d6; } .message, #main .post .post-header { margin: 0; padding: 0; } #main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption { color: #444; font-weight: 500; } #main .tr-caption-container td { text-align: left; } #main .post .tr-caption { color: #757575; color: rgba(0,0,0,.54); display: block; max-width: 560px; padding-bottom: 20px; } #main .post .tr-caption-container { line-height: 24px; margin: -1px 0 0 0 !important; padding: 4px 0; text-align: left; } #main .post .post-header .published{ font-size:11px; font-weight:bold; } .post-header .publishdate { font-size: 17px; font-weight:normal; color: #757575; color: rgba(0,0,0,.54); } #main .post .post-footer{ font-size:12px; padding-bottom: 21px; } .label-footer { margin-bottom: 12px; margin-top: 12px; } .comment-img { margin-right: 16px; opacity: 0.54; vertical-align: middle; } #main .post .post-header .published { margin-bottom: 40px; margin-top: -2px; } .post .post-content { color: #212121; color: rgba(0,0,0,.87); font-size: 17px; margin: 25px 0 36px 0; line-height: 32px; } .post-body .post-content ul, .post-body .post-content ol { margin: 16px 0; padding: 0 48px; } .post-summary { display: none; } /* Another old-style caption. */ .post-content div i, .post-content div + i { font-size: 14px; font-style: normal; color: #757575; color: rgba(0,0,0,.54); display: block; line-height: 24px; margin-bottom: 16px; text-align: left; } /* Another old-style caption (with link) */ .post-content a > i { color: #4184F3 !important; } /* Old-style captions for images. */ .post-content .separator + div:not(.separator) { margin-top: -16px; } /* Capture section headers. */ .post-content br + br + b, .post-content .space + .space + b, .post-content .separator + b { display: inline-block; margin-bottom: 8px; margin-top: 24px; } .post-content li { line-height: 32px; } /* Override all post images/videos to left align. */ .post-content .separator, .post-content > div { text-align: left; } .post-content .separator > a, .post-content .separator > span { margin-left: 0 !important; } .post-content img { max-width: 100%; height: auto; width: auto; } .post-content .tr-caption-container img { margin-bottom: 12px; } .post-content iframe, .post-content embed { max-width: 100%; } .post-content .carousel-container { margin-bottom: 48px; } #main .post-content b { font-weight: 500; } /* These are the main paragraph spacing tweaks. */ #main .post-content br { content: ' '; display: block; padding: 4px; } .post-content .space { display: block; height: 8px; } .post-content iframe + .space, .post-content iframe + br { padding: 0 !important; } #main .post .jump-link { margin-bottom:10px; } .post-content img, .post-content iframe { margin: 30px 0 20px 0; } .post-content > img:first-child, .post-content > iframe:first-child { margin-top: 0; } .col-right .section { padding: 0 16px; } #aside { background:#fff; border:1px solid #eee; border-top: 0; } #aside .widget { margin:0; } #aside .widget h2, #ArchiveList .toggle + a.post-count-link { color: #212121; color: rgba(0,0,0,.87); font-weight: 400 !important; margin: 0; } #ArchiveList .toggle { float: right; } #ArchiveList .toggle .material-icons { padding-top: 4px; } #sidebar .tab { cursor: pointer; } #sidebar .tab .arrow { display: inline-block; float: right; } #sidebar .tab .icon { display: inline-block; vertical-align: top; height: 24px; width: 24px; margin-right: 13px; margin-left: -1px; margin-top: 1px; color: #757575; color: rgba(0,0,0,.54); } #sidebar .widget-content > :first-child { padding-top: 8px; } #sidebar .active .tab .arrow { -ms-transform: rotate(180deg); transform: rotate(180deg); } #sidebar .arrow { color: #757575; color: rgba(0,0,0,.54); } #sidebar .widget h2 { font-size: 14px; line-height: 24px; display: inline-block; } #sidebar .widget .BlogArchive { padding-bottom: 8px; } #sidebar .widget { border-bottom: 1px solid #eee; box-shadow: 0px 1px 0 white; margin-bottom: 0; padding: 14px 0; min-height: 20px; } #sidebar .widget:last-child { border-bottom: none; box-shadow: none; margin-bottom: 0; } #sidebar ul { margin: 0; padding: 0; } #sidebar ul li { list-style:none; padding:0; } #sidebar ul li a { line-height: 32px; } #sidebar .archive { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC"); height: 24px; line-height: 24px; padding-left: 30px; } #sidebar .labels { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC"); height: 20px; line-height: 20px; padding-left: 30px; } #sidebar .rss a { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII="); } #sidebar .subscription a { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC"); } #sidebar-bottom { background: #f5f5f5; border-top:1px solid #eee; } #sidebar-bottom .widget { border-bottom: 1px solid #e0e0e0; padding: 15px 0; text-align: center; } #sidebar-bottom > div:last-child { border-bottom: 0; } #sidebar-bottom .text { line-height: 20px; } /* Home, forward, and backward pagination. */ .blog-pager { border-top : 1px #e0e0e0 solid; padding-top: 10px; margin-top: 15px; text-align: right !important; } #blog-pager { margin-botom: 0; margin-top: -14px; padding: 16px 0 0 0; } #blog-pager a { display: inline-block; } .blog-pager i.disabled { opacity: 0.2 !important; } .blog-pager i { color: black; margin-left: 16px; opacity: 0.54; } .blog-pager i:hover, .blog-pager i:active { opacity: 0.87; } #blog-pager-older-link, #blog-pager-newer-link { float: none; } .gplus-profile { background-color: #fafafa; border: 1px solid #eee; overflow: hidden; width: 212px; } .gplus-profile-inner { margin-left: -1px; margin-top: -1px; } /* Sidebar follow buttons. */ .followgooglewrapper { padding: 12px 0 0 0; } .loading { visibility: hidden; } .detail-page .post-footer .cmt_iframe_holder { padding-top: 40px !important; } /** Desktop **/ @media (max-width: 900px) { .col-right { display: none; } .col-main { margin-right: 0; min-width: initial; } .footer-outer { display: none; } .cols-wrapper { min-width: initial; } .google-footer-outer { background-color: #f5f5f5; } } /** Tablet **/ @media (max-width: 712px) { .header-outer, .cols-wrapper, .footer-outer, .google-footer-outer { padding: 0 40px; } } /* An extra breakpoint accommodating for long blog titles. */ @media (max-width: 600px) { .header-left { height: 100%; position: initial; top: inherit; margin-top: 0; -webkit-transform: initial; transform: initial; } .header-title { margin-top: 18px; } .header-inner { height: auto; margin-bottom: 32px; margin-top: 32px; } .header-desc { margin-top: 12px; } .header-inner .google-logo { height: 70px; margin-top: 3px; } .header-inner .google-logo img { height: 70px; } .header-title h2 { font-size: 32px; line-height: 76px; } } /** Mobile/small desktop window; also landscape. **/ @media (max-width: 480px), (max-height: 480px) { .header-outer, .cols-wrapper, .footer-outer, .google-footer-outer { padding: 0 16px; } .cols-wrapper { margin-top: 0; } .post-header .publishdate, .post .post-content { font-size: 16px; } .post .post-content { line-height: 28px; margin-bottom: 30px; } .post { margin-top: 30px; } .byline-author { display: block; font-size: 12px; line-height: 24px; margin-top: 6px; } #main .post .title a { font-weight: 500; color: #4c4c4c; color: rgba(0,0,0,.70); } #main .post .post-header { padding-bottom: 12px; } #main .post .post-header .published { margin-bottom: -8px; margin-top: 3px; } .post .read-more { display: block; margin-top: 14px; } .post .tr-caption { font-size: 12px; } #main .post .title a { font-size: 20px; line-height: 30px; } .post-content iframe { /* iframe won't keep aspect ratio when scaled down. */ max-height: 240px; } .post-content .separator img, .post-content .tr-caption-container img, .post-content iframe { margin-left: -16px; max-width: inherit; width: calc(100% + 32px); } .post-content table, .post-content td { width: 100%; } #blog-pager { margin: 0; padding: 16px 0; } /** List page tweaks. **/ .list-page .post-original { display: none; } .list-page .post-summary { display: block; } .list-page .comment-container { display: none; } .list-page #blog-pager { padding-top: 0; border: 0; margin-top: -8px; } .list-page .label-footer { display: none; } .list-page #main .post .post-footer { border-bottom: 1px solid #eee; margin: -16px 0 0 0; padding: 0 0 20px 0; } .list-page .post .share { display: none; } /** Detail page tweaks. **/ .detail-page .post-footer .cmt_iframe_holder { padding-top: 32px !important; } .detail-page .label-footer { margin-bottom: 0; } .detail-page #main .post .post-footer { padding-bottom: 0; } .detail-page #comments { display: none; } } [data-about-pullquote], [data-is-preview], [data-about-syndication] { display: none; } </style> <noscript> <style> .loading { visibility: visible }</style> </noscript> <script type='text/javascript'> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-37592578-1', 'auto', 'blogger'); ga('blogger.send', 'pageview'); </script> <link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2471378914199150966&zx=3a5e6827-7ceb-4daf-b12c-bebbc55c1d22' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2471378914199150966&zx=3a5e6827-7ceb-4daf-b12c-bebbc55c1d22' rel='stylesheet'/></noscript> <meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/> <meta name='google-adsense-platform-domain' content='blogspot.com'/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?display=swap&family=Roboto"></head> <body> <script type='text/javascript'> //<![CDATA[ var axel = Math.random() + ""; var a = axel * 10000000000000; document.write('<iframe src="https://2542116.fls.doubleclick.net/activityi;src=2542116;type=gblog;cat=googl0;ord=ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>'); //]]> </script> <noscript> <img alt='' height='1' src='https://ad.doubleclick.net/ddm/activity/src=2542116;type=gblog;cat=googl0;ord=1?' width='1'/> </noscript>  <div class='header-outer'> <div class='header-inner'> <div class='section' id='header'><div class='widget Header' data-version='1' id='Header1'> <div class='header-left'> <div class='header-title'> <a class='google-logo' href='https://blog.chromium.org/'> <img alt="Chromium Blog" height="50" src="//1.bp.blogspot.com/-vkF7AFJOwBk/VkQxeAGi1mI/AAAAAAAARYo/57denvsQ8zA/s1600-r/logo_chromium.png"> </a> <a href='/.'> <h2> Chromium Blog </h2> </a> </div> <div class='header-desc'> News and developments from the open source browser project </div> </div> </div></div> </div> </div>  <div class='cols-wrapper loading'> <div class='col-main-wrapper'> <div class='col-main'> <div class='section' id='main'><div class='widget Blog' data-version='1' id='Blog1'> <div class='post' data-id='8328382129629393066' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2018/09/10-years-of-speed-in-chrome_11.html' itemprop='url' title='10 years of Speed in Chrome'> 10 years of Speed in Chrome </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Tuesday, September 11, 2018 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> <style> * { line-height: 1.38 !important; white-space: initial !important; } ul { font-size: 11pt !important; } li { line-height: 1.38 !important; } img { margin-bottom: 0 !important; } i { text-align: center !important; } </style> <span id="docs-internal-guid-ec9454c6-7fff-b0cd-07e3-80f5f797c50c"></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Speed has been one of Chrome’s <a href="https://www.chromium.org/developers/core-principles">four core principles</a>, since it was first launched ten years ago. We’ve always wanted to enable web developers to provide users with fast, engaging web experiences. On Chrome’s 10th birthday, we thought it would be fun to look at what we’ve done to improve speed over the years and what we’re doing next.</span></span></div> <h2> </h2> <h2> <br /> <br />Many components in the browser contribute to speed</h2> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><a href="https://v8project.blogspot.com/">V8</a> is Chrome’s JavaScript and WebAssembly engine. With web pages using an increasing amount of JavaScript, a fast engine to handle it is an important cornerstone. Over the years, we worked on a <a href="https://v8project.blogspot.com/2017/05/launching-ignition-and-turbofan.html">new JavaScript execution pipeline</a> for V8, launching <a href="https://github.com/v8/v8/wiki/Interpreter">Ignition</a> (a new interpreter) and <a href="https://github.com/v8/v8/wiki/TurboFan">TurboFan</a> (an optimizing compiler). These allowed us to improve performance on the Speedometer benchmark by 5-10%. <a href="https://blog.chromium.org/2015/03/new-javascript-techniques-for-rapid.html">Script streaming</a> enabled us to parse JavaScript on a background thread as soon as it began downloading, improving page loads by up to 10%. We then added <a href="https://v8project.blogspot.com/2018/03/background-compilation.html">background compilation</a> reducing main-thread compile time by up to 20%.</span></span></div> <div> <div style="text-align: center;"> <span id="docs-internal-guid-3be9ef50-7fff-5039-8ce7-893f54546c2e"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span></div> </div> <div> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-adb96e8d-7fff-757e-66a0-2977db51a02d"><span style="font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"><img height="294" src="https://lh3.googleusercontent.com/wI5N-pC7UdVTh0aIaAFZX_26Xj6P4r7W48qL7OGKwOAVUXGHsKl6CoQSGZ0itp-4epkeqdVvyd2TSA2s4LyIOSEJOdv6zqg4TrEBMM8eL9NjFgHPT58wDt4DbaeZnTeyXhakdMCd" style="border: none; transform: rotate(0rad);" width="510" /></span></span></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <span style="font-size: 14.6667px; white-space: pre-wrap;">Our work on project <a href="https://v8project.blogspot.com/2016/04/jank-busters-part-two-orinoco.html">Orinoco</a> enabled concurrent garbage collection, freeing up the main thread and reducing jank. Over time, we also shifted to focusing on <a href="https://blog.chromium.org/2017/04/real-world-javascript-performance.html">real-world JavaScript performance</a>, helping us<a href="https://v8project.blogspot.com/2018/01/speedometer-2.html"> double the performance of the React.js runtime</a> and improve performance for libraries like Vue.js, Preact, and Angular up to 40%. Parallel, concurrent, and incremental garbage collection reduced garbage collection induced jank by 100× since the initial V8 commit. We also implemented <a href="https://webassembly.org/">WebAssembly</a>, enabling developers to run non-JavaScript code on the web with predictable performance, and launched the <a href="https://v8project.blogspot.com/2018/08/liftoff.html">Liftoff</a> baseline compiler to ensure fast startup times of WASM apps. These new components are just the latest in a <a href="https://v8project.blogspot.com/2018/09/10-years.html">10-year effort</a> that has improved V8's performance release-to-release for an improvement of 20x over the years.</span></div> <div class="separator" style="clear: both; text-align: center;"> </div> <span id="docs-internal-guid-3dd7b7e9-7fff-478d-262b-df6d1293a86b"><span style="font-family: inherit;"><span id="docs-internal-guid-a73d4e74-7fff-e00c-ef2f-298692bb6939"><span style="font-family: "arial"; font-size: 8pt; vertical-align: baseline; white-space: pre-wrap;"><img height="276" src="https://lh4.googleusercontent.com/PNhgg5pewdR5O3ffj_-cLuLVVsRXBh0KnL6SaZ3ebgsr7brseUBukaqHRQ761nmghrpXJ5zjDbWhFFTyCHuaodawNFWVZde7o8HVIgwBi6qPtXEI9I_njv_uYbKY_D2m94Znc2ps" style="border: none; transform: rotate(0rad);" title="Chart" width="602" /></span></span><i><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br />V8 Bench scores for a range of Chrome releases over the years. V8 Bench is the predecessor to the old Octane benchmark. We've used it for this chart because unlike Octane, it can run in all Chrome versions, including the initial Chrome Beta.</span></i></span></span></div> <br /> <h2> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;">Chrome has also played a key role in helping evolve network protocols and transport layers through <a href="https://www.chromium.org/spdy">SPDY</a>, <a href="https://developers.google.com/web/fundamentals/performance/http2/">HTTP/2</a> and <a href="https://www.chromium.org/quic">QUIC</a>. SPDY aimed to address limitations of HTTP/1.1 and became the foundation of HTTP/2 protocol, which is now supported by all modern browsers. In parallel, the team has been actively iterating on QUIC, which aims to further improve latency and user experience and now has an active IETF effort behind it. QUIC’s benefits are noticeable for video services like YouTube. Users reported <a href="https://blog.chromium.org/2015/04/a-quic-update-on-googles-experimental.html">30% fewer rebuffers</a> when watching videos over QUIC.</span></span></span></h2> <h2> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;"><br /></span></span></h2> <h2> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;"><br /></span></span></h2> <h2> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;">Next up is Chrome's <a href="https://www.chromium.org/developers/the-rendering-critical-path">rendering pipeline</a>. This is responsible for ensuring webpages are responsive to users and display at 60 frames per second (fps). To display content at 60fps, Chrome has <a href="https://developers.google.com/web/fundamentals/performance/rendering/">16ms to render each frame</a>. This includes JavaScript execution, style, layout, paint and pushing pixels to the user's screen. Of this 16ms, the less Chrome uses, the more web developers have to delight their users. Improvements to our rendering pipeline have included o<a href="https://blog.chromium.org/2017/01/performance-improvements-in-chromes.html">ptimizing how we identify which elements in a page need to be redrawn</a> and better tracking visually non-overlapping sets. This reduced the time to paint new frames to the screen by up to 35%. </span></span></h2> <h2> </h2> </div> <h2> </h2> <h2> </h2> <div class="separator" style="clear: both; text-align: center;"> <i style="font-family: inherit;"><span id="docs-internal-guid-3e1547ad-7fff-319f-4365-460a4f4f1f68"><span style="font-family: "arial"; font-size: 10pt; font-style: normal; vertical-align: baseline; white-space: pre-wrap;"><img height="263" src="https://lh3.googleusercontent.com/-C3fECyNPJtEfNd44mxAf2NTcIKMfo8ThnA9KvK2AK1zfeRL5jt2vgutoYQSWBaiIORtMNmPY9164Yjadka3iuDbaTjOZ9Sa8ZVoBQA_QYi1x6kM03QoPjSpHrF-gjap1UEg66W5" style="border: none; transform: rotate(0rad);" width="568" /></span></span></i></div> <div class="separator" style="clear: both; text-align: center;"> <i style="font-family: inherit;">In 2015, a user-centric performance model called <a href="https://www.youtube.com/watch?v=wO9GGY17NXY">RAIL</a> was introduced by the Chrome team. We recently <a href="https://developers.google.com/web/fundamentals/performance/rail">updated</a> it.</i></div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13"> </span> <br /> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13" style="font-family: inherit;"><span id="docs-internal-guid-59fe3fa1-7fff-358e-15b0-39dcb5daf08c"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">What about memory consumption? Between Chrome 63 and 66, a ~20-30% improvement in renderer process memory usage was observed. We hope to continue exploring ways to build on this now that site-isolation has landed. Ignition and TurboFan <a href="https://v8project.blogspot.com/2017/05/launching-ignition-and-turbofan.html">reduced</a> V8's overall memory footprint, slimming it down by 5-10% on all devices and platforms supported by V8. Some sleuthing this year also discovered memory leaks impacting 7% of sites on the web, which we’ve now fully fixed. Many components contribute to Chrome’s speed including the DOM, CSS and storage systems like IndexedDB. To learn more about our improvements to performance, continue keeping an eye on the Chromium Blog. </span></span></span></div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13"> </span> <br /> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> <br /><br /> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0">Give web developers more power to measure and optimize their web pages</span></h2> <div> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span id="docs-internal-guid-6b1fcd26-7fff-4d16-2d52-c081b0984c60"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Understanding where to start with improving your site can be a tedious process. To help, we explored several tools for understanding the <a href="https://developers.google.com/web/fundamentals/performance/speed-tools/#lab_data">lab</a> signals and <a href="https://developers.google.com/web/fundamentals/performance/speed-tools/#field_data">real-world</a> experience felt by your users. Over the years, the <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a> Performance panel became a powerful way to visualize the play-by-play breakdown of how web pages were displayed in a lab setting. To continue lowering the friction for finding <a href="https://developers.google.com/web/updates/2018/05/lighthouse">performance opportunities</a> sites had, we then worked on <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> - a tool for analyzing the quality of your website, giving you clear measurements of your site’s performance and specific guidance for improving your users’ experience. Lighthouse can be accessed directly from inside the DevTools Audits panel, run from the command-line, or integrated with other development products like <a href="http://webpagetest.org/easy">WebPageTest</a>. </span></span></span></div> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-a41d345d-7fff-2f6d-6afe-8f61d71db692"><span style="font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"><img height="357" src="https://lh5.googleusercontent.com/XRvhueCTdF-RFhyFNjrOb-Dcv8XbDkAPLL0YOsXrLru9Fs7W8FoD_RF8uLCCcPwoRir3LS0d5rAYC362-MYtgaa2PrsPRxvaSyidJyaDkKXBjRdgCT1oyViTVAvPmJ8zdcPWzluk" style="border: none; transform: rotate(0rad);" width="602" /></span></span></div> </div> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><i>Lighthouse running in the Chrome DevTools Audits panel</i></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><i></i></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <br /> <div> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><br />To complement the lab data provided by Lighthouse, we released the <a href="https://developers.google.com/web/tools/chrome-user-experience-report/">Chrome User Experience Report</a> to help developers get access to field metrics for the experience their users feel in the real-world, such as <a href="https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics">First Contentful Paint </a>and <a href="https://developers.google.com/web/updates/2018/07/first-input-delay-in-crux">First Input Delay</a>. Now, developers can build out their own custom site performance reports and track progress over millions of origins using the <a href="//g.co/chromeuxdash">CrUX Dashboard</a>.</span><br /> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">We also introduced a number of Web Platform capabilities to help developers optimize the loading of their sites. We shipped <a href="https://w3c.github.io/resource-hints/">Resource Hints</a> and </span></span></span><span style="color: #1155cc; font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://developers.google.com/web/updates/2016/03/link-rel-preload" style="text-decoration-line: none;"><link rel=preload></a> </span><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">to allow developers to inform the browser what resources are critical to load early on. Chrome was one of the first browsers to implement support for byte-saving approaches like <a href="https://github.com/google/brotli">Brotli for compression</a>, <a href="https://developers.googleblog.com/2015/02/smaller-fonts-with-woff-20-and-unicode.html">WOFF2 for smaller web fonts</a> and <a href="https://caniuse.com/webp">WebP support</a> for images. </span><br /> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"> We’ve been excited to see an increasing number of browsers support these features over time. Chrome implemented <a href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers</a>, enabling offline caching & network resilience for repeat visits to pages. We’re delighted to see broad modern <a href="https://caniuse.com/#search=service%20workers">browser support</a> for the feature.</span></span></div> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-3da3a969-7fff-b2c4-2fae-040348678c0f"><span style="font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"><img height="231" src="https://lh5.googleusercontent.com/GWx5WzEFNFsbBSDu6hfD1iZtd5NPKV7lZ7T1tHYWqpHae5V2jqWoQCNL75nF517pcY16RMWZO24L0-YJVPwsEJBcMDdVmBal0MlvTuYYFwjOGbBIDPoWjVz4Ozy50u5T0StTdCoJ" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="602" /></span></span></div> </div> <div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span> </span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: left;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-fa84e249-7fff-3449-fab3-162904bf636a"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">In fact, Google Search now uses Service Worker and <a href="https://developers.google.com/web/updates/2017/02/navigation-preload">navigation preload</a> for opportunistic caching on repeat searches. This led to a 2x improvement in page load times for repeat visits. </span></span></span></span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">As we look to the future, we are also excited about the potential that emerging standards like native lazy-loading for images & iframes, and image formats like <a href="https://en.wikipedia.org/wiki/AV1">AV1</a> have to help deliver content to users efficiently.</span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><br /></span></span></span></span></div> <div> <h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b">Enjoy more of the web on your data-plan with Chrome</span></span></span></span></span></h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"></span></span> </span></span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: left; white-space: pre-wrap;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Over the last 10 years, the size of web pages has been <a href="https://httparchive.org/reports/state-of-the-web#bytesTotal">ever-increasing</a>, but for many users coming online for the first time, data can be prohibitively expensive or painfully slow. To help, Chrome released data-conscious features over the years like Chrome’s Data Saver. Data Saver intelligently optimizes pages, saving up to 92% on data consumption. </span></span></span></span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span></span></span></span> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Going ahead, we are exploring new ways to help you save data. For users on the slowest connections, we've been working on <a href="https://play.google.com/store/apps/details?id=com.android.chrome&hl=en">Chrome for Android</a>, allowing for smarter page optimizations to show essential content earlier. These page transformations load far faster than the full page, and we're continuing to improve our fidelity, coverage, and performance.<br /> </span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">We've also been experimenting with putting guardrails in place for users who are data- or network- constrained. For example, we're exploring bringing <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/czmmZUd4Vww/1-H6j-zdAwAJ">native lazy-loading</a> to Chrome, as well as providing users the option to stop additional requests from a page when it uses a lot of data. </span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> </span></span></span><br /> <h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span></span></span></span></h2> <h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">We’re just getting started...</span></span></span></span></h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><br /></span></span></span> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-family: inherit; font-size: 11pt; line-height: 1.38; white-space: pre-wrap;">Together, these changes help developers and businesses deliver useful content to their users sooner. We know there’s still work to be done. Here’s to offering improvements to page load performance over another 10 years! </span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit; font-size: 11pt; line-height: 1.38; white-space: pre-wrap;"><br /></span></span> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> </span></span></span><br /> <div style="font-size: 11pt; white-space: pre-wrap;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline;">Posted by Addy Osmani, JavaScript Janitor</span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span></div> </div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> <style> * { line-height: 1.38 !important; white-space: initial !important; } ul { font-size: 11pt !important; } li { line-height: 1.38 !important; } img { margin-bottom: 0 !important; } i { text-align: center !important; } </style> <span id="docs-internal-guid-ec9454c6-7fff-b0cd-07e3-80f5f797c50c"></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Speed has been one of Chrome’s <a href="https://www.chromium.org/developers/core-principles">four core principles</a>, since it was first launched ten years ago. We’ve always wanted to enable web developers to provide users with fast, engaging web experiences. On Chrome’s 10th birthday, we thought it would be fun to look at what we’ve done to improve speed over the years and what we’re doing next.</span></span></div> <h2> </h2> <h2> <br /> <br />Many components in the browser contribute to speed</h2> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><a href="https://v8project.blogspot.com/">V8</a> is Chrome’s JavaScript and WebAssembly engine. With web pages using an increasing amount of JavaScript, a fast engine to handle it is an important cornerstone. Over the years, we worked on a <a href="https://v8project.blogspot.com/2017/05/launching-ignition-and-turbofan.html">new JavaScript execution pipeline</a> for V8, launching <a href="https://github.com/v8/v8/wiki/Interpreter">Ignition</a> (a new interpreter) and <a href="https://github.com/v8/v8/wiki/TurboFan">TurboFan</a> (an optimizing compiler). These allowed us to improve performance on the Speedometer benchmark by 5-10%. <a href="https://blog.chromium.org/2015/03/new-javascript-techniques-for-rapid.html">Script streaming</a> enabled us to parse JavaScript on a background thread as soon as it began downloading, improving page loads by up to 10%. We then added <a href="https://v8project.blogspot.com/2018/03/background-compilation.html">background compilation</a> reducing main-thread compile time by up to 20%.</span></span></div> <div> <div style="text-align: center;"> <span id="docs-internal-guid-3be9ef50-7fff-5039-8ce7-893f54546c2e"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span></div> </div> <div> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-adb96e8d-7fff-757e-66a0-2977db51a02d"><span style="font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"><img height="294" src="https://lh3.googleusercontent.com/wI5N-pC7UdVTh0aIaAFZX_26Xj6P4r7W48qL7OGKwOAVUXGHsKl6CoQSGZ0itp-4epkeqdVvyd2TSA2s4LyIOSEJOdv6zqg4TrEBMM8eL9NjFgHPT58wDt4DbaeZnTeyXhakdMCd" style="border: none; transform: rotate(0rad);" width="510" /></span></span></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <span style="font-size: 14.6667px; white-space: pre-wrap;">Our work on project <a href="https://v8project.blogspot.com/2016/04/jank-busters-part-two-orinoco.html">Orinoco</a> enabled concurrent garbage collection, freeing up the main thread and reducing jank. Over time, we also shifted to focusing on <a href="https://blog.chromium.org/2017/04/real-world-javascript-performance.html">real-world JavaScript performance</a>, helping us<a href="https://v8project.blogspot.com/2018/01/speedometer-2.html"> double the performance of the React.js runtime</a> and improve performance for libraries like Vue.js, Preact, and Angular up to 40%. Parallel, concurrent, and incremental garbage collection reduced garbage collection induced jank by 100× since the initial V8 commit. We also implemented <a href="https://webassembly.org/">WebAssembly</a>, enabling developers to run non-JavaScript code on the web with predictable performance, and launched the <a href="https://v8project.blogspot.com/2018/08/liftoff.html">Liftoff</a> baseline compiler to ensure fast startup times of WASM apps. These new components are just the latest in a <a href="https://v8project.blogspot.com/2018/09/10-years.html">10-year effort</a> that has improved V8's performance release-to-release for an improvement of 20x over the years.</span></div> <div class="separator" style="clear: both; text-align: center;"> </div> <span id="docs-internal-guid-3dd7b7e9-7fff-478d-262b-df6d1293a86b"><span style="font-family: inherit;"><span id="docs-internal-guid-a73d4e74-7fff-e00c-ef2f-298692bb6939"><span style="font-family: "arial"; font-size: 8pt; vertical-align: baseline; white-space: pre-wrap;"><img height="276" src="https://lh4.googleusercontent.com/PNhgg5pewdR5O3ffj_-cLuLVVsRXBh0KnL6SaZ3ebgsr7brseUBukaqHRQ761nmghrpXJ5zjDbWhFFTyCHuaodawNFWVZde7o8HVIgwBi6qPtXEI9I_njv_uYbKY_D2m94Znc2ps" style="border: none; transform: rotate(0rad);" title="Chart" width="602" /></span></span><i><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br />V8 Bench scores for a range of Chrome releases over the years. V8 Bench is the predecessor to the old Octane benchmark. We've used it for this chart because unlike Octane, it can run in all Chrome versions, including the initial Chrome Beta.</span></i></span></span></div> <br /> <h2> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;">Chrome has also played a key role in helping evolve network protocols and transport layers through <a href="https://www.chromium.org/spdy">SPDY</a>, <a href="https://developers.google.com/web/fundamentals/performance/http2/">HTTP/2</a> and <a href="https://www.chromium.org/quic">QUIC</a>. SPDY aimed to address limitations of HTTP/1.1 and became the foundation of HTTP/2 protocol, which is now supported by all modern browsers. In parallel, the team has been actively iterating on QUIC, which aims to further improve latency and user experience and now has an active IETF effort behind it. QUIC’s benefits are noticeable for video services like YouTube. Users reported <a href="https://blog.chromium.org/2015/04/a-quic-update-on-googles-experimental.html">30% fewer rebuffers</a> when watching videos over QUIC.</span></span></span></h2> <h2> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;"><br /></span></span></h2> <h2> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;"><br /></span></span></h2> <h2> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;">Next up is Chrome's <a href="https://www.chromium.org/developers/the-rendering-critical-path">rendering pipeline</a>. This is responsible for ensuring webpages are responsive to users and display at 60 frames per second (fps). To display content at 60fps, Chrome has <a href="https://developers.google.com/web/fundamentals/performance/rendering/">16ms to render each frame</a>. This includes JavaScript execution, style, layout, paint and pushing pixels to the user's screen. Of this 16ms, the less Chrome uses, the more web developers have to delight their users. Improvements to our rendering pipeline have included o<a href="https://blog.chromium.org/2017/01/performance-improvements-in-chromes.html">ptimizing how we identify which elements in a page need to be redrawn</a> and better tracking visually non-overlapping sets. This reduced the time to paint new frames to the screen by up to 35%. </span></span></h2> <h2> </h2> </div> <h2> </h2> <h2> </h2> <div class="separator" style="clear: both; text-align: center;"> <i style="font-family: inherit;"><span id="docs-internal-guid-3e1547ad-7fff-319f-4365-460a4f4f1f68"><span style="font-family: "arial"; font-size: 10pt; font-style: normal; vertical-align: baseline; white-space: pre-wrap;"><img height="263" src="https://lh3.googleusercontent.com/-C3fECyNPJtEfNd44mxAf2NTcIKMfo8ThnA9KvK2AK1zfeRL5jt2vgutoYQSWBaiIORtMNmPY9164Yjadka3iuDbaTjOZ9Sa8ZVoBQA_QYi1x6kM03QoPjSpHrF-gjap1UEg66W5" style="border: none; transform: rotate(0rad);" width="568" /></span></span></i></div> <div class="separator" style="clear: both; text-align: center;"> <i style="font-family: inherit;">In 2015, a user-centric performance model called <a href="https://www.youtube.com/watch?v=wO9GGY17NXY">RAIL</a> was introduced by the Chrome team. We recently <a href="https://developers.google.com/web/fundamentals/performance/rail">updated</a> it.</i></div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13"> </span> <br /> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13" style="font-family: inherit;"><span id="docs-internal-guid-59fe3fa1-7fff-358e-15b0-39dcb5daf08c"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">What about memory consumption? Between Chrome 63 and 66, a ~20-30% improvement in renderer process memory usage was observed. We hope to continue exploring ways to build on this now that site-isolation has landed. Ignition and TurboFan <a href="https://v8project.blogspot.com/2017/05/launching-ignition-and-turbofan.html">reduced</a> V8's overall memory footprint, slimming it down by 5-10% on all devices and platforms supported by V8. Some sleuthing this year also discovered memory leaks impacting 7% of sites on the web, which we’ve now fully fixed. Many components contribute to Chrome’s speed including the DOM, CSS and storage systems like IndexedDB. To learn more about our improvements to performance, continue keeping an eye on the Chromium Blog. </span></span></span></div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13"> </span> <br /> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> <br /><br /> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0">Give web developers more power to measure and optimize their web pages</span></h2> <div> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span id="docs-internal-guid-6b1fcd26-7fff-4d16-2d52-c081b0984c60"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Understanding where to start with improving your site can be a tedious process. To help, we explored several tools for understanding the <a href="https://developers.google.com/web/fundamentals/performance/speed-tools/#lab_data">lab</a> signals and <a href="https://developers.google.com/web/fundamentals/performance/speed-tools/#field_data">real-world</a> experience felt by your users. Over the years, the <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a> Performance panel became a powerful way to visualize the play-by-play breakdown of how web pages were displayed in a lab setting. To continue lowering the friction for finding <a href="https://developers.google.com/web/updates/2018/05/lighthouse">performance opportunities</a> sites had, we then worked on <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> - a tool for analyzing the quality of your website, giving you clear measurements of your site’s performance and specific guidance for improving your users’ experience. Lighthouse can be accessed directly from inside the DevTools Audits panel, run from the command-line, or integrated with other development products like <a href="http://webpagetest.org/easy">WebPageTest</a>. </span></span></span></div> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-a41d345d-7fff-2f6d-6afe-8f61d71db692"><span style="font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"><img height="357" src="https://lh5.googleusercontent.com/XRvhueCTdF-RFhyFNjrOb-Dcv8XbDkAPLL0YOsXrLru9Fs7W8FoD_RF8uLCCcPwoRir3LS0d5rAYC362-MYtgaa2PrsPRxvaSyidJyaDkKXBjRdgCT1oyViTVAvPmJ8zdcPWzluk" style="border: none; transform: rotate(0rad);" width="602" /></span></span></div> </div> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><i>Lighthouse running in the Chrome DevTools Audits panel</i></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><i></i></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <br /> <div> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><br />To complement the lab data provided by Lighthouse, we released the <a href="https://developers.google.com/web/tools/chrome-user-experience-report/">Chrome User Experience Report</a> to help developers get access to field metrics for the experience their users feel in the real-world, such as <a href="https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics">First Contentful Paint </a>and <a href="https://developers.google.com/web/updates/2018/07/first-input-delay-in-crux">First Input Delay</a>. Now, developers can build out their own custom site performance reports and track progress over millions of origins using the <a href="//g.co/chromeuxdash">CrUX Dashboard</a>.</span><br /> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">We also introduced a number of Web Platform capabilities to help developers optimize the loading of their sites. We shipped <a href="https://w3c.github.io/resource-hints/">Resource Hints</a> and </span></span></span><span style="color: #1155cc; font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://developers.google.com/web/updates/2016/03/link-rel-preload" style="text-decoration-line: none;"><link rel=preload></a> </span><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">to allow developers to inform the browser what resources are critical to load early on. Chrome was one of the first browsers to implement support for byte-saving approaches like <a href="https://github.com/google/brotli">Brotli for compression</a>, <a href="https://developers.googleblog.com/2015/02/smaller-fonts-with-woff-20-and-unicode.html">WOFF2 for smaller web fonts</a> and <a href="https://caniuse.com/webp">WebP support</a> for images. </span><br /> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"> We’ve been excited to see an increasing number of browsers support these features over time. Chrome implemented <a href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers</a>, enabling offline caching & network resilience for repeat visits to pages. We’re delighted to see broad modern <a href="https://caniuse.com/#search=service%20workers">browser support</a> for the feature.</span></span></div> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-3da3a969-7fff-b2c4-2fae-040348678c0f"><span style="font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"><img height="231" src="https://lh5.googleusercontent.com/GWx5WzEFNFsbBSDu6hfD1iZtd5NPKV7lZ7T1tHYWqpHae5V2jqWoQCNL75nF517pcY16RMWZO24L0-YJVPwsEJBcMDdVmBal0MlvTuYYFwjOGbBIDPoWjVz4Ozy50u5T0StTdCoJ" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="602" /></span></span></div> </div> <div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span> </span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: left;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-fa84e249-7fff-3449-fab3-162904bf636a"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">In fact, Google Search now uses Service Worker and <a href="https://developers.google.com/web/updates/2017/02/navigation-preload">navigation preload</a> for opportunistic caching on repeat searches. This led to a 2x improvement in page load times for repeat visits. </span></span></span></span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">As we look to the future, we are also excited about the potential that emerging standards like native lazy-loading for images & iframes, and image formats like <a href="https://en.wikipedia.org/wiki/AV1">AV1</a> have to help deliver content to users efficiently.</span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><br /></span></span></span></span></div> <div> <h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b">Enjoy more of the web on your data-plan with Chrome</span></span></span></span></span></h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"></span></span> </span></span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: left; white-space: pre-wrap;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Over the last 10 years, the size of web pages has been <a href="https://httparchive.org/reports/state-of-the-web#bytesTotal">ever-increasing</a>, but for many users coming online for the first time, data can be prohibitively expensive or painfully slow. To help, Chrome released data-conscious features over the years like Chrome’s Data Saver. Data Saver intelligently optimizes pages, saving up to 92% on data consumption. </span></span></span></span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span></span></span></span> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Going ahead, we are exploring new ways to help you save data. For users on the slowest connections, we've been working on <a href="https://play.google.com/store/apps/details?id=com.android.chrome&hl=en">Chrome for Android</a>, allowing for smarter page optimizations to show essential content earlier. These page transformations load far faster than the full page, and we're continuing to improve our fidelity, coverage, and performance.<br /> </span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">We've also been experimenting with putting guardrails in place for users who are data- or network- constrained. For example, we're exploring bringing <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/czmmZUd4Vww/1-H6j-zdAwAJ">native lazy-loading</a> to Chrome, as well as providing users the option to stop additional requests from a page when it uses a lot of data. </span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> </span></span></span><br /> <h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span></span></span></span></h2> <h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">We’re just getting started...</span></span></span></span></h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><br /></span></span></span> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-family: inherit; font-size: 11pt; line-height: 1.38; white-space: pre-wrap;">Together, these changes help developers and businesses deliver useful content to their users sooner. We know there’s still work to be done. Here’s to offering improvements to page load performance over another 10 years! </span></span></span></span><br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit; font-size: 11pt; line-height: 1.38; white-space: pre-wrap;"><br /></span></span> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> </span></span></span><br /> <div style="font-size: 11pt; white-space: pre-wrap;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline;">Posted by Addy Osmani, JavaScript Janitor</span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span></div> </div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:10 years of Speed in Chrome&url=https://blog.chromium.org/2018/09/10-years-of-speed-in-chrome_11.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2018/09/10-years-of-speed-in-chrome_11.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2018/09/10-years-of-speed-in-chrome_11.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/10th%20birthday' rel='tag'> 10th birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/birthday' rel='tag'> birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/chrome' rel='tag'> chrome </a> , <a class='label' href='https://blog.chromium.org/search/label/performance' rel='tag'> performance </a> , <a class='label' href='https://blog.chromium.org/search/label/speed' rel='tag'> speed </a> , <a class='label' href='https://blog.chromium.org/search/label/v8' rel='tag'> v8 </a> </span> </div> </div> </div> <div class='post' data-id='1830110844662528196' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2018/09/how-we-designed-chrome-10-years-ago.html' itemprop='url' title='How we designed Chrome 10 years ago'> How we designed Chrome 10 years ago </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Monday, September 10, 2018 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-9b00fc96-7fff-8f12-a322-fdad72a319cc"></span></span></div> <div style="line-height: 1.38; margin-bottom: 4pt; margin-top: 14pt;"> <span style="font-family: inherit; font-size: x-small;"><span style="background-color: transparent; color: #434343; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">NOTE: This article was inspired by a conversation with </span><a href="https://twitter.com/darinwf" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Darin Fisher</span></a><span style="background-color: transparent; color: #434343; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, VP for Google Chrome, for our </span><a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIC60856GnLEV5GQXMxc9ByJ" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">YouTube</span></a><span style="background-color: transparent; color: #434343; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> series “Designer vs. Developer”.</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">To release a browser when there were already established ones in the market was a bold move—especially when some of the major browsers were clocking over a million downloads within just hours of their release.</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"> </span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">The community speculated about a Google browser as early as 2004, but the team actually started working on the project in 2006. With the rise in rich web applications such as Gmail, YouTube, and Google Maps, the demand for more powerful browsers became apparent. These new web apps were processor-intensive and the browsers weren’t designed to handle that level of complexity. </span></div> <b id="docs-internal-guid-8d1dd74a-7fff-6678-ac56-13698a088e0d" style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">“In your typical browser of that day, if you were to leave Gmail running overnight, you would come back the next day and your browser would feel pretty sluggish.”</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">– Darin Fisher, VP Chrome</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Browsers of that time mimicked what early search engines had done, diluting the focus on the core user experience. Search engines were mostly portal sites with a sea of links and a tiny input field. Google Search stripped away the clutter, offering the user a single input field, and focused on a single task. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Web browsers had created a similar problem with excessive toolbars. Whenever users installed a new app, they were offered an extra toolbar. Eventually, the browser UI dominated the user's screen real estate and left very little space for content. Chrome wanted to do what Google did with search: focus on </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">content</span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. The team wanted to get out of the user’s way and include features that weren’t possible before, such as draggable tabs. Even the extension system was built to ensure that the screen space for content wasn’t compromised and that the surrounding UI was minimized as much as possible. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">The mantra for Chrome was the four S’s: simplicity, speed, security, and stability.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Simplicity represented the streamlined UI design and experience. Speed was about how quickly the browser responded when a user performed an action. Speed wasn’t just about load time, either. Before Chrome, browsers would often hang or fail to respond when a user tried to close a tab, had too many tabs open, or was doing something complicated on a page. Chrome worked on a multiprocessor architecture, so if the user clicked to close a tab, it would simply close. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Security was about making users feel safe on the web, protecting them from any nasties on the internet such as viruses or fake sites, and giving them control over what was happening. This tied into the final S -- Stability of the browser, ensuring that it wouldn’t randomly crash. The team put a lot of effort in making sure it supported the many quirks on the web and rendered pages in a way that web developers intended. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">I asked Darin about the things he is proud of and the decisions he regretted. He mentioned the liberation of starting with the Windows version, which meant his teams could focus on building a great browser without thinking about any cross-platform issues. While it maintained the free-spirit of development for the team, to their peril, they had to recreate everything from scratch when building for mobile, MacOS and Linux - a painful but critical learning of ‘thinking long-term’ for him and the team.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">The other challenge I asked him about was the dreaded “best viewed in browser X” banner message that was common in the early 2000s, indicating that site content might not show properly on some browsers (including Chrome). Today, Chrome is working with other browsers vendors, the W3C committee, and especially developers, to make sure we’re solving the right problems for the community, such as the cross-collaboration work we did when implementing CSS Grid. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">What do the next ten years hold? As new computers, mobile devices, and users come online, the most likely effect will be that design patterns and trends from Asia and Africa become the standard way of experiencing digital design. Web makers in India have pioneered offline experiences, and app designers in Nigeria are developing new ways of delivering Ecommerce experiences to users on 2G networks. </span></span></div> <span style="font-family: inherit;"><br /></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">So, here’s to the next ten years. Happy birthday, Chrome!</span></span><br /> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/D1suVAsWTcs/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/D1suVAsWTcs?feature=player_embedded" width="600"></iframe></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Posted by <a href="http://twitter.com/mustafa_x">Mustafa Kurtuldu, Design Advocate</a></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-size: 14.6667px; white-space: pre-wrap;"><br /></span></div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-9b00fc96-7fff-8f12-a322-fdad72a319cc"></span></span></div> <div style="line-height: 1.38; margin-bottom: 4pt; margin-top: 14pt;"> <span style="font-family: inherit; font-size: x-small;"><span style="background-color: transparent; color: #434343; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">NOTE: This article was inspired by a conversation with </span><a href="https://twitter.com/darinwf" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Darin Fisher</span></a><span style="background-color: transparent; color: #434343; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, VP for Google Chrome, for our </span><a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIC60856GnLEV5GQXMxc9ByJ" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">YouTube</span></a><span style="background-color: transparent; color: #434343; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> series “Designer vs. Developer”.</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">To release a browser when there were already established ones in the market was a bold move—especially when some of the major browsers were clocking over a million downloads within just hours of their release.</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"> </span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">The community speculated about a Google browser as early as 2004, but the team actually started working on the project in 2006. With the rise in rich web applications such as Gmail, YouTube, and Google Maps, the demand for more powerful browsers became apparent. These new web apps were processor-intensive and the browsers weren’t designed to handle that level of complexity. </span></div> <b id="docs-internal-guid-8d1dd74a-7fff-6678-ac56-13698a088e0d" style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">“In your typical browser of that day, if you were to leave Gmail running overnight, you would come back the next day and your browser would feel pretty sluggish.”</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">– Darin Fisher, VP Chrome</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Browsers of that time mimicked what early search engines had done, diluting the focus on the core user experience. Search engines were mostly portal sites with a sea of links and a tiny input field. Google Search stripped away the clutter, offering the user a single input field, and focused on a single task. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Web browsers had created a similar problem with excessive toolbars. Whenever users installed a new app, they were offered an extra toolbar. Eventually, the browser UI dominated the user's screen real estate and left very little space for content. Chrome wanted to do what Google did with search: focus on </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">content</span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. The team wanted to get out of the user’s way and include features that weren’t possible before, such as draggable tabs. Even the extension system was built to ensure that the screen space for content wasn’t compromised and that the surrounding UI was minimized as much as possible. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">The mantra for Chrome was the four S’s: simplicity, speed, security, and stability.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Simplicity represented the streamlined UI design and experience. Speed was about how quickly the browser responded when a user performed an action. Speed wasn’t just about load time, either. Before Chrome, browsers would often hang or fail to respond when a user tried to close a tab, had too many tabs open, or was doing something complicated on a page. Chrome worked on a multiprocessor architecture, so if the user clicked to close a tab, it would simply close. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Security was about making users feel safe on the web, protecting them from any nasties on the internet such as viruses or fake sites, and giving them control over what was happening. This tied into the final S -- Stability of the browser, ensuring that it wouldn’t randomly crash. The team put a lot of effort in making sure it supported the many quirks on the web and rendered pages in a way that web developers intended. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">I asked Darin about the things he is proud of and the decisions he regretted. He mentioned the liberation of starting with the Windows version, which meant his teams could focus on building a great browser without thinking about any cross-platform issues. While it maintained the free-spirit of development for the team, to their peril, they had to recreate everything from scratch when building for mobile, MacOS and Linux - a painful but critical learning of ‘thinking long-term’ for him and the team.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">The other challenge I asked him about was the dreaded “best viewed in browser X” banner message that was common in the early 2000s, indicating that site content might not show properly on some browsers (including Chrome). Today, Chrome is working with other browsers vendors, the W3C committee, and especially developers, to make sure we’re solving the right problems for the community, such as the cross-collaboration work we did when implementing CSS Grid. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">What do the next ten years hold? As new computers, mobile devices, and users come online, the most likely effect will be that design patterns and trends from Asia and Africa become the standard way of experiencing digital design. Web makers in India have pioneered offline experiences, and app designers in Nigeria are developing new ways of delivering Ecommerce experiences to users on 2G networks. </span></span></div> <span style="font-family: inherit;"><br /></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">So, here’s to the next ten years. Happy birthday, Chrome!</span></span><br /> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/D1suVAsWTcs/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/D1suVAsWTcs?feature=player_embedded" width="600"></iframe></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Posted by <a href="http://twitter.com/mustafa_x">Mustafa Kurtuldu, Design Advocate</a></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-size: 14.6667px; white-space: pre-wrap;"><br /></span></div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:How we designed Chrome 10 years ago&url=https://blog.chromium.org/2018/09/how-we-designed-chrome-10-years-ago.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2018/09/how-we-designed-chrome-10-years-ago.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2018/09/how-we-designed-chrome-10-years-ago.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/10th%20birthday' rel='tag'> 10th birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/birthday' rel='tag'> birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/browser' rel='tag'> browser </a> , <a class='label' href='https://blog.chromium.org/search/label/chrome' rel='tag'> chrome </a> , <a class='label' href='https://blog.chromium.org/search/label/design' rel='tag'> design </a> </span> </div> </div> </div> <div class='post' data-id='6946175971572240791' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2018/09/10-years-of-chrome-devtools.html' itemprop='url' title='10 Years of Chrome DevTools'> 10 Years of Chrome DevTools </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Thursday, September 6, 2018 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> <style> * { line-height: 1.38 !important; white-space: initial !important; } ul { font-size: 11pt !important; } li { line-height: 1.38 !important; } img { margin-bottom: 0 !important; } i { text-align: center !important; } </style> <span id="docs-internal-guid-ec9454c6-7fff-b0cd-07e3-80f5f797c50c"></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Chrome is turning 10! Thank you for making the web development community so open, collaborative, and supportive. DevTools draws inspiration from countless other projects. Here’s a look back at how DevTools came about, and how it’s changed over the years.</span></span></div> <h2> </h2> <h2> <br /> <br /> In the beginning, there was Firebug</h2> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Imagine for a moment that browsers didn't ship with developer tools. How would you debug JavaScript? You'd basically have 3 options: </span></span></div> <ul style="margin-bottom: 0pt; margin-top: 0pt;"> <li>Sprinkle window.alert() calls throughout your code.</li> <li><span style="font-family: inherit;">Comment out sections of code.</span></li> <li><span style="font-family: inherit;">Stare at the code for a long time until the JavaScript gods bless you with a solution.</span></li> </ul> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><span id="docs-internal-guid-1364be6a-7fff-ebb2-5b95-b3f4397a0f56"></span></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">What about layout issues? Network errors? Again, all you could really do is conduct painstaking experiments in your code. This was the reality of web development up until 2006. Then a little tool called Firebug came along and changed everything.</span></span></div> <div> <div style="text-align: center;"> <span id="docs-internal-guid-3be9ef50-7fff-5039-8ce7-893f54546c2e"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span></div> </div> <div> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://lh3.googleusercontent.com/kERZXRq3XId5YhSowkwb1zsafnmU65qdo3XM2lNlPQ45xCMYu39EnpDzXTxmXG7mtwwSHYvenQJzzrDwcSZgWqhA-1MoiCFIIZWKRSV1H6sLBpFqkUxx5orAf23KAPnCDETC4GJ0" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="284" src="https://lh3.googleusercontent.com/kERZXRq3XId5YhSowkwb1zsafnmU65qdo3XM2lNlPQ45xCMYu39EnpDzXTxmXG7mtwwSHYvenQJzzrDwcSZgWqhA-1MoiCFIIZWKRSV1H6sLBpFqkUxx5orAf23KAPnCDETC4GJ0" style="border: none; transform: rotate(0rad);" width="624" /></a></div> <span id="docs-internal-guid-3dd7b7e9-7fff-478d-262b-df6d1293a86b"><span style="font-family: inherit;"><i><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /><br />A screenshot of Firebug's Net panel, taken from </span><a href="https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Saying Goodbye to Firebug</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> (</span><a href="https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/10/net-panel.gif" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">source</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://creativecommons.org/licenses/by-sa/3.0/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">license</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">)</span></i></span></span></div> <br /> <span id="docs-internal-guid-3d89f233-7fff-8163-4da1-23fd99b66d1c"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Firebug was a Firefox extension that let you debug, edit, and monitor pages in real-time. As a web developer suddenly you went from having no visibility into your pages to having what are essentially the core features of modern developer tools. The ability to understand exactly why Firefox was behaving as it was unleashed a flood of creativity on the web. Without Firebug, the Web 2.0 era wouldn't have been possible.</span></span></span><br /> <h2> </h2> </div> <h2> </h2> <h2> </h2> <h2> <br /><br /><br /> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0">WebKit Web Inspector</span></h2> <div> <br /></div> <h2> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;">Around the same time as Firebug’s launch, a few Google engineers started working on a project which would eventually lead to Chrome. From the start, Chrome was a mashup of different code libraries. For rendering the Chrome engineers opted for WebKit, which is the open-source project that still powers Safari to this day. An added bonus of using WebKit was that it came with a handy tool called the Web Inspector.</span></span></span><img height="488" src="https://lh4.googleusercontent.com/26HnJ-nCLzoDc5IZXj-zH_APHKIvlL_xGBa2iC-haDOjljkTCMc6kBG-2aPBZCeWhUCafZqT5UVJKjb9kbmjrGUBz_MlI7ejR263KMZtt4T_De-z3ZkkNses8PFa_R8ouIzoLFdI" style="border: none; font-family: arial; font-size: 11pt; text-align: center; transform: rotate(0rad); white-space: pre-wrap;" width="624" /></h2> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0"></span> <br /> <div style="text-align: center;"> <span style="font-family: inherit;"><i style="font-family: inherit;">A screenshot of the Web Inspector, taken from <a href="https://webkit.org/blog/197/web-inspector-redesign/">Web Inspector Redesign</a> (<a href="https://webkit.org/blog-files/inspector-elements-panel.png">source</a> and <a href="https://webkit.org/licensing-webkit/">license</a>)</i></span></div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13"> </span> <br /> <div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13" style="font-family: inherit;"><span id="docs-internal-guid-59fe3fa1-7fff-358e-15b0-39dcb5daf08c"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Like the Net panel of Firebug, the original Web Inspector probably looks familiar. Much of its functionality lives on to this day as the Elements panel in Chrome DevTools. Web Inspector launched a few days after Firebug, and Safari was the first browser to bundle developer tooling directly into the browser.</span></span></span></div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13"> </span> <br /> <h2> </h2> <h2> <br /><br /><br /> The "Inspect Element" era</h2> <div> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span id="docs-internal-guid-6b1fcd26-7fff-4d16-2d52-c081b0984c60"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Chrome brought many innovative ideas to the browser ecosystem, such as the omnibox that combined search and the address bar, and a multi-process architecture that prevented one hanging tab from crashing the entire browser. But the innovation we like the most was providing developer tools in every build to every user, exposed with the click of a mouse.</span></span></span></div> <div style="text-align: center;"> <span id="docs-internal-guid-ce8d53d8-7fff-e5a5-3060-2d21d8471c47"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="316" src="https://lh3.googleusercontent.com/sioL979MZDJ6Y-eTtvV1z88gOx4ExsyOXmsK3mUIjX-FUOdGeM29MOTJpPlcxkebmOEth26gCUUVnIISXGnz8vT8YvtuyDwXFltxtSUm3U0zDgJF37091142hg_rZwv4Q3whpzOY" style="border: none; transform: rotate(0rad);" width="624" /></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"></span><br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><i>"Inspect Element" in 2010</i></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><i></i></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <br /> <div> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><br />Before Chrome, developer tooling was an opt-in experience. You either had to install an extension, like Firebug, or enable some flags, as is still the case in Safari today. Chrome was the first browser to make developer tooling accessible from every browser instance. We'd like to claim that we had a grand vision for creating a developer-friendly browser from the start, but the reality is that Chrome had a lot of compatibility issues in its early days (which makes sense, since no one was building for it) and we needed to give web developers an easy way to fix these issues. Web developers told us that it was a useful feature, and we kept it.</span><br /> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span id="docs-internal-guid-93ca2391-7fff-e5e7-7a6d-b6316e3ea5a6"> </span> </span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span id="docs-internal-guid-93ca2391-7fff-e5e7-7a6d-b6316e3ea5a6"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span id="docs-internal-guid-93ca2391-7fff-e5e7-7a6d-b6316e3ea5a6"> </span></span> <br /> <h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> The mobile era</span></h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">For the first few years of the DevTools project, we essentially added chapters to the stories that Firebug and Web Inspector started. The next big shift in how we approached DevTools happened when it became clear that smartphones were here to stay.</span></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><span id="docs-internal-guid-3790cada-7fff-1ee9-a482-454cfeb00142"></span></span></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Our first mission in this brave new world was to enable developers to debug real mobile devices from their development machines, which we call remote debugging. DevTools was actually well-positioned to handle remote debugging, thanks to another consequence of Chrome’s multi-process architecture. Early on in the DevTools project we realized that the only way a debugger could reliably access a multi-process browser was through a client-server protocol, with the browser being the server, and the debugger being the client. When mobile Chrome came around, the protocol was already baked into it, so we just had to make the DevTools running on your development machine communicate with the Chrome running on your mobile device over the protocol. This protocol still forms the backbone of DevTools today, and is now known as the </span><a href="https://chromedevtools.github.io/devtools-protocol/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Chrome DevTools Protocol</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></span></span></div> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="247" src="https://lh4.googleusercontent.com/qf_D1vUxYpaulQIPdXqjQFZfl3jzDSaZIB4XJrckdiLWYNfRaTy0PIzuwaUUisqfM9qMoq4UFpWsDtuJHAFuPhnVBvjoPk_uYbFf-R7NSGJGiXOIWtUMxh8bhn4BGQRKa5qGkg61" style="border: none; transform: rotate(0rad);" width="624" /></span></span></div> <div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"></span></span></span><br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: center; white-space: pre-wrap;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><i>Remote Debugging</i></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span> </span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: left;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-fa84e249-7fff-3449-fab3-162904bf636a"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">Remote debugging was a step in the right direction, and to this day is still the primary tool for making sure that your sites behave reasonably on real mobile devices. Over time, however, we realized that remote debugging could be a bit tedious. When you're in the early phases of building out a site or feature, you usually just need a first-order approximation of the mobile experience. This prompted us to create a set of mobile simulation features, such as</span></span></span></span><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">:</span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <ul><span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <li>Precisely emulating the mobile viewport, simulating touch-based input and device orientation.</li> <li>Throttling the network connection to simulate 3G and CPU to simulate less-powerful mobile hardware.</li> <li>Spoofing user agent, geolocation, accelerometer data and more.</li> </span></span></span></ul> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 14.6667px; white-space: pre-wrap;">We collectively refer to these features as Device Mode.</span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 14.6667px; white-space: pre-wrap;"></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span id="docs-internal-guid-17cc4d5a-7fff-1e86-2ad7-93db1b440440"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="286" src="https://lh6.googleusercontent.com/SZlk5tXgHa-VywxFkTPYSq13aQ3CkxjkydXmO7SYMbdNg7SMfn_ILSH-4uPBBUKANJ0jQvSoTgyTzYc5u-3Xc_9T0jAahWmaUGUaTNXoAQMyiflT50JJj0EnnbBTQESSu8ouFL7l" style="border: none; transform: rotate(0rad);" width="400" /></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span id="docs-internal-guid-ec6cc38a-7fff-63e6-26bd-14396e415ad5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i><br /><br /><br />An early prototype of Device Mode</i></span></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i></i></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span id="docs-internal-guid-d131d51d-7fff-57e9-6f8b-805cb235898c"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="335" src="https://lh4.googleusercontent.com/su2lTgS6_TSjcPyYI-kW2Cw54gl_t1JdCb_w1gJzlhl1FCy77MsvgK6WSPQy2UHWR9JJHBkDpXl8nNCXi_H_0SoeOsxBIFOJEQCuT-yVBgyf0mutCRJbMa-BFKy3meMCHlTALSh5" style="border: none; transform: rotate(0rad);" width="400" /></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span id="docs-internal-guid-17775faf-7fff-d583-82db-67ba4079732b"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i>Device Mode in 2018</i></span></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <div style="text-align: left;"> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i></i></span></span></div> <div style="text-align: left;"> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i></i></span></span></div> <div> <br /> <br /> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b">The performance era</span></span></h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"></span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: left; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">While the mobile era unfolded, big apps like Gmail were pushing the limits of the web's capabilities. </span><a href="https://youtu.be/x9Jlu_h_Lyw" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">Gmail-scale bugs called for Gmail-scale tools</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">. One of our first major contributions to the tooling ecosystem was to show a play-by-play breakdown of exactly everything that Chrome had to do in order to display a page.</span></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; text-align: left; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><img height="387" src="https://lh4.googleusercontent.com/0wpXSjTga8zjPa93xeTJ_CitmD43gINO-o58JDeR-VXDVeTTqfRosd534FPCCznkJp37bHXNQ2mAHlfBMfmnX6dAzky8hmZP0ZTPQUAwmOsEN1kw-kOzvQyOmiWjYOGcMVf7armt" style="border: none; font-family: Arial; font-size: 11pt; text-align: center; transform: rotate(0rad);" width="624" /></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: inherit;"><i><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">The original Timeline panel, as announced in </span><a href="https://blog.chromium.org/2012/10/do-more-with-chrome-developer-tools.html" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">Do More with Chrome Developer Tools</span></a></i></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center; white-space: pre-wrap;"> <span id="docs-internal-guid-fe2ea956-7fff-1c6a-790b-23694e444093"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><img height="529" src="https://lh4.googleusercontent.com/AFu8PIdpJml4vgGrr_5_XkeHVA9uTbxkVuspQjCZjhiL1dtL7F5Tua7fDWUhMKUNwHrnF8jX5rm_1iUabLmTm1-y_BCkaRnU4pAAr-euI0Us04ko5IQJaw_8Ne8hKD1Wo-ffZ28h" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="624" /></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><i>The Performance panel in 2018</i></span></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br />These tools were a step in the right direction, but in order to spot optimization opportunities you needed to learn the nitty-gritty details about how browsers work and sift through a lot of data. Lately we've been building on this foundation to provide more </span><a href="https://developers.google.com/web/tools/chrome-devtools/speed/get-started" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">guided performance insights</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">. The new </span><a href="https://developers.google.com/web/tools/lighthouse/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">Lighthouse</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> engine powers the Audits panel, and is also available as a Node module for integration with CI systems.</span></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline;"><img height="681" src="https://lh4.googleusercontent.com/VeEn3HMhNkdnX8FhJ0_q3Ajtq7YbFCgq3F6lTZ9m2RLO4Fb4SFmGWqZpz6gXz9dAmpt6U-5c7yOzrdkjL5fHfUeMrYvre4Zca07nHErvzFkRD7rehFeVdVNduECxVAz7lYEEcj_B" style="border: none; font-size: 11pt; transform: rotate(0rad);" width="542" /></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline;"><i style="font-family: inherit; font-size: 11pt;">Performance suggestions in the Audits panel</i></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span></h2> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">The Node.js era</span></h2> <br /> <span style="font-family: inherit; font-size: 11pt; line-height: 1.38; white-space: pre-wrap;">Up until 2014 or so, we mainly thought of DevTools as a tool for building great experiences on Chrome. The rise of Node prompted us to rethink our role in the web ecosystem. </span><br /> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">For the first few years of Node's existence, Node developers were in a situation similar to that of web developers before Firebug, or Gmail developers before the Timeline panel: the scale of Node apps outpaced the scale of Node tools. Given that Node runs on Chrome's JavaScript engine, V8, DevTools was a natural candidate to fill the gap. Support for debugging Node with DevTools landed in 2016 and includes the usual DevTools features, such as breakpoints, code stepping, blackboxing, source maps for transpiled code, and so on.</span> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: "arial";"><span style="border-color: initial; border-image: initial; border-width: initial; transform: rotate(0rad);"><img height="457" src="https://lh4.googleusercontent.com/DpzUokfiOn2gVW6nGD2S8vd_JkXpsdKV1h322u12GLehRcJ60j9PPJN01mDrBpbirZpiBv2UcvmMyc8y_umMoHZpTsLNBlij8MDisG9GmbJ8_bQRurSljnM9-wiywVL3i7rGzmD2" style="border: none; transform: rotate(0rad);" width="624" /></span></span><i style="font-size: 11pt;"><span style="font-family: inherit;">Node Connection Manager</span></i></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <h3 dir="ltr" style="line-height: 1.38; margin-bottom: 4pt; margin-top: 0pt;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span></h3> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> <br />The DevTools protocol ecosystem</span></h2> <br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> <span style="font-family: inherit; font-weight: normal;"><span style="font-size: 11pt; white-space: pre-wrap;">The name </span><span style="font-size: 11pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Chrome DevTools Protocol </span><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(CDP) suggests an API that only DevTools can use. The reality is more general than that: it’s the API that enables programmatic access to Chrome. Over the last few years, we've seen a few third-party libraries and applications join the protocol ecosystem:</span></span></span><br /> <ul style="font-size: 11pt; margin-bottom: 0pt; margin-top: 0pt; white-space: pre-wrap;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;"> <span style="font-family: inherit;"><a href="https://github.com/cyrus-and/chrome-remote-interface" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">chrome-remote-interface</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> provides low level JavaScript access to the protocol</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><a href="https://github.com/GoogleChrome/puppeteer" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Puppeteer</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> brings it to the next level of abstraction and enables automation of the evergreen </span><a href="https://developers.google.com/web/updates/2017/04/headless-chrome" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">headless Chrome</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> browser with modern JavaScript API</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt;"> <span style="font-family: inherit;"><a href="https://developers.google.com/web/tools/lighthouse/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Lighthouse</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> automates the process of finding ways to improve the performance and quality of pages</span></span></div> </li> </span></ul> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">We're excited to see thousands of projects depend on these packages to enable rich interaction with Chrome. If you’re in the tooling or automation business, it’s worth checking out the protocol to see if it opens up any opportunities in your domain. For example, the </span><a href="https://code.visualstudio.com/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">VS Code</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> and </span><a href="https://www.jetbrains.com/webstorm/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">WebStorm</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> teams both use it to enable JavaScript debugging within their respective IDEs.</span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">What's next?</span></h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"></span><br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">Our core mission is to build tools that help you create great experiences on the web. We very much rely on your feedback to help us determine what products or features to build.</span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <ul style="font-size: 11pt; margin-bottom: 0pt; margin-top: 0pt; white-space: pre-wrap;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Stay up-to-date on new features with our </span><a href="https://developers.google.com/web/updates/tags/devtools-whatsnew" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">What's New</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> posts</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Propose new features on the </span><a href="https://groups.google.com/forum/#!forum/google-chrome-developer-tools" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">mailing list</span></a></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">File bugs in </span><a href="https://crbug.com/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Chromium Bug Tracker</span></a></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Follow us on </span><a href="https://twitter.com/ChromeDevTools" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Twitter</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> to discover new features and bite-sized workflows</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Ask questions on </span><a href="https://stackoverflow.com/questions/ask?tags=google-chrome-devtools" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Stack Overflow</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> to get help with using DevTools</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Take matters into your own hands and </span><a href="https://docs.google.com/document/d/1WNF-KqRSzPLUUfZqQG5AFeU_Ll8TfWYcJasa_XGf7ro/edit#heading=h.xz439gqj1lwr" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">contribute to DevTools</span></a></span></div> </li> </span></ul> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">Thank you for creating such a vibrant community. We look forward to another 10 years of building the web with you.</span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <div style="font-size: 11pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline;">Posted by the Chrome DevTools team</span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span></div> </span></span></span></div> </div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> <style> * { line-height: 1.38 !important; white-space: initial !important; } ul { font-size: 11pt !important; } li { line-height: 1.38 !important; } img { margin-bottom: 0 !important; } i { text-align: center !important; } </style> <span id="docs-internal-guid-ec9454c6-7fff-b0cd-07e3-80f5f797c50c"></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Chrome is turning 10! Thank you for making the web development community so open, collaborative, and supportive. DevTools draws inspiration from countless other projects. Here’s a look back at how DevTools came about, and how it’s changed over the years.</span></span></div> <h2> </h2> <h2> <br /> <br /> In the beginning, there was Firebug</h2> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Imagine for a moment that browsers didn't ship with developer tools. How would you debug JavaScript? You'd basically have 3 options: </span></span></div> <ul style="margin-bottom: 0pt; margin-top: 0pt;"> <li>Sprinkle window.alert() calls throughout your code.</li> <li><span style="font-family: inherit;">Comment out sections of code.</span></li> <li><span style="font-family: inherit;">Stare at the code for a long time until the JavaScript gods bless you with a solution.</span></li> </ul> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><span id="docs-internal-guid-1364be6a-7fff-ebb2-5b95-b3f4397a0f56"></span></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">What about layout issues? Network errors? Again, all you could really do is conduct painstaking experiments in your code. This was the reality of web development up until 2006. Then a little tool called Firebug came along and changed everything.</span></span></div> <div> <div style="text-align: center;"> <span id="docs-internal-guid-3be9ef50-7fff-5039-8ce7-893f54546c2e"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span></div> </div> <div> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://lh3.googleusercontent.com/kERZXRq3XId5YhSowkwb1zsafnmU65qdo3XM2lNlPQ45xCMYu39EnpDzXTxmXG7mtwwSHYvenQJzzrDwcSZgWqhA-1MoiCFIIZWKRSV1H6sLBpFqkUxx5orAf23KAPnCDETC4GJ0" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="284" src="https://lh3.googleusercontent.com/kERZXRq3XId5YhSowkwb1zsafnmU65qdo3XM2lNlPQ45xCMYu39EnpDzXTxmXG7mtwwSHYvenQJzzrDwcSZgWqhA-1MoiCFIIZWKRSV1H6sLBpFqkUxx5orAf23KAPnCDETC4GJ0" style="border: none; transform: rotate(0rad);" width="624" /></a></div> <span id="docs-internal-guid-3dd7b7e9-7fff-478d-262b-df6d1293a86b"><span style="font-family: inherit;"><i><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /><br />A screenshot of Firebug's Net panel, taken from </span><a href="https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Saying Goodbye to Firebug</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> (</span><a href="https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/10/net-panel.gif" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">source</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://creativecommons.org/licenses/by-sa/3.0/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">license</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">)</span></i></span></span></div> <br /> <span id="docs-internal-guid-3d89f233-7fff-8163-4da1-23fd99b66d1c"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Firebug was a Firefox extension that let you debug, edit, and monitor pages in real-time. As a web developer suddenly you went from having no visibility into your pages to having what are essentially the core features of modern developer tools. The ability to understand exactly why Firefox was behaving as it was unleashed a flood of creativity on the web. Without Firebug, the Web 2.0 era wouldn't have been possible.</span></span></span><br /> <h2> </h2> </div> <h2> </h2> <h2> </h2> <h2> <br /><br /><br /> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0">WebKit Web Inspector</span></h2> <div> <br /></div> <h2> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-weight: normal;">Around the same time as Firebug’s launch, a few Google engineers started working on a project which would eventually lead to Chrome. From the start, Chrome was a mashup of different code libraries. For rendering the Chrome engineers opted for WebKit, which is the open-source project that still powers Safari to this day. An added bonus of using WebKit was that it came with a handy tool called the Web Inspector.</span></span></span><img height="488" src="https://lh4.googleusercontent.com/26HnJ-nCLzoDc5IZXj-zH_APHKIvlL_xGBa2iC-haDOjljkTCMc6kBG-2aPBZCeWhUCafZqT5UVJKjb9kbmjrGUBz_MlI7ejR263KMZtt4T_De-z3ZkkNses8PFa_R8ouIzoLFdI" style="border: none; font-family: arial; font-size: 11pt; text-align: center; transform: rotate(0rad); white-space: pre-wrap;" width="624" /></h2> <span id="docs-internal-guid-904141a1-7fff-059f-4ce2-c71524c532b0"></span> <br /> <div style="text-align: center;"> <span style="font-family: inherit;"><i style="font-family: inherit;">A screenshot of the Web Inspector, taken from <a href="https://webkit.org/blog/197/web-inspector-redesign/">Web Inspector Redesign</a> (<a href="https://webkit.org/blog-files/inspector-elements-panel.png">source</a> and <a href="https://webkit.org/licensing-webkit/">license</a>)</i></span></div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13"> </span> <br /> <div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13" style="font-family: inherit;"><span id="docs-internal-guid-59fe3fa1-7fff-358e-15b0-39dcb5daf08c"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Like the Net panel of Firebug, the original Web Inspector probably looks familiar. Much of its functionality lives on to this day as the Elements panel in Chrome DevTools. Web Inspector launched a few days after Firebug, and Safari was the first browser to bundle developer tooling directly into the browser.</span></span></span></div> <span id="docs-internal-guid-35b3a9ed-7fff-7dd3-1f0f-7db7a5c8df13"> </span> <br /> <h2> </h2> <h2> <br /><br /><br /> The "Inspect Element" era</h2> <div> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span id="docs-internal-guid-6b1fcd26-7fff-4d16-2d52-c081b0984c60"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Chrome brought many innovative ideas to the browser ecosystem, such as the omnibox that combined search and the address bar, and a multi-process architecture that prevented one hanging tab from crashing the entire browser. But the innovation we like the most was providing developer tools in every build to every user, exposed with the click of a mouse.</span></span></span></div> <div style="text-align: center;"> <span id="docs-internal-guid-ce8d53d8-7fff-e5a5-3060-2d21d8471c47"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="316" src="https://lh3.googleusercontent.com/sioL979MZDJ6Y-eTtvV1z88gOx4ExsyOXmsK3mUIjX-FUOdGeM29MOTJpPlcxkebmOEth26gCUUVnIISXGnz8vT8YvtuyDwXFltxtSUm3U0zDgJF37091142hg_rZwv4Q3whpzOY" style="border: none; transform: rotate(0rad);" width="624" /></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"></span><br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><i>"Inspect Element" in 2010</i></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><i></i></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <br /> <div> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;"><br />Before Chrome, developer tooling was an opt-in experience. You either had to install an extension, like Firebug, or enable some flags, as is still the case in Safari today. Chrome was the first browser to make developer tooling accessible from every browser instance. We'd like to claim that we had a grand vision for creating a developer-friendly browser from the start, but the reality is that Chrome had a lot of compatibility issues in its early days (which makes sense, since no one was building for it) and we needed to give web developers an easy way to fix these issues. Web developers told us that it was a useful feature, and we kept it.</span><br /> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span id="docs-internal-guid-93ca2391-7fff-e5e7-7a6d-b6316e3ea5a6"> </span> </span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span id="docs-internal-guid-93ca2391-7fff-e5e7-7a6d-b6316e3ea5a6"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span id="docs-internal-guid-93ca2391-7fff-e5e7-7a6d-b6316e3ea5a6"> </span></span> <br /> <h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> The mobile era</span></h2> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">For the first few years of the DevTools project, we essentially added chapters to the stories that Firebug and Web Inspector started. The next big shift in how we approached DevTools happened when it became clear that smartphones were here to stay.</span></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><span id="docs-internal-guid-3790cada-7fff-1ee9-a482-454cfeb00142"></span></span></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Our first mission in this brave new world was to enable developers to debug real mobile devices from their development machines, which we call remote debugging. DevTools was actually well-positioned to handle remote debugging, thanks to another consequence of Chrome’s multi-process architecture. Early on in the DevTools project we realized that the only way a debugger could reliably access a multi-process browser was through a client-server protocol, with the browser being the server, and the debugger being the client. When mobile Chrome came around, the protocol was already baked into it, so we just had to make the DevTools running on your development machine communicate with the Chrome running on your mobile device over the protocol. This protocol still forms the backbone of DevTools today, and is now known as the </span><a href="https://chromedevtools.github.io/devtools-protocol/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Chrome DevTools Protocol</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></span></span></div> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="247" src="https://lh4.googleusercontent.com/qf_D1vUxYpaulQIPdXqjQFZfl3jzDSaZIB4XJrckdiLWYNfRaTy0PIzuwaUUisqfM9qMoq4UFpWsDtuJHAFuPhnVBvjoPk_uYbFf-R7NSGJGiXOIWtUMxh8bhn4BGQRKa5qGkg61" style="border: none; transform: rotate(0rad);" width="624" /></span></span></div> <div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"></span></span></span><br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: center; white-space: pre-wrap;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><i>Remote Debugging</i></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span> </span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: left;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-fa84e249-7fff-3449-fab3-162904bf636a"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">Remote debugging was a step in the right direction, and to this day is still the primary tool for making sure that your sites behave reasonably on real mobile devices. Over time, however, we realized that remote debugging could be a bit tedious. When you're in the early phases of building out a site or feature, you usually just need a first-order approximation of the mobile experience. This prompted us to create a set of mobile simulation features, such as</span></span></span></span><span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">:</span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <ul><span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <li>Precisely emulating the mobile viewport, simulating touch-based input and device orientation.</li> <li>Throttling the network connection to simulate 3G and CPU to simulate less-powerful mobile hardware.</li> <li>Spoofing user agent, geolocation, accelerometer data and more.</li> </span></span></span></ul> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 14.6667px; white-space: pre-wrap;">We collectively refer to these features as Device Mode.</span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 14.6667px; white-space: pre-wrap;"></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span id="docs-internal-guid-17cc4d5a-7fff-1e86-2ad7-93db1b440440"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="286" src="https://lh6.googleusercontent.com/SZlk5tXgHa-VywxFkTPYSq13aQ3CkxjkydXmO7SYMbdNg7SMfn_ILSH-4uPBBUKANJ0jQvSoTgyTzYc5u-3Xc_9T0jAahWmaUGUaTNXoAQMyiflT50JJj0EnnbBTQESSu8ouFL7l" style="border: none; transform: rotate(0rad);" width="400" /></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span id="docs-internal-guid-ec6cc38a-7fff-63e6-26bd-14396e415ad5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i><br /><br /><br />An early prototype of Device Mode</i></span></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i></i></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span id="docs-internal-guid-d131d51d-7fff-57e9-6f8b-805cb235898c"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="335" src="https://lh4.googleusercontent.com/su2lTgS6_TSjcPyYI-kW2Cw54gl_t1JdCb_w1gJzlhl1FCy77MsvgK6WSPQy2UHWR9JJHBkDpXl8nNCXi_H_0SoeOsxBIFOJEQCuT-yVBgyf0mutCRJbMa-BFKy3meMCHlTALSh5" style="border: none; transform: rotate(0rad);" width="400" /></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> </span></span></span> <div style="text-align: center;"> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"><span id="docs-internal-guid-17775faf-7fff-d583-82db-67ba4079732b"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i>Device Mode in 2018</i></span></span></span></span></span></span></div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-a9133585-7fff-e2e5-75a8-bc52326931a5"> <div style="text-align: left;"> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i></i></span></span></div> <div style="text-align: left;"> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><i></i></span></span></div> <div> <br /> <br /> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b">The performance era</span></span></h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"></span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; text-align: left; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">While the mobile era unfolded, big apps like Gmail were pushing the limits of the web's capabilities. </span><a href="https://youtu.be/x9Jlu_h_Lyw" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">Gmail-scale bugs called for Gmail-scale tools</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">. One of our first major contributions to the tooling ecosystem was to show a play-by-play breakdown of exactly everything that Chrome had to do in order to display a page.</span></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; text-align: left; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><img height="387" src="https://lh4.googleusercontent.com/0wpXSjTga8zjPa93xeTJ_CitmD43gINO-o58JDeR-VXDVeTTqfRosd534FPCCznkJp37bHXNQ2mAHlfBMfmnX6dAzky8hmZP0ZTPQUAwmOsEN1kw-kOzvQyOmiWjYOGcMVf7armt" style="border: none; font-family: Arial; font-size: 11pt; text-align: center; transform: rotate(0rad);" width="624" /></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: inherit;"><i><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">The original Timeline panel, as announced in </span><a href="https://blog.chromium.org/2012/10/do-more-with-chrome-developer-tools.html" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">Do More with Chrome Developer Tools</span></a></i></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center; white-space: pre-wrap;"> <span id="docs-internal-guid-fe2ea956-7fff-1c6a-790b-23694e444093"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><img height="529" src="https://lh4.googleusercontent.com/AFu8PIdpJml4vgGrr_5_XkeHVA9uTbxkVuspQjCZjhiL1dtL7F5Tua7fDWUhMKUNwHrnF8jX5rm_1iUabLmTm1-y_BCkaRnU4pAAr-euI0Us04ko5IQJaw_8Ne8hKD1Wo-ffZ28h" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="624" /></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><i>The Performance panel in 2018</i></span></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br />These tools were a step in the right direction, but in order to spot optimization opportunities you needed to learn the nitty-gritty details about how browsers work and sift through a lot of data. Lately we've been building on this foundation to provide more </span><a href="https://developers.google.com/web/tools/chrome-devtools/speed/get-started" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">guided performance insights</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">. The new </span><a href="https://developers.google.com/web/tools/lighthouse/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">Lighthouse</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> engine powers the Audits panel, and is also available as a Node module for integration with CI systems.</span></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline;"><img height="681" src="https://lh4.googleusercontent.com/VeEn3HMhNkdnX8FhJ0_q3Ajtq7YbFCgq3F6lTZ9m2RLO4Fb4SFmGWqZpz6gXz9dAmpt6U-5c7yOzrdkjL5fHfUeMrYvre4Zca07nHErvzFkRD7rehFeVdVNduECxVAz7lYEEcj_B" style="border: none; font-size: 11pt; transform: rotate(0rad);" width="542" /></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline;"><i style="font-family: inherit; font-size: 11pt;">Performance suggestions in the Audits panel</i></span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-c2f8ac14-7fff-83c7-2be1-c654ab12c56b"> </span></span> <br /> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span></h2> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">The Node.js era</span></h2> <br /> <span style="font-family: inherit; font-size: 11pt; line-height: 1.38; white-space: pre-wrap;">Up until 2014 or so, we mainly thought of DevTools as a tool for building great experiences on Chrome. The rise of Node prompted us to rethink our role in the web ecosystem. </span><br /> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">For the first few years of Node's existence, Node developers were in a situation similar to that of web developers before Firebug, or Gmail developers before the Timeline panel: the scale of Node apps outpaced the scale of Node tools. Given that Node runs on Chrome's JavaScript engine, V8, DevTools was a natural candidate to fill the gap. Support for debugging Node with DevTools landed in 2016 and includes the usual DevTools features, such as breakpoints, code stepping, blackboxing, source maps for transpiled code, and so on.</span> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; text-align: center; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: "arial";"><span style="border-color: initial; border-image: initial; border-width: initial; transform: rotate(0rad);"><img height="457" src="https://lh4.googleusercontent.com/DpzUokfiOn2gVW6nGD2S8vd_JkXpsdKV1h322u12GLehRcJ60j9PPJN01mDrBpbirZpiBv2UcvmMyc8y_umMoHZpTsLNBlij8MDisG9GmbJ8_bQRurSljnM9-wiywVL3i7rGzmD2" style="border: none; transform: rotate(0rad);" width="624" /></span></span><i style="font-size: 11pt;"><span style="font-family: inherit;">Node Connection Manager</span></i></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <h3 dir="ltr" style="line-height: 1.38; margin-bottom: 4pt; margin-top: 0pt;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span></h3> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> <br />The DevTools protocol ecosystem</span></h2> <br /> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> <span style="font-family: inherit; font-weight: normal;"><span style="font-size: 11pt; white-space: pre-wrap;">The name </span><span style="font-size: 11pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Chrome DevTools Protocol </span><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(CDP) suggests an API that only DevTools can use. The reality is more general than that: it’s the API that enables programmatic access to Chrome. Over the last few years, we've seen a few third-party libraries and applications join the protocol ecosystem:</span></span></span><br /> <ul style="font-size: 11pt; margin-bottom: 0pt; margin-top: 0pt; white-space: pre-wrap;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;"> <span style="font-family: inherit;"><a href="https://github.com/cyrus-and/chrome-remote-interface" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">chrome-remote-interface</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> provides low level JavaScript access to the protocol</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><a href="https://github.com/GoogleChrome/puppeteer" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Puppeteer</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> brings it to the next level of abstraction and enables automation of the evergreen </span><a href="https://developers.google.com/web/updates/2017/04/headless-chrome" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">headless Chrome</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> browser with modern JavaScript API</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt;"> <span style="font-family: inherit;"><a href="https://developers.google.com/web/tools/lighthouse/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Lighthouse</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> automates the process of finding ways to improve the performance and quality of pages</span></span></div> </li> </span></ul> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">We're excited to see thousands of projects depend on these packages to enable rich interaction with Chrome. If you’re in the tooling or automation business, it’s worth checking out the protocol to see if it opens up any opportunities in your domain. For example, the </span><a href="https://code.visualstudio.com/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">VS Code</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> and </span><a href="https://www.jetbrains.com/webstorm/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline;">WebStorm</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> teams both use it to enable JavaScript debugging within their respective IDEs.</span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">What's next?</span></h2> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"></span><br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">Our core mission is to build tools that help you create great experiences on the web. We very much rely on your feedback to help us determine what products or features to build.</span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <ul style="font-size: 11pt; margin-bottom: 0pt; margin-top: 0pt; white-space: pre-wrap;"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Stay up-to-date on new features with our </span><a href="https://developers.google.com/web/updates/tags/devtools-whatsnew" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">What's New</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> posts</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Propose new features on the </span><a href="https://groups.google.com/forum/#!forum/google-chrome-developer-tools" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">mailing list</span></a></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">File bugs in </span><a href="https://crbug.com/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Chromium Bug Tracker</span></a></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Follow us on </span><a href="https://twitter.com/ChromeDevTools" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Twitter</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> to discover new features and bite-sized workflows</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Ask questions on </span><a href="https://stackoverflow.com/questions/ask?tags=google-chrome-devtools" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Stack Overflow</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> to get help with using DevTools</span></span></div> </li> <li dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 10pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Take matters into your own hands and </span><a href="https://docs.google.com/document/d/1WNF-KqRSzPLUUfZqQG5AFeU_Ll8TfWYcJasa_XGf7ro/edit#heading=h.xz439gqj1lwr" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">contribute to DevTools</span></a></span></div> </li> </span></ul> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <div dir="ltr" style="font-size: 11pt; line-height: 1.38; margin-bottom: 10pt; margin-top: 10pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit;">Thank you for creating such a vibrant community. We look forward to another 10 years of building the web with you.</span></span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span> <br /> <div style="font-size: 11pt; white-space: pre-wrap;"> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline;">Posted by the Chrome DevTools team</span></span></div> <span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> </span></div> </span></span></span></div> </div> <span id="docs-internal-guid-7c7aa7fa-7fff-9d2a-0a25-71052aac9fc5"> </span> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:10 Years of Chrome DevTools&url=https://blog.chromium.org/2018/09/10-years-of-chrome-devtools.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2018/09/10-years-of-chrome-devtools.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2018/09/10-years-of-chrome-devtools.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/10th%20birthday' rel='tag'> 10th birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/birthday' rel='tag'> birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/chrome' rel='tag'> chrome </a> , <a class='label' href='https://blog.chromium.org/search/label/devtools' rel='tag'> devtools </a> </span> </div> </div> </div> <div class='post' data-id='3266026029210949977' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2018/09/the-capable-web-10-year-retrospective.html' itemprop='url' title='The ‘Capable Web’: A 10 Year Retrospective'> The ‘Capable Web’: A 10 Year Retrospective </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Tuesday, September 4, 2018 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">When we </span><a href="http://www.scottmccloud.com/googlechrome/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">introduced Chrome</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> in 2008, our goal was to “keep evolving with the web and continuing to build a solid foundation for modern web applications.” In honor of our tenth year, we’d like to highlight some of the major changes in the web’s rich capabilities that we feel lucky to share with other browser vendors.</span></div> <b id="docs-internal-guid-d53e4590-7fff-6f45-264d-e3c8bfe9586c" style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">As the very first pages were served on the open web in </span><a href="http://info.cern.ch/hypertext/WWW/TheProject.html" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">1990</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, people recognized that the ability to deliver dynamic content would make the web unique—you could provide information and function just by sharing a URL. The </span><a href="https://en.wikipedia.org/wiki/Common_Gateway_Interface" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Common Gateway Interface</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> standard released in 1993 defined a simple interface for web servers to run code in response to web requests. It brought a new era of experience and capability to computing, accessible at the click of a link. Hop forward two short years to JavaScript, then another year to frames, specifically the <iframe> tag. These innovations let developers dynamically load content into pages, brought a new level of interactivity to the web, and increased user expectations of what could be done in the browser. </span></span></div> <span style="font-family: inherit;"><br /></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Accessibility, linkability, indexability, and universal reach have always been the web’s core strengths. Alongside these super powers, users want ever richer and more-engaging experiences. “</span><a href="https://en.wikipedia.org/wiki/Ajax_(programming)" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Ajax</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">” was coined in 2005 to describe the combination of asynchronous JavaScript and XML, which shaped a more interactive, modern web. It led to the creation of such services as Google Maps, cementing the web as the best way to deliver experiences available to anyone, on any device.</span></span></div> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> <br /></h2> <h2> <br /></h2> <h2> 2008 – 2014: Web applications, HTML5, and the start of the mobile era</h2> <div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Chrome saw huge progress in its early years, with a large number of what are now considered “core APIs” coming to the web after the WebKit implementation. The </span><a href="https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">video</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><a href="https://www.w3.org/TR/2011/WD-html5-20110113/video.html#audio" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">audio</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, and </span><a href="https://www.w3.org/TR/2dcontext/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">canvas</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> elements were some of the first “modern web” features that many of us distinctly remember (and who can forget border-radius?). These features brought a new level of interaction to web experiences, and meant developers no longer needed plugins such as Adobe Flash or Java, to build interactive media and graphical experiences. </span><a href="https://experiments.withgoogle.com/collection/chrome" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Chrome experiments</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> have captured great examples of rich experiences that are a direct result of the web’s improved performance.</span></span></span></div> <span style="font-family: inherit;"><span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"> </span></span> </span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The “Mobile Web” really hit the world in 2010, and we saw a slew of new platform primitives introduced for the platform (many inspired directly by </span><a href="https://web.archive.org/web/20090317170140/http://code.google.com/apis/gears/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Google Gears</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">) to help make building web apps easier. We could now make responsive, offline-enabled applications with </span><a href="https://www.html5rocks.com/tutorials/appcache/beginner/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">AppCache</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://www.w3.org/TR/webdatabase/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebSQL</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, request permission to access the user's </span><a href="https://w3c.github.io/geolocation-api/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">geolocation</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, and even understand the </span><a href="https://w3c.github.io/deviceorientation/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">orientation</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> of the user’s device.</span></span></span><br /> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><a href="https://www.html5rocks.com/en/tutorials/websockets/basics/">WebSocket</a> landed on the platform the same year, heralding a change in the types of experiences developers could deliver on the web. No longer did they have to use long polling to enable a bi-directional channel between the user and a service; developers now had a two-way channel with a simple API to provide real-time communication. </span></span><br /> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <br /> <div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div style="text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/CvKHIVFI2w8/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/CvKHIVFI2w8?feature=player_embedded" style="margin: 0;" width="600"></iframe></div> <div style="text-align: center;"> <i style="text-align: center;">Plink is an interactive music experiment synchronising player state via websockets.</i> </div> </div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <div style="text-align: center;"> <span style="font-size: 14.6667px; white-space: pre-wrap;"><br /></span></div> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Four major APIs came to Chrome in 2011. </span><a href="https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">WebGL</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, </span><a href="https://www.html5rocks.com/en/tutorials/webaudio/intro/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Web Audio</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, and the </span><a href="https://developers.google.com/web/updates/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Fullscreen API</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> let us build rich and immersive experiences that could take advantage of the entire screen. </span><a href="https://w3c.github.io/IndexedDB/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">IndexedDB</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> — a new “web-first” storage mechanism — us store and query serializable JavaScript objects such as Strings, Objects, Arrays, Files, and Blobs more effectively.</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center;"> <br /> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/EK4rLaGmObU/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/EK4rLaGmObU?feature=player_embedded" style="margin: 0;" width="600"></iframe></div> </div> <div style="text-align: center;"> <i style="text-align: center;">Chrome Web Lab was an experiment that bridged the physical and digital worlds. It used Web Socket, video, real-time streaming, WebGL, and Web Audio to create an immersive world.</i></div> <br /> <div style="text-align: center;"> <span style="font-size: x-small; font-weight: 700;"><br /></span></div> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">A bumper year for game-changing experiences on the web arrived in 2012. On the back of </span><a href="https://www.khronos.org/webgl/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebGL</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://fullscreen.spec.whatwg.org/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Fullscreen</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">, the </span><a href="https://www.w3.org/TR/pointerlock/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Pointer Lock</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://w3c.github.io/gamepad/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Gamepad</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> APIs let us build games and other web experiences that felt really interactive. The game-changing collection of </span><a href="https://www.html5rocks.com/en/tutorials/webrtc/basics/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebRTC</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> APIs truly set the web apart from all of the other platforms: It let us build P2P video-chat and real-time data sharing, without any plug-ins or proprietary stack, and accessible by simply clicking a link.</span><br /> <div style="text-align: center;"> <br /></div> </div> </div> <div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJZciH2lQnhTUtebYPC7P4OWBjvjFQNuWW88gN8DX7QjsraagbqQIX6geJxMWmSedkND5VfCEaj8FApsyk8nCopoSXBgJP3LQH37ZDXa-LRuiT_ebjL_Lqj76WjOrBGhqDg36ugLq3DnN/s1600/Paul_WebRTC_Screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJZciH2lQnhTUtebYPC7P4OWBjvjFQNuWW88gN8DX7QjsraagbqQIX6geJxMWmSedkND5VfCEaj8FApsyk8nCopoSXBgJP3LQH37ZDXa-LRuiT_ebjL_Lqj76WjOrBGhqDg36ugLq3DnN/s400/Paul_WebRTC_Screenshot.png" style="border: 1px solid black; margin-bottom: 0px; max-width: 300px;" width="240" /></a></div> <div style="margin-top: 0.2em; text-align: center;"> <i style="text-align: center;">One of the first Chrome on Android to Chrome on Android WebRTC calls (March 2013)</i></div> <br /> <div style="line-height: 1.38;"> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">In just seven years, the web changed drastically. Browsers got significantly faster and more capable, letting developers build richer experiences on the desktop. Users started to consume even more content on mobile, meaning we all had to rethink how our experiences would work across devices and form-factors, even when the user had no connectivity.</span></div> <br /> <div 0pt="" mardir="ltr" margin-bottom:="" style="gin-top: =; line-height: 1.38;"> <div> <div 0pt="" margin-bottom:="" margin-top:=""> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <br /> <h2> <span style="font-family: inherit;">2015-2018: PWA, The Extensible Web, and deeper integration era</span></h2> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">In 2015, we experienced a fundamental change in how we thought about integrating capabilities into the web platform. The </span><a href="https://extensiblewebmanifesto.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Extensible Web manifesto</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> asked browser engineers to consider a layered platform that offered lower-level primitives that were easier to explain, more efficient to implement, and allowed web developers to easily build higher-level abstractions, thus increasing the cadence and availability of compelling new features. </span><a href="https://developers.google.com/web/fundamentals/primers/service-workers/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Service Worker</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> is an example of building on these APIs to follow these principles. Service Worker is a small piece of JavaScript that sits between the browser and the network, and lets the developer decide what to do with any web requests.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The combination of Service Worker and a handful of new APIs allowed marked the beginning of the Progressive Web Apps (PWA) era. PWAs are high-quality sites that combine the reach of the web with the user expectations that come with native platforms. Specifically, PWAs are...</span></span></span></div> <ul style="font-size: 11pt; line-height: 1.40 !important;"> <li style="line-height: 1.40 !important;"><b>Fast</b>—they load instantly</li> <li style="line-height: 1.40 !important;"><b>Reliable</b>—they never show the “<a href="https://twitter.com/ChromiumDev/status/966800777338671105">downasaur</a>,” even in uncertain network conditions, by taking advantage of the Service Worker and Cache APIs</li> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"> <li style="line-height: 1.40 !important;"><b>Engaging</b>—they respond quickly to user interactions with silky-smooth animations and no janky scrolling</li> <li style="line-height: 1.40 !important;"><b>Capable</b>—the sites feel like natural extensions on the device, with immersive user experiences provided by features such as “fullscreen” and standalone mode through Web App Manifest; they deliver capabilities for meeting specific business goals, such as re-engagement through the Add to Homescreen feature and Web Push notifications</li> </span></ul> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"> <span style="font-family: inherit;"></span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">As PWAs became more established, so did the capabilities of the platform. The </span><a href="https://developers.google.com/web/updates/2015/12/background-sync" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Background Sync API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> brought increased opportunities for developers to improve the resilience of their applications. We also got a better understanding of the network capabilities with extensions to the </span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Network Information API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><a href="https://developers.google.com/web/updates/2016/10/pointer-events" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Pointer Events</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, a critical component for any web site or app, came to Chrome after a long wait. Pointer Events presented a unified model for handling all forms of gesture-based input, ranging from touch to pens to mouse pointers.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">In 2017, deeper integration of web apps with the host operating system and secure access to devices around the user arrived.. </span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The </span><a href="https://developers.google.com/web/updates/2016/12/imagecapture" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Image Capture</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://developers.google.com/web/updates/2016/10/capture-stream" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Media Capture</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> APIs provided full-frame access and control over a phone camera, as well as from other input sources such as a canvas. The </span><a href="https://developers.google.com/web/updates/2016/09/navigator-share" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web Share API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> let sites share data directly with the operating system’s native sharing systems.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The </span><a href="https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web Bluetooth API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> let a user securely select a Bluetooth LE device and have a webpage interact with the device. The </span><a href="https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web USB API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> enabled the same level of connectivity, but to devices connected to the user's machine. </span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> <br /><a href="https://webassembly.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebAssembly</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> (WASM) opens up many possibilities. It brings a runtime that can execute code at near-native performance. Plus, it opens a new world of experiences on the web by letting developers use existing codebases built for other platforms on the web platform.</span></span></span></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/BnYq7JapeDA/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/BnYq7JapeDA?feature=player_embedded" width="600"></iframe><br /> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div> <br /></div> <div> <span style="color: #1155cc; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://webvr.info/" style="font-family: inherit; font-size: 11pt; text-decoration-line: none; white-space: pre-wrap;">Web VR</a></span><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> came to the web at roughly the same time it came to native platforms. It let us deliver immersive experiences without installing an app, significantly reducing the gap between a new native primitive arriving on platforms and being available across the web platform.</span></div> <div> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Forward to the future</span></h2> <span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">We’re excited about the possibilities of the web platform. The web can (and should) be feature-rich, but new capabilities don't always have to be more complex. Web development should be predictable, manageable, and pain-free. Coming APIs such as </span><a href="https://developers.google.com/web/updates/2018/06/feature-policy" style="font-family: inherit;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Feature Policy</span></a><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> are great examples of additions that will help developers create amazing sites in a more predictable way, and provide more control and customization over the UX of certain browser features. Feature Policy is the browser's built-in guide rails to help web developers avoid common pitfalls and use best practices.</span><span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"></span><br /> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: inherit;"><a href="https://www.youtube.com/watch?v=dVd8KRLbAx4" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Layered APIs</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> is another initiative that we're excited about. With it, developers will be able to load and use high-level features shipped directly into the browser as JS modules. For example, instead of building a custom virtualize-scrolling component, developers can just import and use <virtual-scroller> in a site. Layered APIs can be quickly iterated on by the standards bodies and implemented by browser vendors, and will help create a pay-as-you-go standard library for the web. And looking further, the Houdini and Web XR APIs will radically change experiences we can build on and with the web.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Zu6MXyfi-Ts/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/Zu6MXyfi-Ts?feature=player_embedded" width="600"></iframe></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><br /></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Over the last 10 years, we’ve seen a massive increase in the rate at which new primitives and capabilities can be introduced to the web. We can thank all the browser vendors for their continued work to create and iterate on specs, using streamlined processes like those defined by the </span><a href="https://www.w3.org/community/wicg/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WICG</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and based on the principles in the </span><a href="https://extensiblewebmanifesto.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Extensible Web Manifesto</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. We’ll continue our commitment to work with browser vendors and the developer ecosystem to prioritize features that users need, and to ensure that those capabilities arrive in a “webby” way. By doing so, we can uphold our original mission, while also prioritizing user safety, discoverability, instant access, and universal reach for everyone on the planet.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Here’s to the future of an even-more-capable open web.</span></span></span><br /> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><span style="font-size: 14.6667px;">Posted by Paul Kinlan, the Wizzy Web Warrior.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span> <br /> <div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span></div> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> </div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> </div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">When we </span><a href="http://www.scottmccloud.com/googlechrome/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">introduced Chrome</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> in 2008, our goal was to “keep evolving with the web and continuing to build a solid foundation for modern web applications.” In honor of our tenth year, we’d like to highlight some of the major changes in the web’s rich capabilities that we feel lucky to share with other browser vendors.</span></div> <b id="docs-internal-guid-d53e4590-7fff-6f45-264d-e3c8bfe9586c" style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">As the very first pages were served on the open web in </span><a href="http://info.cern.ch/hypertext/WWW/TheProject.html" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">1990</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, people recognized that the ability to deliver dynamic content would make the web unique—you could provide information and function just by sharing a URL. The </span><a href="https://en.wikipedia.org/wiki/Common_Gateway_Interface" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Common Gateway Interface</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> standard released in 1993 defined a simple interface for web servers to run code in response to web requests. It brought a new era of experience and capability to computing, accessible at the click of a link. Hop forward two short years to JavaScript, then another year to frames, specifically the <iframe> tag. These innovations let developers dynamically load content into pages, brought a new level of interactivity to the web, and increased user expectations of what could be done in the browser. </span></span></div> <span style="font-family: inherit;"><br /></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Accessibility, linkability, indexability, and universal reach have always been the web’s core strengths. Alongside these super powers, users want ever richer and more-engaging experiences. “</span><a href="https://en.wikipedia.org/wiki/Ajax_(programming)" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Ajax</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">” was coined in 2005 to describe the combination of asynchronous JavaScript and XML, which shaped a more interactive, modern web. It led to the creation of such services as Google Maps, cementing the web as the best way to deliver experiences available to anyone, on any device.</span></span></div> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> <br /></h2> <h2> <br /></h2> <h2> 2008 – 2014: Web applications, HTML5, and the start of the mobile era</h2> <div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Chrome saw huge progress in its early years, with a large number of what are now considered “core APIs” coming to the web after the WebKit implementation. The </span><a href="https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">video</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><a href="https://www.w3.org/TR/2011/WD-html5-20110113/video.html#audio" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">audio</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, and </span><a href="https://www.w3.org/TR/2dcontext/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">canvas</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> elements were some of the first “modern web” features that many of us distinctly remember (and who can forget border-radius?). These features brought a new level of interaction to web experiences, and meant developers no longer needed plugins such as Adobe Flash or Java, to build interactive media and graphical experiences. </span><a href="https://experiments.withgoogle.com/collection/chrome" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Chrome experiments</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> have captured great examples of rich experiences that are a direct result of the web’s improved performance.</span></span></span></div> <span style="font-family: inherit;"><span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"> </span></span> </span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The “Mobile Web” really hit the world in 2010, and we saw a slew of new platform primitives introduced for the platform (many inspired directly by </span><a href="https://web.archive.org/web/20090317170140/http://code.google.com/apis/gears/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Google Gears</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">) to help make building web apps easier. We could now make responsive, offline-enabled applications with </span><a href="https://www.html5rocks.com/tutorials/appcache/beginner/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">AppCache</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://www.w3.org/TR/webdatabase/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebSQL</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, request permission to access the user's </span><a href="https://w3c.github.io/geolocation-api/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">geolocation</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, and even understand the </span><a href="https://w3c.github.io/deviceorientation/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">orientation</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> of the user’s device.</span></span></span><br /> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><a href="https://www.html5rocks.com/en/tutorials/websockets/basics/">WebSocket</a> landed on the platform the same year, heralding a change in the types of experiences developers could deliver on the web. No longer did they have to use long polling to enable a bi-directional channel between the user and a service; developers now had a two-way channel with a simple API to provide real-time communication. </span></span><br /> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <br /> <div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div style="text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/CvKHIVFI2w8/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/CvKHIVFI2w8?feature=player_embedded" style="margin: 0;" width="600"></iframe></div> <div style="text-align: center;"> <i style="text-align: center;">Plink is an interactive music experiment synchronising player state via websockets.</i> </div> </div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <div style="text-align: center;"> <span style="font-size: 14.6667px; white-space: pre-wrap;"><br /></span></div> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Four major APIs came to Chrome in 2011. </span><a href="https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">WebGL</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, </span><a href="https://www.html5rocks.com/en/tutorials/webaudio/intro/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Web Audio</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, and the </span><a href="https://developers.google.com/web/updates/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Fullscreen API</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> let us build rich and immersive experiences that could take advantage of the entire screen. </span><a href="https://w3c.github.io/IndexedDB/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">IndexedDB</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> — a new “web-first” storage mechanism — us store and query serializable JavaScript objects such as Strings, Objects, Arrays, Files, and Blobs more effectively.</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center;"> <br /> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/EK4rLaGmObU/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/EK4rLaGmObU?feature=player_embedded" style="margin: 0;" width="600"></iframe></div> </div> <div style="text-align: center;"> <i style="text-align: center;">Chrome Web Lab was an experiment that bridged the physical and digital worlds. It used Web Socket, video, real-time streaming, WebGL, and Web Audio to create an immersive world.</i></div> <br /> <div style="text-align: center;"> <span style="font-size: x-small; font-weight: 700;"><br /></span></div> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">A bumper year for game-changing experiences on the web arrived in 2012. On the back of </span><a href="https://www.khronos.org/webgl/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebGL</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://fullscreen.spec.whatwg.org/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Fullscreen</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">, the </span><a href="https://www.w3.org/TR/pointerlock/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Pointer Lock</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://w3c.github.io/gamepad/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Gamepad</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> APIs let us build games and other web experiences that felt really interactive. The game-changing collection of </span><a href="https://www.html5rocks.com/en/tutorials/webrtc/basics/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebRTC</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> APIs truly set the web apart from all of the other platforms: It let us build P2P video-chat and real-time data sharing, without any plug-ins or proprietary stack, and accessible by simply clicking a link.</span><br /> <div style="text-align: center;"> <br /></div> </div> </div> <div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJZciH2lQnhTUtebYPC7P4OWBjvjFQNuWW88gN8DX7QjsraagbqQIX6geJxMWmSedkND5VfCEaj8FApsyk8nCopoSXBgJP3LQH37ZDXa-LRuiT_ebjL_Lqj76WjOrBGhqDg36ugLq3DnN/s1600/Paul_WebRTC_Screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJZciH2lQnhTUtebYPC7P4OWBjvjFQNuWW88gN8DX7QjsraagbqQIX6geJxMWmSedkND5VfCEaj8FApsyk8nCopoSXBgJP3LQH37ZDXa-LRuiT_ebjL_Lqj76WjOrBGhqDg36ugLq3DnN/s400/Paul_WebRTC_Screenshot.png" style="border: 1px solid black; margin-bottom: 0px; max-width: 300px;" width="240" /></a></div> <div style="margin-top: 0.2em; text-align: center;"> <i style="text-align: center;">One of the first Chrome on Android to Chrome on Android WebRTC calls (March 2013)</i></div> <br /> <div style="line-height: 1.38;"> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">In just seven years, the web changed drastically. Browsers got significantly faster and more capable, letting developers build richer experiences on the desktop. Users started to consume even more content on mobile, meaning we all had to rethink how our experiences would work across devices and form-factors, even when the user had no connectivity.</span></div> <br /> <div 0pt="" mardir="ltr" margin-bottom:="" style="gin-top: =; line-height: 1.38;"> <div> <div 0pt="" margin-bottom:="" margin-top:=""> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <br /> <h2> <span style="font-family: inherit;">2015-2018: PWA, The Extensible Web, and deeper integration era</span></h2> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">In 2015, we experienced a fundamental change in how we thought about integrating capabilities into the web platform. The </span><a href="https://extensiblewebmanifesto.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Extensible Web manifesto</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> asked browser engineers to consider a layered platform that offered lower-level primitives that were easier to explain, more efficient to implement, and allowed web developers to easily build higher-level abstractions, thus increasing the cadence and availability of compelling new features. </span><a href="https://developers.google.com/web/fundamentals/primers/service-workers/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Service Worker</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> is an example of building on these APIs to follow these principles. Service Worker is a small piece of JavaScript that sits between the browser and the network, and lets the developer decide what to do with any web requests.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The combination of Service Worker and a handful of new APIs allowed marked the beginning of the Progressive Web Apps (PWA) era. PWAs are high-quality sites that combine the reach of the web with the user expectations that come with native platforms. Specifically, PWAs are...</span></span></span></div> <ul style="font-size: 11pt; line-height: 1.40 !important;"> <li style="line-height: 1.40 !important;"><b>Fast</b>—they load instantly</li> <li style="line-height: 1.40 !important;"><b>Reliable</b>—they never show the “<a href="https://twitter.com/ChromiumDev/status/966800777338671105">downasaur</a>,” even in uncertain network conditions, by taking advantage of the Service Worker and Cache APIs</li> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"> <li style="line-height: 1.40 !important;"><b>Engaging</b>—they respond quickly to user interactions with silky-smooth animations and no janky scrolling</li> <li style="line-height: 1.40 !important;"><b>Capable</b>—the sites feel like natural extensions on the device, with immersive user experiences provided by features such as “fullscreen” and standalone mode through Web App Manifest; they deliver capabilities for meeting specific business goals, such as re-engagement through the Add to Homescreen feature and Web Push notifications</li> </span></ul> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"> <span style="font-family: inherit;"></span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">As PWAs became more established, so did the capabilities of the platform. The </span><a href="https://developers.google.com/web/updates/2015/12/background-sync" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Background Sync API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> brought increased opportunities for developers to improve the resilience of their applications. We also got a better understanding of the network capabilities with extensions to the </span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Network Information API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><a href="https://developers.google.com/web/updates/2016/10/pointer-events" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Pointer Events</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, a critical component for any web site or app, came to Chrome after a long wait. Pointer Events presented a unified model for handling all forms of gesture-based input, ranging from touch to pens to mouse pointers.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">In 2017, deeper integration of web apps with the host operating system and secure access to devices around the user arrived.. </span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The </span><a href="https://developers.google.com/web/updates/2016/12/imagecapture" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Image Capture</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://developers.google.com/web/updates/2016/10/capture-stream" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Media Capture</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> APIs provided full-frame access and control over a phone camera, as well as from other input sources such as a canvas. The </span><a href="https://developers.google.com/web/updates/2016/09/navigator-share" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web Share API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> let sites share data directly with the operating system’s native sharing systems.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The </span><a href="https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web Bluetooth API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> let a user securely select a Bluetooth LE device and have a webpage interact with the device. The </span><a href="https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web USB API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> enabled the same level of connectivity, but to devices connected to the user's machine. </span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> <br /><a href="https://webassembly.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebAssembly</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> (WASM) opens up many possibilities. It brings a runtime that can execute code at near-native performance. Plus, it opens a new world of experiences on the web by letting developers use existing codebases built for other platforms on the web platform.</span></span></span></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/BnYq7JapeDA/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/BnYq7JapeDA?feature=player_embedded" width="600"></iframe><br /> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div> <br /></div> <div> <span style="color: #1155cc; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://webvr.info/" style="font-family: inherit; font-size: 11pt; text-decoration-line: none; white-space: pre-wrap;">Web VR</a></span><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> came to the web at roughly the same time it came to native platforms. It let us deliver immersive experiences without installing an app, significantly reducing the gap between a new native primitive arriving on platforms and being available across the web platform.</span></div> <div> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Forward to the future</span></h2> <span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">We’re excited about the possibilities of the web platform. The web can (and should) be feature-rich, but new capabilities don't always have to be more complex. Web development should be predictable, manageable, and pain-free. Coming APIs such as </span><a href="https://developers.google.com/web/updates/2018/06/feature-policy" style="font-family: inherit;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Feature Policy</span></a><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> are great examples of additions that will help developers create amazing sites in a more predictable way, and provide more control and customization over the UX of certain browser features. Feature Policy is the browser's built-in guide rails to help web developers avoid common pitfalls and use best practices.</span><span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"></span><br /> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: inherit;"><a href="https://www.youtube.com/watch?v=dVd8KRLbAx4" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Layered APIs</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> is another initiative that we're excited about. With it, developers will be able to load and use high-level features shipped directly into the browser as JS modules. For example, instead of building a custom virtualize-scrolling component, developers can just import and use <virtual-scroller> in a site. Layered APIs can be quickly iterated on by the standards bodies and implemented by browser vendors, and will help create a pay-as-you-go standard library for the web. And looking further, the Houdini and Web XR APIs will radically change experiences we can build on and with the web.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Zu6MXyfi-Ts/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/Zu6MXyfi-Ts?feature=player_embedded" width="600"></iframe></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><br /></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Over the last 10 years, we’ve seen a massive increase in the rate at which new primitives and capabilities can be introduced to the web. We can thank all the browser vendors for their continued work to create and iterate on specs, using streamlined processes like those defined by the </span><a href="https://www.w3.org/community/wicg/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WICG</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and based on the principles in the </span><a href="https://extensiblewebmanifesto.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Extensible Web Manifesto</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. We’ll continue our commitment to work with browser vendors and the developer ecosystem to prioritize features that users need, and to ensure that those capabilities arrive in a “webby” way. By doing so, we can uphold our original mission, while also prioritizing user safety, discoverability, instant access, and universal reach for everyone on the planet.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Here’s to the future of an even-more-capable open web.</span></span></span><br /> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><span style="font-size: 14.6667px;">Posted by Paul Kinlan, the Wizzy Web Warrior.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span> <br /> <div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span></div> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> </div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> </div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:The ‘Capable Web’: A 10 Year Retrospective&url=https://blog.chromium.org/2018/09/the-capable-web-10-year-retrospective.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2018/09/the-capable-web-10-year-retrospective.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2018/09/the-capable-web-10-year-retrospective.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/10th%20birthday' rel='tag'> 10th birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/birthday' rel='tag'> birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/capabilities' rel='tag'> capabilities </a> , <a class='label' href='https://blog.chromium.org/search/label/capable%20web' rel='tag'> capable web </a> , <a class='label' href='https://blog.chromium.org/search/label/chrome' rel='tag'> chrome </a> , <a class='label' href='https://blog.chromium.org/search/label/open%20web' rel='tag'> open web </a> </span> </div> </div> </div> <div class='blog-pager' id='blog-pager'> <a class='home-link' href='https://blog.chromium.org/'> <i class='material-icons'>  </i> </a> <i class='material-icons disabled'>  </i> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='https://blog.chromium.org/search/label/10th%20birthday?updated-max=2018-09-04T10:47:00-07:00&max-results=20&start=4&by-date=false' id='Blog1_blog-pager-older-link' title='Older Posts'> <i class='material-icons'>  </i> </a> </span> </div> <div class='clear'></div> </div></div> </div> </div> <div class='col-right'> <div class='section' id='sidebar-top'><div class='widget HTML' data-version='1' id='HTML8'> <div class='widget-content'> <div class='searchBox'> <input type='text' title='Search This Blog' placeholder='Search blog ...' /> </div> </div> <div class='clear'></div> </div></div> <div id='aside'> <div class='section' id='sidebar'><div class='widget Label' data-version='1' id='Label1'> <div class='tab'> <img class='sidebar-icon' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYpJREFUeNrs2aFuwzAQBmAvKRkMKRjZA4QMDJaWFgyMjuzFRg37DIUlA3uFkoGQSaWzJU+tpri5O9+l/zSfdFJlpe59yTmyVedq1PjfcZMZ70NuQnaF8w8htyE/rABtpviXkLcK88c5HhLkMBfgVan43zfFBNGMjHVGT/s55KP2pAvidbGHd+nzKt1RKSLG3rKF1iPFv6UWiPke8i7kEqGdGsI1O+LYVdqJAjgirwkKYD0ytkJBUNbAMvX8V3q9PhUsYvU1sWD8SO/sQvx2ahxOiNoJCSBCoAHYCEQAC4EKICOQASQEOmAS8RcAFxFN5hiIiugpgC3wk9hQAHH/70EBHXUN7IER5EWMiBgo2+nzOKQv9SCAeEM/OQAkhE/ncccFICB87qzQMia5FsJfOui0zMnmRvipU1ormHQuxGTxUsAcCFLxJQBLBLn4UoAFglW8BkATwS5eC6CBEBWvCShBiIvXBkgQRcVbADiI4uKtABSESvGWgB9EzHt3+tNwyO0qa9SoIYtvAQYAqDJhaWWeMecAAAAASUVORK5CYII='/> <h2> Labels </h2> <i class='material-icons arrow'>  </i> </div> <div class='widget-content list-label-widget-content'> <ul> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/%24200K'> $200K </a> <span dir='ltr'> 1 </span> </li> <li> <span dir='ltr'> 10th birthday </span> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/abusive%20ads'> abusive ads </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/abusive%20notifications'> abusive notifications </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/accessibility'> accessibility </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ad%20blockers'> ad blockers </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ad%20blocking'> ad blocking </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/advanced%20capabilities'> advanced capabilities </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/android'> android </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/anti%20abuse'> anti abuse </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/anti-deception'> anti-deception </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/background%20periodic%20sync'> background periodic sync </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/badging'> badging </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/benchmarks'> benchmarks </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/beta'> beta </a> <span dir='ltr'> 83 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/better%20ads%20standards'> better ads standards </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/billing'> billing </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/birthday'> birthday </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/blink'> blink </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/browser'> browser </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/browser%20interoperability'> browser interoperability </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/bundles'> bundles </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/capabilities'> capabilities </a> <span dir='ltr'> 6 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/capable%20web'> capable web </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cds'> cds </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cds18'> cds18 </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cds2018'> cds2018 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome'> chrome </a> <span dir='ltr'> 35 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%2081'> chrome 81 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%2083'> chrome 83 </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%2084'> chrome 84 </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20ads'> chrome ads </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20apps'> chrome apps </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20dev'> Chrome dev </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20dev%20summit'> chrome dev summit </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20dev%20summit%202018'> chrome dev summit 2018 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20dev%20summit%202019'> chrome dev summit 2019 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20developer'> chrome developer </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20Developer%20Center'> Chrome Developer Center </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20developer%20summit'> chrome developer summit </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20devtools'> chrome devtools </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20extension'> Chrome extension </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20extensions'> chrome extensions </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20Frame'> Chrome Frame </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20lite'> Chrome lite </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20on%20Android'> Chrome on Android </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20on%20ios'> chrome on ios </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20on%20Mac'> Chrome on Mac </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20OS'> Chrome OS </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20privacy'> chrome privacy </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20releases'> chrome releases </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20security'> chrome security </a> <span dir='ltr'> 10 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20web%20store'> chrome web store </a> <span dir='ltr'> 32 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromedevtools'> chromedevtools </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromeframe'> chromeframe </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromeos'> chromeos </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromeos.dev'> chromeos.dev </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromium'> chromium </a> <span dir='ltr'> 9 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cloud%20print'> cloud print </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/coalition'> coalition </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/coalition%20for%20better%20ads'> coalition for better ads </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/contact%20picker'> contact picker </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/content%20indexing'> content indexing </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cookies'> cookies </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/core%20web%20vitals'> core web vitals </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/csrf'> csrf </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/css'> css </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cumulative%20layout%20shift'> cumulative layout shift </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/custom%20tabs'> custom tabs </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/dart'> dart </a> <span dir='ltr'> 8 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/dashboard'> dashboard </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Data%20Saver'> Data Saver </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Data%20saver%20desktop%20extension'> Data saver desktop extension </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/day%202'> day 2 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/deceptive%20installation'> deceptive installation </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/declarative%20net%20request%20api'> declarative net request api </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/design'> design </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/developer%20dashboard'> developer dashboard </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Developer%20Program%20Policy'> Developer Program Policy </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/developer%20website'> developer website </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/devtools'> devtools </a> <span dir='ltr'> 13 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/digital%20event'> digital event </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/discoverability'> discoverability </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/DNS-over-HTTPS'> DNS-over-HTTPS </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/DoH'> DoH </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/emoji'> emoji </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/emscriptem'> emscriptem </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/enterprise'> enterprise </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/extensions'> extensions </a> <span dir='ltr'> 27 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Fast%20badging'> Fast badging </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/faster%20web'> faster web </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/features'> features </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/feedback'> feedback </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/field%20data'> field data </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/first%20input%20delay'> first input delay </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Follow'> Follow </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/fonts'> fonts </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/form%20controls'> form controls </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/frameworks'> frameworks </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/fugu'> fugu </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/fund'> fund </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/funding'> funding </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/gdd'> gdd </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/google%20earth'> google earth </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/google%20event'> google event </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/google%20io%202019'> google io 2019 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/google%20web%20developer'> google web developer </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/googlechrome'> googlechrome </a> <span dir='ltr'> 12 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/harmful%20ads'> harmful ads </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/html5'> html5 </a> <span dir='ltr'> 11 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/HTTP%2F3'> HTTP/3 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/HTTPS'> HTTPS </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/iframes'> iframes </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/images'> images </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/incognito'> incognito </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/insecure%20forms'> insecure forms </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/intent%20to%20explain'> intent to explain </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ios'> ios </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ios%20Chrome'> ios Chrome </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/issue%20tracker'> issue tracker </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/jank'> jank </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/javascript'> javascript </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/lab%20data'> lab data </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/labelling'> labelling </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/largest%20contentful%20paint'> largest contentful paint </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/launch'> launch </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/lazy-loading'> lazy-loading </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/lighthouse'> lighthouse </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/linux'> linux </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Lite%20Mode'> Lite Mode </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Lite%20pages'> Lite pages </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/loading%20interventions'> loading interventions </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/loading%20optimizations'> loading optimizations </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/lock%20icon'> lock icon </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/long-tail'> long-tail </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/mac'> mac </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/manifest%20v3'> manifest v3 </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/metrics'> metrics </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/microsoft%20edge'> microsoft edge </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/mixed%20forms'> mixed forms </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/mobile'> mobile </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/na'> na </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/native%20client'> native client </a> <span dir='ltr'> 8 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/native%20file%20system'> native file system </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/New%20Features'> New Features </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/notifications'> notifications </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/octane'> octane </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/open%20web'> open web </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/origin%20trials'> origin trials </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/pagespeed%20insights'> pagespeed insights </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/pagespeedinsights'> pagespeedinsights </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/passwords'> passwords </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/payment%20handler'> payment handler </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/payment%20request'> payment request </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/payments'> payments </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/performance'> performance </a> <span dir='ltr'> 20 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/performance%20tools'> performance tools </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/permission%20UI'> permission UI </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/permissions'> permissions </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/play%20store'> play store </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/portals'> portals </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/prefetching'> prefetching </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/privacy'> privacy </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/privacy%20sandbox'> privacy sandbox </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/private%20prefetch%20proxy'> private prefetch proxy </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/profile%20guided%20optimization'> profile guided optimization </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/progressive%20web%20apps'> progressive web apps </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Project%20Strobe'> Project Strobe </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/protection'> protection </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/pwa'> pwa </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/QUIC'> QUIC </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/quieter%20permissions'> quieter permissions </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/releases'> releases </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/removals'> removals </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/rlz'> rlz </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/root%20program'> root program </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/safe%20browsing'> safe browsing </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Secure%20DNS'> Secure DNS </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/security'> security </a> <span dir='ltr'> 36 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/site%20isolation'> site isolation </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/slow%20loading'> slow loading </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/sms%20receiver'> sms receiver </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/spam%20policy'> spam policy </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/spdy'> spdy </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/spectre'> spectre </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/speed'> speed </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ssl'> ssl </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/store%20listing'> store listing </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/strobe'> strobe </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/subscription%20pages'> subscription pages </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/suspicious%20site%20reporter%20extension'> suspicious site reporter extension </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/TCP'> TCP </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/the%20fast%20and%20the%20curious'> the fast and the curious </a> <span dir='ltr'> 23 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/TLS'> TLS </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/tools'> tools </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/tracing'> tracing </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/transparency'> transparency </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/trusted%20web%20activities'> trusted web activities </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/twa'> twa </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/user%20agent%20string'> user agent string </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/user%20data%20policy'> user data policy </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/v8'> v8 </a> <span dir='ltr'> 6 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/video'> video </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/wasm'> wasm </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web'> web </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20apps'> web apps </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20assembly'> web assembly </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20developers'> web developers </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20intents'> web intents </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20packaging'> web packaging </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20payments'> web payments </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20platform'> web platform </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20request%20api'> web request api </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20vitals'> web vitals </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web.dev'> web.dev </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web.dev%20live'> web.dev live </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webapi'> webapi </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webassembly'> webassembly </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webaudio'> webaudio </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webgl'> webgl </a> <span dir='ltr'> 7 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webkit'> webkit </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/WebM'> WebM </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webmaster'> webmaster </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webp'> webp </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webrtc'> webrtc </a> <span dir='ltr'> 6 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/websockets'> websockets </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webtiming'> webtiming </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/writable-files'> writable-files </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/yerba%20beuna%20center%20for%20the%20arts'> yerba beuna center for the arts </a> <span dir='ltr'> 1 </span> </li> </ul> <div class='clear'></div> </div> </div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'> <div class='tab'> <i class='material-icons icon'>  </i> <h2> Archive </h2> <i class='material-icons arrow'>  </i> </div> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul class='hierarchy'> <li class='archivedate expanded'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy toggle-open'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2024/'> 2024 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate expanded'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2023/'> 2023 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2022/'> 2022 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2021/'> 2021 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2020/'> 2020 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2019/'> 2019 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2018/'> 2018 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2017/'> 2017 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2016/'> 2016 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2015/'> 2015 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2014/'> 2014 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2013/'> 2013 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2012/'> 2012 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2011/'> 2011 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2010/'> 2010 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2009/'> 2009 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2008/'> 2008 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2008/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2008/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2008/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2008/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> </div> </div> <div class='clear'></div> </div> </div><div class='widget HTML' data-version='1' id='HTML6'> <div class='widget-content'> <a href="http://blog.chromium.org/atom.xml"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAihJREFUeNrsWa9Pw0AU7viRMDFRBAkzJDMIBIhJJhCzk7NILIqMv4AEhdz+BCY3OYssAlGBoAJREpZwAlHEBO8lr8nSvNeVbu1dyX3JlzTrXfa+u/e9d7c5joWFhYVO1Fa8PwH2gK6m+BRwAvSlAdsrgr8E1jUuMH73GTAEzrkBWymTewZlihhLmgDXIAFuHgGVQOUF7OSYM1p6PgTuA1vAZlUEvAnPdapcMY0VICECekQ0XRfYrqoHsAGNgXfAoMomRiFDEhOZkkL3S88hMaB2LwXp0bj+ps2edpToZpjfoIDQtBeU+xjoDzP2G/gCPKZ5f8WsCAFJoJgOCcFdWSTeL9YQMSvTA1h9BkI5jaiXhLpSCL/8mVZY0UpyJ9ZdOkniu1dmJ96BpzQu9w6s28gcOq9j6pwLdR8/36NK5CQKwJSMrb2MhhSglBpt4UjsrdsnNu0B3J0HCozbCc4TjyY2srEgos/4RQljCzNxl4ireQD8FOq+T+W0mTB2g7njhlR+Sy2jsXFvU658U8YTbeaGpdIu7mWkEAq5ZtIjIhFZdtfX7QHckSvB2B6zC3VdAkZk0kAQwaXTk/CzTXK3wjIExCs6ZJpTnE4uY1KV+KzFzA3KTiFPENHJkOPcsfpLhwe4btoSuvUqAR+6TOxlCE6ZfKUsJLgsqGW8OpqAGx2X+sLxrwUog+JUeQRMDBIwyXOcnlPtPnL0/UsT/8LnOxYWFhZG4leAAQAAQHEaYuzHbAAAAABJRU5ErkJggg==" class="sidebar-icon" /> <h2>Feed</h2> </a> </div> <div class='clear'></div> </div></div> <div class='section' id='sidebar-bottom'><div class='widget HTML' data-version='1' id='HTML4'> <div class='widget-content'> <div class="share followgooglewrapper"> <button data-href="https://twitter.com/intent/follow?original_referer=http://blog.chromium.org/&screen_name=ChromiumDev" onclick='sharingPopup(this);' id='twitter-share'><span class="twitter-follow">Follow @ChromiumDev</span></button> <script> function sharingPopup (button) { var url = button.getAttribute("data-href"); window.open( url,'popUpWindow','height=500,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes'); } </script> </div> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML1'> <div class='widget-content'> Give us feedback in our <a href="http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs">Product Forums</a>. </div> <div class='clear'></div> </div></div> </div> </div> <div style='clear:both;'></div> </div>  <div class='google-footer-outer loading'> <div id='google-footer'> <a href='//www.google.com/'> <img class='google-logo-dark' height='36' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALgAAABICAYAAABFoT/eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACLVJREFUeNrsXd+L20YQ3vOprdLqiMXFXE2qB7dcwEcTSB7ykIc+9A/PQx/yEMq1TWhNuYIpJriNr7XpmZ5IxFEvmW2EKs3Ornb1w50PxIFP0kiz387OzM6uhGAwGAxGP3Ho+f7x7ri1O7LdccPqZjSNA4dEHsLfaHcEFedJom93x9Xu2OyOFTcBo6sED3fHZHeMEELrkAHJF0B8Rr+gDFsZ5n0luLTQ95AXs4W06D/tjpR50xtM4CjD0y48YGB4rnyZxNOzyA7zBHr+nLnDaJLg0mo/ALekCasg3Z4XbM0ZdTEgnDPeHY8bIne+Qz2GvwyGNwsuyT218KWvIIBMcwGpLiipcolecjMxfBDchNyS1EvxLiOSIecp31q6IJ/C3yrIrMqMm4jhg+AxkdwbIO3aUO4KjqqMjCT3uaazMBhWBJfuxH3CtRfiXf66DhSRZWbmlMnNaILgZxrXJQO/eO3wORZwvwm4JUxuhheCjzVBYAbW1ces45YDSoZrFNOEE835M8FT6oyeEnws8Fz3QnBxFKPHBMem4GU+m6fPGb0leCTwWcM5B36MPgeZI01gudyDdw3hPeXfo8L/rmCUWnuMMdqUL2WqWeRbhf+twfVsO7YagZGNC79fw7OthEVtkiJ4jJzTd3KPwf3CRqhhiTu23AP5sl0/0xiwISQXpNwLIJK87mHF+U8ddzzdmgKlGzlPYjyxGJQouIhNT4k9AqWEFkqfguIvagTWbcq3KW1WE3xS3m8NtA9WS451xofwjKT5kkDoK/b6mDk5FfXr1lWDL4BofZEv2/SRsK/EHGlGdBdu8QNRb8HMCFwt7Yy3DDI/QP7fx5z3VLhdlJEIs4rKNuXXJXdxZPdB7kfCzWqwCO4V1LHgLjInX3tQ1KzCR52Cz+vDj1dydeRuS74rcvs2Pi6fT5H8OaaUQPQPYcWwRSGXyhhscn5dpAnEFMkuEZetbfkTAnlSuH4DxisE+aMGeJAQ3lFl7C4LJE6QWCaCd583ORQ1jYAwjFctal7nOs2ZZvicwvlZx+RHGrcoAwKUVX8uwcc/9TT65INeDOr5shL9LDRB6QTeIy3zwfdh3WOi6axLCEhSjXU7F3h6LqggUtvyJxpynwu8tDkD98fXApOxRj8zoZ9MnGveYVIVZKaGrkBXCY65BCYNN9NkjpKOyQ81Q79JgdxS+Jn3SDTEXRI7SWzaiSTB32oI3nU3BvMfM0urhOVYgwKhuiAfc4tM07wXwm1ZRoQYSl2NUwiu01fEAHVcpixd745FvVz4dzUUc0o8rwoLy8ZSwU6CyFx1RP5II9+1bFPEFs9HWbNLiimDXE+vCm7u1CS47cofzD3aEhVY57mxRo5zlqdt+RFC1JUH2S7bcVXg4liTMakaBZZVxiTICRoivcn1sEUBlk24JmaC6kxUbYmWoqvyfck2xZGGnDFYa9MMzkYQ1ijkCX6qidybrgePiQ0QIQqoi6qRLeqQfIoRsEHaQJLBdHOnLGetSdm/IPcymJuS1PAnbQPH0MOw/39C1vL11DiLOqIsbDI8QcHvGiLnySi2qUXBicaqUSxN5LEB0g7Jt3ENXJLPJ5S1tnaZBoWbpRqrmjRE7qHmpSmNHdQcYrEUadoh+TbBnc9ri7iycI1kzPeNcLDIvbiqXpez9Tmdq6zGREPuzECBoxrPMiI2WtvyNwhJba2wy3JZ6ky5dD1lSvmZS3e4SPA1wcf1VTFHKX+cGwZzdUYcqpvUtvwrD/InDttVlyZeAKlNN5MKbAiurHhKIPlUuJvlTCCiDjSKSCsUmCFWbGLZwCESfK07JB8LvMYWVtw0D00JEHV8Mq2HkqPbE0oHLvvK2g0o8ETg+4cfwTlZDT9JDoWygu4uQQE/ivIvtcnfPkaCqhiupz7jWOAzqL/vjtcdkv9G4MVMt+EaylfuImiPAXEUjRF3pjjaHiPPZ6If9TGGAO4ZY0am6jOCb+DQ+ZCqLkIpOIPrdNfIjnFPY6nyFut7TS/fanrziOBOKMupKw94WaLMtuVnSFt9CPrWWdJE6PeltCX432DEBoh+5Dv8RRhdis8YAv9uyq4/JAwtlEApgBe9Cw9xDD3tdk4Jn0MDfiHwPHcRPxBePCMER3GuIx7kGlv9fkZ4V9lolx2Uv4X7hEj7qJ3LDoAMGbTRMRibu4L2xQ8bgt8AyU+Q+x7nYrvDnH4iuO5LxKsYwPVbkPMvKF9Zky9wXzRfVWizi62r9X5VHf55h+WHhDjGBZ4WRhyTr6z5SlCoLMxLSpBZFsQ9F80uQFbF/6aFWi+Ev51vzzsuX+msyzuQXXjUz8zEBy+zpq9yweXAoxJW4JbYrDS6gYDqGHxPl+TKeiBfxj9/EBIElPYeOA4y8/qRQfknjvSzgRgtq0Pw/M1eQeMdOSb2Bnrhr6Led+1vcp2x7oTFHMnedFW+Ivlty062BUt74oHgSj+vHepnhunn0JJAMtBZgDI/qmGtMujRv8DDpo47zBJ8UtPOuAR/7rKn8t9AJ0tBdmBAmJ/Fu71yxp4I3qh+DhyRqbi5Y1ShVPlSb8X7bRNcfgZFl+WRGYo7uecrWq1r8X5bhmzP5OdlDwsGRm1suSxkg5rYm7ConyGQ3Zl+DgSD8V/kPwrWBMG9YcBtyShBnTLdTiHgttw7qAW7cqh/ZnmPKr/6ignOaKsdyxbsToT5UkPsW00bJjijDXficcX/JsLs6w2BwGtherdckH3w/kNXRPVI0OqJQoHX42/66IMfMj/2huRjxIidgKV/W0JS+bsstDoTeAHcrI8E5zTh/sDkqxL5rZup55/3USlswfcHf4IrQplVDgW9XFlOqnwr6pVPMMEZTuC60EttvdzbLbaZ4PsFVa3nohhO+vW+yn/ZB2fUhpysmQrzBcTSai9EszuZMcEZ1lCFVrp9zGXhm69iLyY4oxFIa178lPe12I/P2DAYDAaDwWAwGAwGg8FgMBgMBoPBYDD2Cf8IMADDRGoQTe+E9AAAAABJRU5ErkJggg==' style='margin-top: -16px;' width='92'/> </a> <ul> <li> <a href='//www.google.com/'> Google </a> </li> <li> <a href='//www.google.com/policies/privacy/'> Privacy </a> </li> <li> <a href='//www.google.com/policies/terms/'> Terms </a> </li> </ul> </div> </div> <script type='text/javascript'> //<![CDATA[ // Social sharing popups. var postEl = document.getElementsByClassName('social-wrapper'); var postCount = postEl.length; for(i=0; i<postCount;i++){ postEl[i].addEventListener("click", function(event){ var postUrl = this.getAttribute("data-href"); window.open( postUrl,'popUpWindow','height=500,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes'); });} //]]> </script> <script type='text/javascript'> //<![CDATA[ var BreakpointHandler = function() { this.initted = false; this.isHomePage = false; this.isMobile = false; }; BreakpointHandler.prototype.finalizeSummary = function(summaryHtml, lastNode) { // Use $.trim for IE8 compatibility summaryHtml = $.trim(summaryHtml).replace(/(<br>|\s)+$/,''); if (lastNode.nodeType == 3) { var lastChar = summaryHtml.slice(-1); if (!lastChar.match(/[.”"?]/)) { if (!lastChar.match(/[A-Za-z]/)) { summaryHtml = summaryHtml.slice(0, -1); } summaryHtml += ' ...'; } } else if (lastNode.nodeType == 1 && (lastNode.nodeName == 'I' || lastNode.nodeName == 'A')) { summaryHtml += ' ...'; } return summaryHtml; }; BreakpointHandler.prototype.generateSummaryFromContent = function(content, numWords) { var seenWords = 0; var summaryHtml = ''; for (var i=0; i < content.childNodes.length; i++) { var node = content.childNodes[i]; var nodeText; if (node.nodeType == 1) { if (node.hasAttribute('data-about-pullquote')) { continue; } nodeText = node.textContent; if (nodeText === undefined) { // innerText for IE8 nodeText = node.innerText; } if (node.nodeName == 'DIV' || node.nodeName == 'B') { // Don't end early if we haven't seen enough words. if (seenWords < 10) { continue; } if (i > 0) { summaryHtml = this.finalizeSummary(summaryHtml, content.childNodes[i-1]); } break; } summaryHtml += node.outerHTML; } else if (node.nodeType == 3) { nodeText = node.nodeValue; summaryHtml += nodeText + ' '; } var words = nodeText.match(/\S+\s*/g); if (!words) { continue; } var remain = numWords - seenWords; if (words.length >= remain) { summaryHtml = this.finalizeSummary(summaryHtml, node); break; } seenWords += words.length; } return summaryHtml; }; BreakpointHandler.prototype.detect = function() { var match, pl = /\+/g, search = /([^&=]+)=?([^&]*)/g, decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); }, query = window.location.search.substring(1); var urlParams = {}; while (match = search.exec(query)) urlParams[decode(match[1])] = decode(match[2]); this.isListPage = $('html').hasClass('list-page'); this.isMobile = urlParams['m'] === '1'; this.isHomePage = window.location.pathname == '/'; }; BreakpointHandler.prototype.initContent = function() { var self = this; $('.post').each(function(index) { var body = $(this).children('.post-body')[0]; var content = $(body).children('.post-content')[0]; $(content).addClass('post-original'); var data = $(content).children('script').html(); data = self.rewriteForSSL(data); // If exists, extract specified editor's preview. var match = data.match(/([\s\S]+?)<div data-is-preview.+?>([\s\S]+)<\/div>/m); if (match) { data = match[1]; } // Prevent big images from loading when they aren't needed. // This must be done as a pre-injection step, since image loading can't be // canceled once embedded into the DOM. if (self.isListPage && self.isMobile) { data = data.replace(/<(img|iframe) .+?>/g, ''); } // Insert template to be rendered as nodes. content.innerHTML = data; if (self.isListPage) { var summary = document.createElement('div'); $(summary).addClass('post-content'); $(summary).addClass('post-summary'); body.insertBefore(summary, content); if (match) { // Use provided summary. summary.innerHTML = match[2]; } else { // Generate a summary. // Summary generation relies on DOM, so it must occur after content is // inserted into the page. summary.innerHTML = self.generateSummaryFromContent(content, 30); } // Add read more link to summary. var titleAnchor = $(this).find('.title a')[0]; var link = titleAnchor.cloneNode(true); link.innerHTML = 'Read More'; $(link).addClass('read-more'); summary.appendChild(link); } }); // Firefox does not allow for proper styling of BR. if (navigator.userAgent.indexOf('Firefox') > -1) { $('.post-content br').replaceWith('<span class="space"></span>'); } $('.loading').removeClass('loading'); }; BreakpointHandler.prototype.process = function() { if (!this.initted) { var makeInsecureImageRegex = function(hosts) { var whitelist = hosts.join('|').replace(/\./g,'\\.'); // Normal image tags, plus input images (yes, this is possible!) return new RegExp('(<(img|input)[^>]+?src=("|\'))http:\/\/(' + whitelist +')', 'g'); }; this.sslImageRegex = makeInsecureImageRegex(BreakpointHandler.KNOWN_HTTPS_HOSTS); this.sslImageCurrentDomainRegex = makeInsecureImageRegex([window.location.hostname]); this.detect(); this.initContent(); this.initted = true; } }; BreakpointHandler.KNOWN_HTTPS_HOSTS = [ "www.google.org", "www.google.com", "services.google.com", "blogger.com", "draft.blogger.com", "www.blogger.com", "photos1.blogger.com", "photos2.blogger.com", "photos3.blogger.com", "blogblog.com", "img1.blogblog.com", "img2.blogblog.com", "www.blogblog.com", "www1.blogblog.com", "www2.blogblog.com", "0.bp.blogspot.com", "1.bp.blogspot.com", "2.bp.blogspot.com", "3.bp.blogspot.com", "4.bp.blogspot.com", "lh3.googleusercontent.com", "lh4.googleusercontent.com", "lh5.googleusercontent.com", "lh6.googleusercontent.com", "themes.googleusercontent.com", ]; BreakpointHandler.prototype.rewriteForSSL = function(html) { // Handle HTTP -> HTTPS source replacement of images, movies, and other embedded content. return html.replace(this.sslImageRegex, '$1https://$4') .replace(this.sslImageCurrentDomainRegex, '$1//$4') .replace(/(<(embed|iframe)[^>]+?src=("|'))http:\/\/([^"']*?(youtube|picasaweb\.google)\.com)/g, '$1https://$4') // Slideshow SWF takes a image host, so we need to rewrite that parameter. .replace(/(<embed[^>]+?feed=http(?=[^s]))/g, '$1s'); }; $(document).ready(function() { var handler = new BreakpointHandler(); handler.process(); // Top-level navigation. $(".BlogArchive .tab").click(function(ev) { ev.preventDefault(); $(this).parent().toggleClass('active'); $(this).siblings().slideToggle(300); }); $(".Label .tab").click(function(ev) { ev.preventDefault(); $(this).parent().toggleClass('active'); $(this).siblings().slideToggle(300); }); // Blog archive year expansion. $('.BlogArchive .intervalToggle').click(function(ev) { ev.preventDefault(); if ($(this).parent().hasClass('collapsed')) { $(this).parent().removeClass('collapsed'); $(this).parent().addClass('expanded'); } else { $(this).parent().removeClass('expanded'); $(this).parent().addClass('collapsed'); } }); // Reverse order of months. $('.BlogArchive .intervalToggle + div').each(function(_, items) { var year = $(this); year.children().each(function(_, month) { year.prepend(month); }); }); // Set anchors to open in new tab. $('.post-content img').parent().each(function(_, node) { if (node.nodeName == 'A') { $(this).attr('target', '_blank'); } }); // Process search requests. $('.searchBox input').on("keypress", function(ev) { if (ev.which == 13) { window.location.href = 'https://www.google.com/search?q=site%3A' + window.location.hostname + '%20' + encodeURIComponent ($(this).val()); } }); }); //]]> </script> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY7Dmwf9Tuhf31Xs76YgAZMQKMJspA:1732413221280';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2471378914199150966','//blog.chromium.org/search/label/10th%20birthday','2471378914199150966'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2471378914199150966', 'title': 'Chromium Blog', 'url': 'https://blog.chromium.org/search/label/10th%20birthday', 'canonicalUrl': 'https://blog.chromium.org/search/label/10th%20birthday', 'homepageUrl': 'https://blog.chromium.org/', 'searchUrl': 'https://blog.chromium.org/search', 'canonicalHomepageUrl': 'https://blog.chromium.org/', 'blogspotFaviconUrl': 'https://blog.chromium.org/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-37592578-1', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Chromium Blog - Atom\x22 href\x3d\x22https://blog.chromium.org/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Chromium Blog - RSS\x22 href\x3d\x22https://blog.chromium.org/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Chromium Blog - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2471378914199150966/posts/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d78375fb222d99b3', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'index', 'searchLabel': '10th birthday', 'pageName': '10th birthday', 'pageTitle': 'Chromium Blog: 10th birthday'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Chromium Blog', 'description': 'News and developments from the open source browser project', 'url': 'https://blog.chromium.org/search/label/10th%20birthday', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': false, 'isSearch': true, 'isLabelSearch': true, 'search': {'label': '10th birthday', 'resultsMessage': 'Showing posts with the label 10th birthday', 'resultsMessageHtml': 'Showing posts with the label \x3cspan class\x3d\x27search-label\x27\x3e10th birthday\x3c/span\x3e'}}}]); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'navMessage': 'Showing posts with label \x3cb\x3e10th birthday\x3c/b\x3e. \x3ca href\x3d\x22https://blog.chromium.org/\x22\x3eShow all posts\x3c/a\x3e'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'sidebar-top', document.getElementById('HTML8'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar', document.getElementById('Label1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'sidebar', document.getElementById('HTML6'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar-bottom', document.getElementById('HTML4'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar-bottom', document.getElementById('HTML1'), {}, 'displayModeFull')); </script> </body> </html>