{"id":404,"date":"2021-01-19T16:58:17","date_gmt":"2021-01-19T16:58:17","guid":{"rendered":"https:\/\/tbekk.com\/devstream\/?p=404"},"modified":"2021-01-21T12:00:44","modified_gmt":"2021-01-21T12:00:44","slug":"whats-new-in-devtools-chrome-89","status":"publish","type":"post","link":"https:\/\/tbekk.com\/devstream\/blog\/2021\/01\/19\/whats-new-in-devtools-chrome-89\/","title":{"rendered":"What&#8217;s New In DevTools (Chrome 89)"},"content":{"rendered":"\n<ul class=\"wp-block-list\"><li><em>Published at: <a href=\"https:\/\/developers.google.com\/web\/updates\/2021\/01\/devtools\">https:\/\/developers.google.com\/web\/updates\/2021\/01\/devtools<\/a><\/em><\/li><li><em>Author: <a href=\"https:\/\/developers.google.com\/web\/resources\/contributors\/jecelynyeen\">Jecelyn\u00a0Yeen<\/a><\/em><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"trusted-types\">Debugging support for Trusted Types violations<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"trusted-types-violations\">Breakpoint on Trusted Type violations<\/h3>\n\n\n\n<p>You can now set breakpoints and catch exceptions on Trusted Type Violations in the&nbsp;<strong>Sources<\/strong>&nbsp;panel.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/w3c\/webappsec-trusted-types\">Trusted Types<\/a>&nbsp;API helps you prevent DOM-based cross-site scripting vulnerabilities. Learn how to write, review and maintain applications free of DOM XSS vulnerabilities with Trusted Types&nbsp;<a href=\"https:\/\/web.dev\/trusted-types\/\">here<\/a>.<\/p>\n\n\n\n<p>In the&nbsp;<strong>Sources<\/strong>&nbsp;panel, open the&nbsp;<strong>debugger<\/strong>&nbsp;sidebar pane. Expand the&nbsp;<strong>CSP Violation Breakpoints<\/strong>&nbsp;section and enable the&nbsp;<strong>Trusted Type violations<\/strong>&nbsp;checkbox to pause on the exceptions. Try it yourself with&nbsp;<a href=\"https:\/\/tt-enforced.glitch.me\/\">this demo page<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/trusted-type-violations.png\" alt=\"Breakpoint on Trusted Type violations\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1142804\">1142804<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"trusted-type-link\">Link issue in the Sources panel to the Issues tab<\/h3>\n\n\n\n<p>The&nbsp;<strong>Sources<\/strong>&nbsp;panel now shows a warning icon next to the line that violates Trusted Type. Hover on it to preview the exception. Click on it to expand the&nbsp;<strong>Issues<\/strong>&nbsp;tab, it provides more details on the exceptions and guidance on how to fix it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/trusted-type-link.png\" alt=\"Link issue in the Sources panel to the Issues tab\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1150883\">1150883<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"node-screenshot\">Capture node screenshot beyond viewport<\/h2>\n\n\n\n<p>You can now capture node screenshots for a full node, including content below the fold. Previously, the screenshot was cut off for content not visible in the viewport. The full-page screenshots are precise now as well.<\/p>\n\n\n\n<p>In the&nbsp;<strong>Elements<\/strong>&nbsp;panel, right click on an element and select&nbsp;<strong>Capture node screenshot<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/node-screenshot.png\" alt=\"Capture node screenshot beyond viewport\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1003629\">1003629<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"trust-token\">New Trust Tokens tab for network requests<\/h2>\n\n\n\n<p>Inspect the Trust Token network requests with the new&nbsp;<strong>Trust Tokens<\/strong>&nbsp;tab.<\/p>\n\n\n\n<p>Trust Token is a new API to help combat fraud and distinguish bots from real humans, without passive tracking. Learn how to&nbsp;<a href=\"https:\/\/web.dev\/trust-tokens\/\">get started with Trust Tokens<\/a>.<\/p>\n\n\n\n<p>Further debugging support will come in the next releases.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/trust-token.png\" alt=\"New Trust Token tab for network requests\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1126824\">1126824<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lighthouse\">Lighthouse 7 in the Lighthouse panel<\/h2>\n\n\n\n<p>The&nbsp;<strong>Lighthouse<\/strong>&nbsp;panel is now running Lighthouse 7. Check out the&nbsp;<a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/releases\/tag\/v7.0.0\">release notes<\/a>&nbsp;for a full list of changes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/lighthouse.png\" alt=\"Lighthouse 7 in the Lighthouse panel\"\/><\/figure>\n\n\n\n<p>New audits in Lighthouse 7:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Preload Largest Contentful Paint (LCP) image<\/strong>. Audits if the image used by the LCP element is preloaded in order to improve your LCP time.<\/li><li><strong>Issues logged to the&nbsp;<code>Issues<\/code>&nbsp;panel<\/strong>. Indicates a list of unresolved issues in the&nbsp;<code>Issues<\/code>&nbsp;panel.<\/li><li><strong>Progressive Web Apps (PWA)<\/strong>. The PWA Category changed fairly significantly.<\/li><li>The&nbsp;<strong>Installable<\/strong>&nbsp;group is now powered entirely by the capability checks that enable Chrome&#8217;s installable criteria. These are the same signals seen in the&nbsp;<strong>Manifest pane<\/strong>.<ul><li>The &#8220;Registers a service worker\u2026&#8221; audit moves to the&nbsp;<strong>PWA Optimized<\/strong>&nbsp;group, and the &#8220;Uses HTTPS&#8221; audit is now included as part of the key &#8220;installability requirements&#8221; audit.<\/li><li>The&nbsp;<strong>Fast and reliable<\/strong>&nbsp;group is removed. As the revamped &#8220;installability requirements&#8221; audit includes offline-capability checking, the \u201ccurrent page and start_url respond with 200 when offline\u201d audit was removed. The &#8220;Page load is fast enough on mobile network&#8221; audit was removed too.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/772558\">772558<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"elements-panel\">Elements panel updates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"force-target\">Support forcing the CSS&nbsp;<code>:target<\/code>&nbsp;state<\/h3>\n\n\n\n<p>You can now use DevTools to force and inspect the CSS&nbsp;<code>:target<\/code>&nbsp;state.<\/p>\n\n\n\n<p>In the&nbsp;<strong>Elements<\/strong>&nbsp;panel, select an element and toggle the element state. Enable the&nbsp;<code>:target<\/code>&nbsp;checkbox to force and inspect the styles.<\/p>\n\n\n\n<p>Use the&nbsp;<code>:target<\/code>&nbsp;pseudo-class to style element when the hash in the URL and the id of an element are the same. Check out&nbsp;<a href=\"https:\/\/jec.fyi\/demo\/css-target#section-2\">this demo<\/a>&nbsp;to try it yourself. This new DevTools feature lets you test such styles without having to manually change the URL all the time.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/force-target.png\" alt=\"forcing the CSS `:target` state\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1156628\">1156628<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"duplicate-element\">New shortcut to duplicate element<\/h3>\n\n\n\n<p>Use the new&nbsp;<strong>Duplicate element<\/strong>&nbsp;shortcut to clone an element instantly.<\/p>\n\n\n\n<p>Right click an element in the&nbsp;<strong>Elements<\/strong>&nbsp;panel, select&nbsp;<strong>Duplicate element<\/strong>. A new element will be created under it.<\/p>\n\n\n\n<p>Alternatively, you can duplicate element with keyboard shortcuts:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Mac:&nbsp;<code>Shift<\/code>&nbsp;+&nbsp;<code>Option<\/code>&nbsp;+&nbsp;<code>\u2b07\ufe0f<\/code><\/li><li>Window\/ Linux:&nbsp;<code>Shift<\/code>&nbsp;+&nbsp;<code>Alt<\/code>&nbsp;+&nbsp;<code>\u2b07\ufe0f<\/code><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/duplicate-element.png\" alt=\"Duplicate element\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1150797\">1150797<\/a>,&nbsp;<a href=\"https:\/\/crbug.com\/1150797\">1150797<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"color-picker\">Color pickers for custom CSS properties<\/h3>\n\n\n\n<p>The&nbsp;<strong>Styles<\/strong>&nbsp;pane now shows color pickers for custom CSS properties.<\/p>\n\n\n\n<p>In addition, you can hold the&nbsp;<code>Shift<\/code>&nbsp;key and click on color picker to cycle through the RGBA, HSLA, and Hex representations of the color value.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/color-picker.png\" alt=\"Color pickers for custom CSS properties\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1147016\">1147016<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"copy-css\">New shortcuts to copy CSS properties<\/h3>\n\n\n\n<p>You can now copy CSS properties quicker with a few new shortcuts.<\/p>\n\n\n\n<p>In the&nbsp;<strong>Elements<\/strong>&nbsp;panel, select an element. Then, right-click on a CSS class or a CSS property in the&nbsp;<strong>Styles<\/strong>&nbsp;pane to copy the value.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/copy-css.png\" alt=\"New shortcuts to copy CSS properties\"\/><\/figure>\n\n\n\n<p>Copy options for CSS class:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Copy selector<\/strong>. Copy the current selector name.<\/li><li><strong>Copy rule<\/strong>. Copy the rule of the current selector.<\/li><li><strong>Copy all declarations<\/strong>: Copy all declarations under the current rule, including invalid and prefixed properties.<\/li><\/ul>\n\n\n\n<p>Copy options for CSS property:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Copy declaration<\/strong>. Copy the declaration of the current line.<\/li><li><strong>Copy property<\/strong>. Copy the property of the current line.<\/li><li><strong>Copy value<\/strong>: Copy the value of the current line.<\/li><\/ul>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1152391\">1152391<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cookies-updates\">Cookies updates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cookies-decoded\">New option to show URL-decoded cookies<\/h3>\n\n\n\n<p>You can now opt to view the URL-decoded cookies value in the&nbsp;<strong>Cookies<\/strong>&nbsp;pane.<\/p>\n\n\n\n<p>Go to the&nbsp;<strong>Application<\/strong>&nbsp;panel and select the&nbsp;<strong>Cookies<\/strong>&nbsp;pane. Select any cookie on the list. Enable the new&nbsp;<strong>Show URL decoded<\/strong>&nbsp;checkbox to view the decoded cookie.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/cookies-decoded.png\" alt=\"Option to show URL-decoded cookies\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/997625\">997625<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"clear-cookies\">Clear only visible cookies<\/h3>\n\n\n\n<p>The&nbsp;<strong>Clear all cookies<\/strong>&nbsp;button in the Cookies pane is now replaced by&nbsp;<strong>Clear filtered cookies<\/strong>&nbsp;button.<\/p>\n\n\n\n<p>In the&nbsp;<strong>Application<\/strong>&nbsp;panel &gt;&nbsp;<strong>Cookies<\/strong>&nbsp;pane, enter text in the textbox to filter the cookies. In our example here, we filter the list by \u201cPREF\u201d. Click on the&nbsp;<strong>Clear filtered cookies<\/strong>&nbsp;button to delete the visible cookies. Clear the filter text and you will see the other cookies remain in the list. Previously, you only had the option to clear all cookies.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/clear-cookies.png\" alt=\"Clear only visible cookies\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/978059\">978059<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"third-party-cookies\">New option to clear third-party cookies in the Storage pane<\/h3>\n\n\n\n<p>When clearing the site data in the&nbsp;<strong>Storage<\/strong>&nbsp;pane, DevTools now clear only first-party cookies by default. Enable the&nbsp;<strong>including third-party cookies<\/strong>&nbsp;to clear the third-party cookies as well.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/third-party-cookies.png\" alt=\"Option to clear third-party cookies\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1012337\">1012337<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ua-ch\">Edit User-Agent Client Hints for custom devices<\/h2>\n\n\n\n<p>You can now edit User-Agent Client Hints for custom devices.<\/p>\n\n\n\n<p>Go to&nbsp;<strong>Settings<\/strong>&nbsp;&gt;&nbsp;<strong>Devices<\/strong>&nbsp;and click on&nbsp;<strong>Add custom device&#8230;<\/strong>. Expand the&nbsp;<strong>User agent client hints<\/strong>&nbsp;section to edit the client hints.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/ua-ch.png\" alt=\"Edit User-Agent Client Hints\"\/><\/figure>\n\n\n\n<p>User-Agent Client Hints are an alternative to User-Agent string that enables developers to access information about a user&#8217;s browser in a privacy-preserving and ergonomic way. Learn more about User-Agent Client Hints in&nbsp;<a href=\"https:\/\/web.dev\/user-agent-client-hints\/\">web.dev\/user-agent-client-hints\/<\/a>.<\/p>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1073909\">1073909<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"network-panel\">Network panel updates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"network-log\">Persist \u201crecord network log\u201d setting<\/h3>\n\n\n\n<p>DevTools now persist the \u201cRecord network log\u201d setting. Previously, DevTools reset the user\u2019s choice whenever a page reloads.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/network-log.png\" alt=\"Record network log\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1122580\">1122580<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"webtransport\">View WebTransport connections in the Network panel<\/h3>\n\n\n\n<p>Network panel now displays WebTransport connections.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/webtransport.png\" alt=\"WebTransport connections\"\/><\/figure>\n\n\n\n<p>WebTransport is a new API offering low-latency, bidirectional, client-server messaging. Learn more about its use cases, and how to give feedback about the future of the implementation in&nbsp;<a href=\"https:\/\/web.dev\/webtransport\/\">web.dev\/webtransport\/<\/a>.<\/p>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1152290\">1152290<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"no-throttling\">\u201cOnline\u201d renamed to \u201cNo throttling\u201d<\/h3>\n\n\n\n<p>The network emulation option \u201cOnline\u201d is now renamed to \u201cNo Throttling\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/no-throttling.png\" alt=\"Record network log\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1028078\">1028078<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"copy-object\">New shortcuts to copy object in the Console and Sources panel<\/h2>\n\n\n\n<p>You can now copy object values with the new shortcuts in the Console and Sources panel. This is handy especially when you have a large object (e.g. a long array) to copy.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/copy-object-console.png\" alt=\"Copy object in the Console\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/copy-object-sources.png\" alt=\"Copy object in the Sources panel\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1149859\">1149859<\/a>,&nbsp;<a href=\"https:\/\/crbug.com\/1148353\">1148353<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frame-details\">Frame details view updates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sw\">New Service Workers information in the Frame details view<\/h3>\n\n\n\n<p>DevTools now displays dedicated service workers under the frame which creates them.<\/p>\n\n\n\n<p>In the&nbsp;<strong>Application<\/strong>&nbsp;panel, expand a frame with service workers, then select a service worker under the&nbsp;<strong>Service Workers<\/strong>&nbsp;tree to view the details.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/sw.png\" alt=\"Service Workers information in the Frame details view\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1122507\">1122507<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"measure-memory\">Measure Memory information in the Frame details view<\/h3>\n\n\n\n<p>The&nbsp;<code>performance.measureMemory()<\/code>&nbsp;API status is now displayed under the&nbsp;<strong>API availability<\/strong>&nbsp;section.<\/p>\n\n\n\n<p>The new&nbsp;<code>performance.measureMemory()<\/code>&nbsp;API estimates the memory usage of the entire web page. Learn how to monitor your web page&#8217;s total memory usage with this new API in&nbsp;<a href=\"https:\/\/web.dev\/monitor-total-page-memory-usage\">this article<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/measure-memory.png\" alt=\"Measure Memory\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1139899\">1139899<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"issues-feedback\">Provide feedback from the Issues tab<\/h2>\n\n\n\n<p>If you ever want to improve an issue message, go to the&nbsp;<strong>Issues<\/strong>&nbsp;tab from the&nbsp;<strong>Console<\/strong>&nbsp;or&nbsp;<strong>More Settings<\/strong>&nbsp;&gt;&nbsp;<strong>More tools<\/strong>&nbsp;&gt;&nbsp;<strong>Issues<\/strong>&nbsp;&gt; to open the&nbsp;<strong>Issues<\/strong>&nbsp;tab. Expand an issue message, and click on the&nbsp;<strong>Is the issue message helpful to you?<\/strong>, then you can provide feedback in the pop up.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/issues-feedback.png\" alt=\"Issue feedback link\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dropped-frames\">Dropped frames in the Performance panel<\/h2>\n\n\n\n<p>When&nbsp;<a href=\"https:\/\/developers.google.com\/chrome-devtools\/evaluate-performance\/reference#record-load\">analyzing load performance in the Performance panel<\/a>, the&nbsp;<strong>Frames<\/strong>&nbsp;section now marks dropped frames as red. Hover on it to find out the frame rate.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/dropped-frames.png\" alt=\"Dropped frames\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1075865\">1075865<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dual-screen\">Emulate foldable and dual-screen in Device Mode<\/h2>\n\n\n\n<p>You can now emulate dual-screen and foldable devices in DevTools.<\/p>\n\n\n\n<p>After&nbsp;<a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/device-mode#viewport\">enabling the Device Toolbar<\/a>, select one of these devices:&nbsp;<strong>Surface Duo<\/strong>&nbsp;or&nbsp;<strong>Samsung Galaxy Fold<\/strong>.<\/p>\n\n\n\n<p>Click on the new span icon to toggle between single-screen or folded and dual-screen or unfolded postures.<\/p>\n\n\n\n<p>You can also enable the&nbsp;<strong>Experimental Web Platform features<\/strong>&nbsp;to access the new CSS media&nbsp;<code>screen-spanning<\/code>&nbsp;feature and JavaScript&nbsp;<code>getWindowSegments<\/code>&nbsp;API. The experimental icon displays the state of the&nbsp;<strong>Experimental Web Platform features<\/strong>&nbsp;flag. The icon is highlighted when the flag is turned on. Navigate to&nbsp;<code>chrome:\/\/flags<\/code>&nbsp;and toggle the flag.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/dual-screen.png\" alt=\"Emulate dual-screen\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1054281\">1054281<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"experimental_features\">Experimental features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"record\">Automate browser testing with Puppeteer Recorder<\/h3>\n\n\n\n<p>To enable the experiment, check the&nbsp;<strong>Recorder<\/strong>&nbsp;checkbox under&nbsp;<strong>Settings<\/strong>&nbsp;&gt;&nbsp;<strong>Experiments<\/strong>.<\/p>\n\n\n\n<p>DevTools can now generate&nbsp;<a href=\"https:\/\/pptr.dev\/\">Puppeteer<\/a>&nbsp;scripts based on your interaction with the browser, making it easier for you to automate browser testing. Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over the&nbsp;<a href=\"https:\/\/chromedevtools.github.io\/devtools-protocol\/\">DevTools Protocol<\/a>.<\/p>\n\n\n\n<p>Go to&nbsp;<a href=\"https:\/\/jec.fyi\/demo\/recorder\">this demo page<\/a>. Open the&nbsp;<strong>Sources<\/strong>&nbsp;panel in DevTools. Select the&nbsp;<strong>Recording<\/strong>&nbsp;tab on the left pane. Add a new recording and name the file (e.g. test01.js).<\/p>\n\n\n\n<p>Click on the&nbsp;<strong>Record<\/strong>&nbsp;button at the bottom to start recording the interaction. Try to fill in the on-screen form. Observe that Puppeteer commands are appended to the file accordingly. Click on the&nbsp;<strong>Record<\/strong>&nbsp;button again to stop the recording.<\/p>\n\n\n\n<p>To run the script, follow the&nbsp;<a href=\"https:\/\/pptr.dev\/\">Getting started guide<\/a>&nbsp;in Puppeteer official site.<\/p>\n\n\n\n<p>Please note that this is an early-stage experiment. We plan to improve and expand the Recorder functionality over time.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/recorder.png\" alt=\"Puppeteer Recorder\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1144127\">1144127<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"font\">Font editor in the Styles pane<\/h3>\n\n\n\n<p>To enable the experiment, check the&nbsp;<strong>Enable new Font Editor tools within Styles pane<\/strong>&nbsp;checkbox under&nbsp;<strong>Settings<\/strong>&nbsp;&gt;&nbsp;<strong>Experiments<\/strong>.<\/p>\n\n\n\n<p>The new Font Editor is a popover editor in the&nbsp;<strong>Styles pane<\/strong>&nbsp;for font related properties to help you find the perfect typography for your webpage.<\/p>\n\n\n\n<p>The popover provides a clean UI to dynamically manipulate typography with a series of intuitive input types.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/font.png\" alt=\"Font editor in the Styles pane\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1093229\">1093229<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"flexbox\">CSS flexbox debugging tools<\/h3>\n\n\n\n<p>To enable the experiment, check the&nbsp;<strong>Enable CSS Flexbox debugging features<\/strong>&nbsp;checkbox under&nbsp;<strong>Settings<\/strong>&nbsp;&gt;&nbsp;<strong>Experiments<\/strong>.<\/p>\n\n\n\n<p>DevTools added experimental support for&nbsp;<a href=\"https:\/\/developers.google.com\/web\/updates\/2020\/11\/devtools#flexbox\">flexbox debugging since last release<\/a>.<\/p>\n\n\n\n<p>DevTools now draws a guiding line to help you better visualize the CSS&nbsp;<code>align-items<\/code>&nbsp;property. The CSS&nbsp;<code>gap<\/code>&nbsp;property is supported as well. In our example here, we have CSS&nbsp;<code>gap: 12px;<\/code>. Notice the hatching pattern for each gap.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/flexbox.png\" alt=\"flexbox\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1139949\">1139949<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"csp\">New CSP Violations tab<\/h3>\n\n\n\n<p>To enable the experiment, check the&nbsp;<strong>Show CSP Violations view<\/strong>&nbsp;checkbox under&nbsp;<strong>Settings<\/strong>&nbsp;&gt;&nbsp;<strong>Experiments<\/strong>.<\/p>\n\n\n\n<p>View all Content Security Policy (CSP) violations at a glance in the new&nbsp;<strong>CSP Violations<\/strong>&nbsp;tab. This new tab is an experiment that should make it easier to work with web pages with a large amount of CSP and Trusted Type violations.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/csp.png\" alt=\"CSP Violations tab\"\/><\/figure>\n\n\n\n<p>Chromium issues:&nbsp;<a href=\"https:\/\/crbug.com\/1137837\">1137837<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"apca\">New color contrast calculation &#8211; Advanced Perceptual Contrast Algorithm (APCA)<\/h3>\n\n\n\n<p>To enable the experiment, check the&nbsp;<strong>Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA\/AAA guidelines<\/strong>&nbsp;checkbox under&nbsp;<strong>Settings<\/strong>&nbsp;&gt;&nbsp;<strong>Experiments<\/strong>.<\/p>\n\n\n\n<p>The&nbsp;<a href=\"https:\/\/w3c.github.io\/silver\/guidelines\/methods\/Method-font-characteristic-contrast.html\">Advanced Perceptual Contrast Algorithm (APCA)<\/a>&nbsp;is replacing the&nbsp;<a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-minimum\">AA<\/a>\/<a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-enhanced\">AAA<\/a>&nbsp;guidelines contrast ratio in the&nbsp;<a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/accessibility\/reference#contrast\">Color Picker<\/a>.<\/p>\n\n\n\n<p>APCA is a new way to compute contrast based on modern research on color perception. Compared to AA\/AAA guidelines, APCA is more context-dependent. The contrast is calculated based on the text\u2019s spatial properties (font weight &amp; size), color (perceived lightness difference between text and background), and context (ambient light, surroundings, intended purpose of the text).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/web\/updates\/images\/2021\/01\/devtools\/apca.png\" alt=\"APCA in Color Picker\"\/><\/figure>\n\n\n\n<p>Chromium issue:&nbsp;<a href=\"https:\/\/crbug.com\/1121900\">1121900<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Published at: https:\/\/developers.google.com\/web\/updates\/2021\/01\/devtools Author: Jecelyn\u00a0Yeen Debugging support for Trusted Types violations Breakpoint on Trusted Type violations You can now set breakpoints and catch exceptions on Trusted Type Violations in the&nbsp;Sources&nbsp;panel&#8230;. <a class=\"read-more-link\" href=\"https:\/\/tbekk.com\/devstream\/blog\/2021\/01\/19\/whats-new-in-devtools-chrome-89\/\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,62],"tags":[60,63],"class_list":["post-404","post","type-post","status-publish","format-standard","hentry","category-news","category-webdev","tag-chrome-89","tag-devtools"],"_links":{"self":[{"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/posts\/404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/comments?post=404"}],"version-history":[{"count":2,"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/posts\/404\/revisions"}],"predecessor-version":[{"id":418,"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/posts\/404\/revisions\/418"}],"wp:attachment":[{"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/media?parent=404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/categories?post=404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tbekk.com\/devstream\/wp-json\/wp\/v2\/tags?post=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}