Not sure about your current version? You can check by clicking the hamburger icon (the three lines) in the top right-hand corner and then choosing About Google Chrome from the menu. This means you don't need a third-party extension to get this feature.įor now, the mute button feature is only available in Chrome Dev or Chrome Canary builds. However, as points out, Chrome has added a developer feature that will let you mute tabs natively. Tweet at Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.Ī list of everything that has been covered in the What's New In DevTools series.I recently covered an extension that will automatically mute background tabs in Chrome, keeping them from distracting and annoying you.Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.Submit a suggestion or feedback to us via.Use the following options to discuss the new features and changes in the post, or anything else related to DevTools. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do! # Getting in touch with the Chrome DevTools team ( 1294422)Ĭonsider using the Chrome Canary, Dev or Beta as your default development browser. Previously, the position was not restored correctly causing inconvenience in debugging. The Sources panel now restores scroll position correctly on page load.Previously, the Sources panel displays minified scope variable names despite sourcemap being provided. The Sources panel now correctly displays scope variable names when debugging with sourcemap.You can now save snippet as a JavaScript file directly.All iPhone versions after 5 have a user-agent string with iPhone OS 13_2_3. Updated iPhone user agent strings for emulated devices.These are some noteworthy fixes in this release: The new 'Partially presented frames' aims to indicate more intuitively that although some content is not presented timely in the frame, but the issue is not so severe as to block visual updates altogether.Ĭhromium issue: 1261130 # Miscellaneous highlights This leads to user confusion because the screenshots of these “Dropped frames” are still reflecting visual updates. scrolling) driven by the compositor thread. However, there are cases where some frames may still produce visual updates (e.g.

Previously, the Frames timeline visualizes any frames with delayed main-thread work as 'dropped frames'. Performance recording now displays a new frame category 'Partially presented frames' in the Frames timeline. Previously, it only showed the function name and a link to its location in the source code.Ĭhromium issue: 1049947 # Partially presented frames in the Performance panel You can now hover over a class or function in the Sources panel during debugging to preview its properties.

# Preview class/function properties on hover You can now rename a recording in the Recorder panel with the edit button (pencil icon) next to the recording’s title. Fill in an email address and observe the selector value ( ).

start a new recording and enter the data-automate as the selector attribute. You can customize the selector of a recording if you are not using the common selectors.įor example, this demo page uses the data-automate attribute as the selector. Since the email element has data-testid defined, it’s used as the selector automatically instead of the id or class attributes. Fill in an email address and observe the selector value. The attributes above are common selectors used in test automation.įor example, start a new recording with this demo page. When determining an unique selector during recording, the Recorder panel now automatically prefers elements with the following attributes: Click on the rule’s declaration to edit it.Ĭhromium issues: 1222574, 1222573 # Recorder panel improvements # Support common selectors by default Open this demo page, inspect the element, view the at-rules in the Styles pane. These changes make it easier to experiment with the at-rules in real time. You can now view and edit the CSS at-rules in the Styles pane. # View and edit at rules in the Styles pane Take a moment to click around in the What’s New tab to celebrate the milestones.Īs usual, you can watch the latest What’s New in DevTools video by clicking on the image. Here’s to the 100th Chrome version! Chrome DevTools will continue to provide reliable tools for developers to build on the web.

Chrome canary vs. chrome dev