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: September 2018 </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/2018/09/' 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/2018/09/' 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/2018/09/' 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=dd422b0a-07e2-4e80-8415-27bb05d534cd' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2471378914199150966&zx=dd422b0a-07e2-4e80-8415-27bb05d534cd' 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='8989218379786603903' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2018/09/chrome-70-beta-shape-detection-web.html' itemprop='url' title='Chrome 70 beta: shape detection, web authentication, and more'> Chrome 70 beta: shape detection, web authentication, and more </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Thursday, September 13, 2018 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 70 on <a href="https://www.chromestatus.com/features#milestone%3D70">ChromeStatus.com</a>. Chrome 70 is beta as of September 13, 2018.<br /> <h2> <span style="font-size: x-large;"> Shape Detection Origin Trial</span></h2> The <a href="https://paul.kinlan.me/barcode-detection/">Shape Detection API</a> makes a device's shape detection capabilities available on the web, letting you identify faces, barcodes, and text in images. It does this without the use of a performance-killing library. As Chrome 70, this API is available for experimentation through a <a href="https://docs.google.com/forms/d/1OTvEk-VfavyKkMxef0Tvs0RFycl9NNu1vdg3FrqJhX8/viewform?edit_requested=true">Chrome origin trial</a>.<br /> <br /> The <a href="https://www.chromestatus.com/features/4757990523535360">Shape Detection API</a> consists of three APIs: A <a href="https://wicg.github.io/shape-detection-api/#face-detection-api">Face Detection API</a>, a <a href="https://wicg.github.io/shape-detection-api/#barcode-detection-api">Barcode Detection API</a> and a <a href="https://wicg.github.io/shape-detection-api/text.html">Text Detection API</a>. Given an image bitmap or a blob, the Face Detection API returns the location of faces and the locations of eyes, noses, and mouths within those faces. To give you rudimentary control of performance, you can limit the number of returned faces and prioritize speed over performance. The Barcode Detection API decodes barcodes and QR codes into strings. (There is a QR code demo at <a href="https://qrsnapper.com/">https://qrsnapper.com/</a>) The value can be anything from a single set of digits to multi-line text. The Text Detection API reads Latin-1 text (as defined in <a href="https://wicg.github.io/shape-detection-api/text.html#biblio-iso8859-1">iso8859-1</a>) in images. All of these APIs only expose what's supported in the <a href="https://www.chromestatus.com/feature/4757990523535360">underlying device</a>.<br /> <br /> A short example will give you a taste of these APIs, all of which work in a similar fashion. The code below finds all barcodes or QR codes in a given image and prints their values to the console.<br /> <br /> <br /> <pre>const image = document.getElementById('someImage'); try { const barcodeDetector = new BarcodeDetector(); const barcodes = await barcodeDetector.detect(image); barcodes.forEach(barcode => console.log(barcodes.rawValue)); } catch (exception) { console.error('Boo! Barcode detection failed:', exception); } </pre> <br /> <h2> <span style="font-size: x-large;"> Web Authentication</span></h2> Chrome 70 has two updates to the Web Authentication API related to the <code>PublicKeyCredential</code> type.<br /> <br /> The Credential Management API, enabled in Chrome 51, defined a framework for handling credentials that included semantics for creating, getting, and storing them. It did this through two credential types: <code>PasswordCredential</code> and <code>FederatedCredential</code>. The Web Authentication API adds a third credential type, <code><a href="https://www.chromestatus.com/feature/5669923372138496">PublicKeyCredential</a></code>, which allows web applications to create and use strong, cryptographically attested, and application-scoped credentials to strongly authenticate users. The <code>PublicKeyCredential</code> type was enabled by default on desktop in Chrome 67. In Chrome 70 it is also enabled by default on Android.<br /> <br /> Also enabled by default are macOS's TouchID and Android's fingerprint sensor via Web Authentication. These allow developers to access biometric authenticators through the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>'s <code>PublicKeyCredential</code> type.<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz6qvi8XUdieq4RLUbZgAoWctZUfqozhXUtglR9bipaynRKySqr3maA8mPJH2acKGvYvYN8ta6W7tb4FfEuHxsIo9cgBE-yMSUNWOGoBuiM6mU5HWX2JDiVG_DhtbMUJXp9qlmoo13dKH5/s1600/webauth.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="458" data-original-width="624" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz6qvi8XUdieq4RLUbZgAoWctZUfqozhXUtglR9bipaynRKySqr3maA8mPJH2acKGvYvYN8ta6W7tb4FfEuHxsIo9cgBE-yMSUNWOGoBuiM6mU5HWX2JDiVG_DhtbMUJXp9qlmoo13dKH5/s320/webauth.png" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">A Web Authentication verification screen</td></tr> </tbody></table> <h2> <span style="font-size: x-large;"> Other Features in this Release</span></h2> <h3> Displaying a dialog causes pages to lose fullscreen</h3> Dialog boxes, specifically authentication prompts, payments, and file pickers require context for users to make decisions. Fullscreen, by definition is immersive, and removes the context that a user needs to make a decision. <a href="https://www.chromestatus.com/feature/5703243371905024">Chrome now exits full screen</a> whenever a page shows a dialog box. <br /> <h3> HTML</h3> <h4> Add referrerpolicy support to <script> elements</h4> Many resource-fetching elements have support for the <code>referrerpolicy</code> attribute, which lets developers provide a keyword to influence the value of the Referer HTTP header that accompanies a request. The <code><link></code> element already has support for this, so it is technically possible to preload a script with a developer-set referrer policy. Starting in this version of Chrome, the <a href="https://www.chromestatus.com/feature/5227651627220992"><code><script></code> element supports the <code>referrerpolicy</code></a> as well.<br /> <h4> The <rp> element defaults to display:none</h4> The default <a href="https://www.chromestatus.com/feature/5454252407259136">style of the <code><rp></code> element is changed</a> to <code>display:none</code> instead of <code>display:inline</code> even if it is not inside the <code><ruby></code> element as defined in the HTML specification. This behavior is implemented in the user agent stylesheet, but the web author can override it.<br /> <h3> Intervention Reports</h3> An <a href="https://w3c.github.io/reporting/#intervention-report">intervention</a> is when a user agent does not honor an application request for security, performance, or annoyance reasons. With this change, Chrome can be configured to send <a href="https://www.chromestatus.com/feature/5544632075157504">intervention and deprecation messages</a> to your servers using the <code>Report-To</code> HTTP Response header field and surface them in the <code>ReportingObserver</code> interface. This is the first of several proposed uses for the <span style="font-family: monospace;">Report-To</span> header. Follow these links to learn more about the <a href="https://developers.google.com/web/updates/2018/09/reportingapi">header</a> and the <a href="https://developers.google.com/web/updates/2018/07/reportingobserver">interface</a>.<br /> <h3> Media</h3> <h4> Support codec and container switching with MSE using SourceBuffer.changeType()</h4> This change adds the <code><a href="https://www.chromestatus.com/feature/5719220952236032">SourceBuffer.changeType()</a></code> method to improve cross-codec or cross-bytestream transitions during playback with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a>.<br /> <h4> Support Opus in mp4 with Media Source Extensions</h4> Opus is an audio codec already supported by the HTML5 <code>src</code> attribute on <code><url></code> elements. It is <a href="https://www.chromestatus.com/feature/5100845653819392">now supported</a> by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a>.<br /> <h3> 'name' attribute for dedicated workers</h3> Dedicated workers <a href="https://www.chromestatus.com/feature/4594144336936960">now have a <code>name</code> attribute</a>, which is specified by an optional argument on the worker's constructor. This lets you distinguish dedicated workers by name when you have multiple workers with the same URL. Developers can print <code>name</code> in the DevTools console which will make it easier to debug workers. When the <code>name</code> parameter is omitted, an empty string is used as the default value. For more information, see the discussion <a href="https://github.com/whatwg/html/issues/2477">on GitHub</a>. <br /> <h3> ontouch* APIs default to disabled on desktop</h3> To avoid confusion on touch feature detection, <code>ontouch*</code> members on <code>window</code>, <code>document</code>, and <code>element</code> are <a href="https://www.chromestatus.com/feature/4764225348042752">disabled by default on desktop</a> (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as <code>addEventListener("touchstart", ...)</code> is not affected.<br /> <h3> Options dictionary for postMessage methods</h3> An optional <code>PostMessageOptions</code> object has been <a href="https://www.chromestatus.com/feature/6219707585658880">added as an argument to <code>postMessage()</code></a> for 6 of the 7 interfaces where it's supported, specifically, <code>DedicatedWorkerGlobalScope</code>, <code>MessagePort</code>, <code>ServiceWorker</code>, <code>ServiceWorker.Client</code>, <code>Window</code>, and <code>Worker</code>. This gives the function a similar interface on its definitions and allows it to be extended in the future. Because <code>broadcastChannel.postMessage()</code> doesn't take additional arguments (such as transfer) it is not being changed.<br /> <h3> Rename Atomics.wake() to Atomics.notify()</h3> <h3> <span style="font-size: small; font-weight: 400;">The </span><code style="font-weight: 400;">Atomics.wake()</code><span style="font-size: small; font-weight: 400;"> method is being </span><a href="https://www.chromestatus.com/feature/6228189936353280" style="font-size: medium; font-weight: 400;">renamed Atomics.notify()</a><span style="font-size: small; font-weight: 400;">. This is a low-level function to wake a Worker that has been suspended via </span><code style="font-weight: 400;">Atomics.wait()</code><span style="font-size: small; font-weight: 400;">. This conforms to a specification change made to alleviate confusion created by the similarity of the names wait and wake.</span></h3> <h3> RTCPeerConnection.getConfiguration()</h3> This  <a href="https://www.chromestatus.com/feature/5271355306016768"><code>getConfiguration()</code> was implemented</a> according to the WebRTC 1.0. Specifically it returns the last configuration applied via <code>setConfiguration()</code>, or if <code>setConfiguration()</code> hasn't been called, the configuration the <code>RTCPeerConnection</code> was constructed with.<br /> <h3> Symbol.prototype.description</h3> A <a href="https://www.chromestatus.com/feature/5340787290144768">description property</a> is being added to <code>Symbol.prototype</code> to provide a more ergonomic way of accessing the description of a Symbol. Previously, the description could only be accessed indirectly through <code>Symbol.protoype.toString()</code>.<br /> <h3> TLS 1.3</h3> <a href="https://www.chromestatus.com/feature/5934924745932800">TLS 1.3</a> is an overhaul of the TLS protocol with a simpler, less error-prone design that improves both efficiency and security. The new design reduces the number of round-trips required to establish a connection and removes legacy insecure options, making it easier to securely configure a server. It additionally encrypts more of the handshake and makes the resumption mode more resilient to key compromise. <br /> <h3> Update behavior of CSS Grid Layout percentage row tracks and gutters</h3> Percentage row tracks and gutters in grid containers <a href="https://www.chromestatus.com/feature/6708326821789696">now have indefinite heights</a>. Previously, these were behaving similarly to percentage heights in regular blocks, but the CSS Working Group has resolved to make them behave the same as for columns, making them symmetric. Percentages are now ignored when computing intrinsic height and resolved afterwards against that height. That way both column and row axes will have symmetric behavior to resolve percentages tracks and gutters.<br /> <h3> Web Bluetooth available on Windows 10</h3> <a href="https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web">Web Bluetooth</a> allows websites to communicate over GATT with nearby user-selected Bluetooth devices in a secure and privacy-preserving way. In Chrome 56, this shipped on Android, ChromeOS, and macOS. In Chrome 70 it is <a href="https://www.chromestatus.com/feature/5264933985976320">shipping on Windows 10</a>. For earlier versions of Windows and Linux, it is still behind a flag (chrome://flags/#enable-experimental-web-platform-features).<br /> <h3> WebUSB on Dedicated Workers</h3> WebUSB is enabled <a href="https://www.chromestatus.com/feature/5928209916887040">inside dedicated workers</a>. This allows developers to perform heavy I/O and processing of data from a USB device on a separate thread to reduce the performance impact on the main thread.<br /> <h2> <span style="font-size: x-large;"> Deprecations and Interoperability Improvements</span></h2> Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes. <br /> <h3> Remove AppCache from insecure contexts.</h3> <code>AppCache</code> is now <a href="https://www.chromestatus.com/feature/5714236168732672">removed from insecure contexts</a>. <code>AppCache</code> is a powerful feature that allows offline and persistent access to an origin, which is a powerful privilege escalation for cross-site scripting. This removes that attack vector by only allowing it only over HTTPS. Developers looking for an alternative to AppCache are encouraged to use service workers. An <a href="https://www.npmjs.com/package/sw-appcache-behavior">experimental library is available</a> to ease that transition.<br /> <h3> Remove anonymous getter for HTMLFrameSetElement</h3> The anonymous getter for <code>HTMLFrameSetElement</code> is non-standard and therefore <a href="https://www.chromestatus.com/feature/5235521668251648">removed</a>.<br /> <h3> Deprecate and remove Gamepads.item() </h3> The legacy <a href="https://www.chromestatus.com/feature/5135093320384512"><code>item()</code> accessor is removed</a> from the <code>Gamepads</code> array. This change improves compatibility with Firefox which is so far the only browser to implement <code>GamepadList</code>.<br /> <h3> Deprecate Custom Elements v0</h3> Custom Elements are a web components technology that lets you create new HTML tags, beef up existing tags, or extend components authored by other developers. Custom Elements v1 have been <a href="https://www.chromestatus.com/feature/4696261944934400">implemented in Chrome</a> since version 54, which shipped in October 2016. Custom Elements <a href="https://www.chromestatus.com/feature/4642138092470272">v0 is now deprecated</a> with removal expected in Chrome 73, around March 2019.<br /> <h3> Deprecate HTML Imports</h3> HTML Imports, which allow HTML to be imported from one document to another, are <a href="https://www.chromestatus.com/feature/5144752345317376">now deprecated</a>. Removal is expected in Chrome 73, around March 2019. Sites depending on HTML imports already require a polyfill on non-Chromium browsers. When HTML imports is removed, sites that have the polyfill should continue to work on Chrome.<br /> <h3> Deprecate Shadow DOM v0</h3> Shadow DOM is a web components technology that uses scoped subtrees inside elements. Shadow DOM v1 has been <a href="https://www.chromestatus.com/feature/4667415417847808">implemented in Chrome</a> since version 53, which shipped in August of 2016. Shadow DOM <a href="https://www.chromestatus.com/feature/4507242028072960">v0 is now deprecated</a> with removal expected in Chrome 73, around March 2019. Sites depending on HTML imports already require a polyfill on non-Chromium browsers. When Shadow DOM v0 is removed, sites that have the polyfill should continue to work on Chrome.<br /> <h3> Deprecate SpeechSynthesis.speak() without user activation</h3> The <code>speechSynthesis.speak()</code> function <a href="https://www.chromestatus.com/feature/5687444770914304">now throws an error</a> if the document has not received a user activation. This API is being abused by sites since it is one of the only remaining APIs which does not adhere to autoplay policies in Chrome. <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 70 on <a href="https://www.chromestatus.com/features#milestone%3D70">ChromeStatus.com</a>. Chrome 70 is beta as of September 13, 2018.<br /> <h2> <span style="font-size: x-large;"> Shape Detection Origin Trial</span></h2> The <a href="https://paul.kinlan.me/barcode-detection/">Shape Detection API</a> makes a device's shape detection capabilities available on the web, letting you identify faces, barcodes, and text in images. It does this without the use of a performance-killing library. As Chrome 70, this API is available for experimentation through a <a href="https://docs.google.com/forms/d/1OTvEk-VfavyKkMxef0Tvs0RFycl9NNu1vdg3FrqJhX8/viewform?edit_requested=true">Chrome origin trial</a>.<br /> <br /> The <a href="https://www.chromestatus.com/features/4757990523535360">Shape Detection API</a> consists of three APIs: A <a href="https://wicg.github.io/shape-detection-api/#face-detection-api">Face Detection API</a>, a <a href="https://wicg.github.io/shape-detection-api/#barcode-detection-api">Barcode Detection API</a> and a <a href="https://wicg.github.io/shape-detection-api/text.html">Text Detection API</a>. Given an image bitmap or a blob, the Face Detection API returns the location of faces and the locations of eyes, noses, and mouths within those faces. To give you rudimentary control of performance, you can limit the number of returned faces and prioritize speed over performance. The Barcode Detection API decodes barcodes and QR codes into strings. (There is a QR code demo at <a href="https://qrsnapper.com/">https://qrsnapper.com/</a>) The value can be anything from a single set of digits to multi-line text. The Text Detection API reads Latin-1 text (as defined in <a href="https://wicg.github.io/shape-detection-api/text.html#biblio-iso8859-1">iso8859-1</a>) in images. All of these APIs only expose what's supported in the <a href="https://www.chromestatus.com/feature/4757990523535360">underlying device</a>.<br /> <br /> A short example will give you a taste of these APIs, all of which work in a similar fashion. The code below finds all barcodes or QR codes in a given image and prints their values to the console.<br /> <br /> <br /> <pre>const image = document.getElementById('someImage'); try { const barcodeDetector = new BarcodeDetector(); const barcodes = await barcodeDetector.detect(image); barcodes.forEach(barcode => console.log(barcodes.rawValue)); } catch (exception) { console.error('Boo! Barcode detection failed:', exception); } </pre> <br /> <h2> <span style="font-size: x-large;"> Web Authentication</span></h2> Chrome 70 has two updates to the Web Authentication API related to the <code>PublicKeyCredential</code> type.<br /> <br /> The Credential Management API, enabled in Chrome 51, defined a framework for handling credentials that included semantics for creating, getting, and storing them. It did this through two credential types: <code>PasswordCredential</code> and <code>FederatedCredential</code>. The Web Authentication API adds a third credential type, <code><a href="https://www.chromestatus.com/feature/5669923372138496">PublicKeyCredential</a></code>, which allows web applications to create and use strong, cryptographically attested, and application-scoped credentials to strongly authenticate users. The <code>PublicKeyCredential</code> type was enabled by default on desktop in Chrome 67. In Chrome 70 it is also enabled by default on Android.<br /> <br /> Also enabled by default are macOS's TouchID and Android's fingerprint sensor via Web Authentication. These allow developers to access biometric authenticators through the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>'s <code>PublicKeyCredential</code> type.<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz6qvi8XUdieq4RLUbZgAoWctZUfqozhXUtglR9bipaynRKySqr3maA8mPJH2acKGvYvYN8ta6W7tb4FfEuHxsIo9cgBE-yMSUNWOGoBuiM6mU5HWX2JDiVG_DhtbMUJXp9qlmoo13dKH5/s1600/webauth.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="458" data-original-width="624" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz6qvi8XUdieq4RLUbZgAoWctZUfqozhXUtglR9bipaynRKySqr3maA8mPJH2acKGvYvYN8ta6W7tb4FfEuHxsIo9cgBE-yMSUNWOGoBuiM6mU5HWX2JDiVG_DhtbMUJXp9qlmoo13dKH5/s320/webauth.png" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">A Web Authentication verification screen</td></tr> </tbody></table> <h2> <span style="font-size: x-large;"> Other Features in this Release</span></h2> <h3> Displaying a dialog causes pages to lose fullscreen</h3> Dialog boxes, specifically authentication prompts, payments, and file pickers require context for users to make decisions. Fullscreen, by definition is immersive, and removes the context that a user needs to make a decision. <a href="https://www.chromestatus.com/feature/5703243371905024">Chrome now exits full screen</a> whenever a page shows a dialog box. <br /> <h3> HTML</h3> <h4> Add referrerpolicy support to <script> elements</h4> Many resource-fetching elements have support for the <code>referrerpolicy</code> attribute, which lets developers provide a keyword to influence the value of the Referer HTTP header that accompanies a request. The <code><link></code> element already has support for this, so it is technically possible to preload a script with a developer-set referrer policy. Starting in this version of Chrome, the <a href="https://www.chromestatus.com/feature/5227651627220992"><code><script></code> element supports the <code>referrerpolicy</code></a> as well.<br /> <h4> The <rp> element defaults to display:none</h4> The default <a href="https://www.chromestatus.com/feature/5454252407259136">style of the <code><rp></code> element is changed</a> to <code>display:none</code> instead of <code>display:inline</code> even if it is not inside the <code><ruby></code> element as defined in the HTML specification. This behavior is implemented in the user agent stylesheet, but the web author can override it.<br /> <h3> Intervention Reports</h3> An <a href="https://w3c.github.io/reporting/#intervention-report">intervention</a> is when a user agent does not honor an application request for security, performance, or annoyance reasons. With this change, Chrome can be configured to send <a href="https://www.chromestatus.com/feature/5544632075157504">intervention and deprecation messages</a> to your servers using the <code>Report-To</code> HTTP Response header field and surface them in the <code>ReportingObserver</code> interface. This is the first of several proposed uses for the <span style="font-family: monospace;">Report-To</span> header. Follow these links to learn more about the <a href="https://developers.google.com/web/updates/2018/09/reportingapi">header</a> and the <a href="https://developers.google.com/web/updates/2018/07/reportingobserver">interface</a>.<br /> <h3> Media</h3> <h4> Support codec and container switching with MSE using SourceBuffer.changeType()</h4> This change adds the <code><a href="https://www.chromestatus.com/feature/5719220952236032">SourceBuffer.changeType()</a></code> method to improve cross-codec or cross-bytestream transitions during playback with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a>.<br /> <h4> Support Opus in mp4 with Media Source Extensions</h4> Opus is an audio codec already supported by the HTML5 <code>src</code> attribute on <code><url></code> elements. It is <a href="https://www.chromestatus.com/feature/5100845653819392">now supported</a> by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a>.<br /> <h3> 'name' attribute for dedicated workers</h3> Dedicated workers <a href="https://www.chromestatus.com/feature/4594144336936960">now have a <code>name</code> attribute</a>, which is specified by an optional argument on the worker's constructor. This lets you distinguish dedicated workers by name when you have multiple workers with the same URL. Developers can print <code>name</code> in the DevTools console which will make it easier to debug workers. When the <code>name</code> parameter is omitted, an empty string is used as the default value. For more information, see the discussion <a href="https://github.com/whatwg/html/issues/2477">on GitHub</a>. <br /> <h3> ontouch* APIs default to disabled on desktop</h3> To avoid confusion on touch feature detection, <code>ontouch*</code> members on <code>window</code>, <code>document</code>, and <code>element</code> are <a href="https://www.chromestatus.com/feature/4764225348042752">disabled by default on desktop</a> (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as <code>addEventListener("touchstart", ...)</code> is not affected.<br /> <h3> Options dictionary for postMessage methods</h3> An optional <code>PostMessageOptions</code> object has been <a href="https://www.chromestatus.com/feature/6219707585658880">added as an argument to <code>postMessage()</code></a> for 6 of the 7 interfaces where it's supported, specifically, <code>DedicatedWorkerGlobalScope</code>, <code>MessagePort</code>, <code>ServiceWorker</code>, <code>ServiceWorker.Client</code>, <code>Window</code>, and <code>Worker</code>. This gives the function a similar interface on its definitions and allows it to be extended in the future. Because <code>broadcastChannel.postMessage()</code> doesn't take additional arguments (such as transfer) it is not being changed.<br /> <h3> Rename Atomics.wake() to Atomics.notify()</h3> <h3> <span style="font-size: small; font-weight: 400;">The </span><code style="font-weight: 400;">Atomics.wake()</code><span style="font-size: small; font-weight: 400;"> method is being </span><a href="https://www.chromestatus.com/feature/6228189936353280" style="font-size: medium; font-weight: 400;">renamed Atomics.notify()</a><span style="font-size: small; font-weight: 400;">. This is a low-level function to wake a Worker that has been suspended via </span><code style="font-weight: 400;">Atomics.wait()</code><span style="font-size: small; font-weight: 400;">. This conforms to a specification change made to alleviate confusion created by the similarity of the names wait and wake.</span></h3> <h3> RTCPeerConnection.getConfiguration()</h3> This  <a href="https://www.chromestatus.com/feature/5271355306016768"><code>getConfiguration()</code> was implemented</a> according to the WebRTC 1.0. Specifically it returns the last configuration applied via <code>setConfiguration()</code>, or if <code>setConfiguration()</code> hasn't been called, the configuration the <code>RTCPeerConnection</code> was constructed with.<br /> <h3> Symbol.prototype.description</h3> A <a href="https://www.chromestatus.com/feature/5340787290144768">description property</a> is being added to <code>Symbol.prototype</code> to provide a more ergonomic way of accessing the description of a Symbol. Previously, the description could only be accessed indirectly through <code>Symbol.protoype.toString()</code>.<br /> <h3> TLS 1.3</h3> <a href="https://www.chromestatus.com/feature/5934924745932800">TLS 1.3</a> is an overhaul of the TLS protocol with a simpler, less error-prone design that improves both efficiency and security. The new design reduces the number of round-trips required to establish a connection and removes legacy insecure options, making it easier to securely configure a server. It additionally encrypts more of the handshake and makes the resumption mode more resilient to key compromise. <br /> <h3> Update behavior of CSS Grid Layout percentage row tracks and gutters</h3> Percentage row tracks and gutters in grid containers <a href="https://www.chromestatus.com/feature/6708326821789696">now have indefinite heights</a>. Previously, these were behaving similarly to percentage heights in regular blocks, but the CSS Working Group has resolved to make them behave the same as for columns, making them symmetric. Percentages are now ignored when computing intrinsic height and resolved afterwards against that height. That way both column and row axes will have symmetric behavior to resolve percentages tracks and gutters.<br /> <h3> Web Bluetooth available on Windows 10</h3> <a href="https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web">Web Bluetooth</a> allows websites to communicate over GATT with nearby user-selected Bluetooth devices in a secure and privacy-preserving way. In Chrome 56, this shipped on Android, ChromeOS, and macOS. In Chrome 70 it is <a href="https://www.chromestatus.com/feature/5264933985976320">shipping on Windows 10</a>. For earlier versions of Windows and Linux, it is still behind a flag (chrome://flags/#enable-experimental-web-platform-features).<br /> <h3> WebUSB on Dedicated Workers</h3> WebUSB is enabled <a href="https://www.chromestatus.com/feature/5928209916887040">inside dedicated workers</a>. This allows developers to perform heavy I/O and processing of data from a USB device on a separate thread to reduce the performance impact on the main thread.<br /> <h2> <span style="font-size: x-large;"> Deprecations and Interoperability Improvements</span></h2> Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes. <br /> <h3> Remove AppCache from insecure contexts.</h3> <code>AppCache</code> is now <a href="https://www.chromestatus.com/feature/5714236168732672">removed from insecure contexts</a>. <code>AppCache</code> is a powerful feature that allows offline and persistent access to an origin, which is a powerful privilege escalation for cross-site scripting. This removes that attack vector by only allowing it only over HTTPS. Developers looking for an alternative to AppCache are encouraged to use service workers. An <a href="https://www.npmjs.com/package/sw-appcache-behavior">experimental library is available</a> to ease that transition.<br /> <h3> Remove anonymous getter for HTMLFrameSetElement</h3> The anonymous getter for <code>HTMLFrameSetElement</code> is non-standard and therefore <a href="https://www.chromestatus.com/feature/5235521668251648">removed</a>.<br /> <h3> Deprecate and remove Gamepads.item() </h3> The legacy <a href="https://www.chromestatus.com/feature/5135093320384512"><code>item()</code> accessor is removed</a> from the <code>Gamepads</code> array. This change improves compatibility with Firefox which is so far the only browser to implement <code>GamepadList</code>.<br /> <h3> Deprecate Custom Elements v0</h3> Custom Elements are a web components technology that lets you create new HTML tags, beef up existing tags, or extend components authored by other developers. Custom Elements v1 have been <a href="https://www.chromestatus.com/feature/4696261944934400">implemented in Chrome</a> since version 54, which shipped in October 2016. Custom Elements <a href="https://www.chromestatus.com/feature/4642138092470272">v0 is now deprecated</a> with removal expected in Chrome 73, around March 2019.<br /> <h3> Deprecate HTML Imports</h3> HTML Imports, which allow HTML to be imported from one document to another, are <a href="https://www.chromestatus.com/feature/5144752345317376">now deprecated</a>. Removal is expected in Chrome 73, around March 2019. Sites depending on HTML imports already require a polyfill on non-Chromium browsers. When HTML imports is removed, sites that have the polyfill should continue to work on Chrome.<br /> <h3> Deprecate Shadow DOM v0</h3> Shadow DOM is a web components technology that uses scoped subtrees inside elements. Shadow DOM v1 has been <a href="https://www.chromestatus.com/feature/4667415417847808">implemented in Chrome</a> since version 53, which shipped in August of 2016. Shadow DOM <a href="https://www.chromestatus.com/feature/4507242028072960">v0 is now deprecated</a> with removal expected in Chrome 73, around March 2019. Sites depending on HTML imports already require a polyfill on non-Chromium browsers. When Shadow DOM v0 is removed, sites that have the polyfill should continue to work on Chrome.<br /> <h3> Deprecate SpeechSynthesis.speak() without user activation</h3> The <code>speechSynthesis.speak()</code> function <a href="https://www.chromestatus.com/feature/5687444770914304">now throws an error</a> if the document has not received a user activation. This API is being abused by sites since it is one of the only remaining APIs which does not adhere to autoplay policies in Chrome. <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:Chrome 70 beta: shape detection, web authentication, and more&url=https://blog.chromium.org/2018/09/chrome-70-beta-shape-detection-web.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/chrome-70-beta-shape-detection-web.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/chrome-70-beta-shape-detection-web.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/beta' rel='tag'> beta </a> , <a class='label' href='https://blog.chromium.org/search/label/origin%20trials' rel='tag'> origin trials </a> </span> </div> </div> </div> <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='blog-pager' id='blog-pager'> <a class='home-link' href='https://blog.chromium.org/'> <i class='material-icons'>  </i> </a> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='https://blog.chromium.org/search?updated-max=2018-11-13T10:31:00-08:00&max-results=7&reverse-paginate=true' id='Blog1_blog-pager-newer-link' title='Newer Posts'> <i class='material-icons'>  </i> </a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='https://blog.chromium.org/search?updated-max=2018-09-06T09:59:00-07:00&max-results=7' 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> <a dir='ltr' href='https://blog.chromium.org/search/label/10th%20birthday'> 10th birthday </a> <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 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/2025/'> 2025 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2025/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/2024/'> 2024 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/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/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 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/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 expanded'> <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/2806328968-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY7pV7R3dSJBi2uIyaCHQW6qAJR8rQ:1743757767688';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2471378914199150966','//blog.chromium.org/2018/09/','2471378914199150966'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2471378914199150966', 'title': 'Chromium Blog', 'url': 'https://blog.chromium.org/2018/09/', 'canonicalUrl': 'https://blog.chromium.org/2018/09/', '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/c4ef6ff9ae7c94eb', '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': 'archive', 'pageName': 'September 2018', 'pageTitle': 'Chromium Blog: September 2018'}}, {'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/2018/09/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': true, 'isLabelSearch': false, 'archive': {'year': 2018, 'month': 9, 'rangeMessage': 'Showing posts from September, 2018'}}}]); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, '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>