Copy element styles

To Copy the Styles of DOM elements to the clipboard, right-click a node in the DOM tree after opening the developer tools and select Copy -> Copy Styles.

Visual layout transformation

This feature may cause the screen to flicker a lot and may not be suitable for you if you are prone to relapsing photosensitive epilepsy.

Let’s say we’re reading a news article on our favorite website. As we read the page, we notice that the position of the content changes and jumps constantly. This is called layout shifting. It usually happens when images and ads finish loading. The page does not reserve any space for images or ads, so the browser must move all other content down to make room for them. The solution to this situation is to use placeholders.

Now developer tools can help us detect layout changes (see issue#961846) :

Check the Layout Shift Regions option in the Rendering menu to detect Layout changes when the page interacts, and the Layout changes are highlighted in blue.

How do I open the menu barRenderingAnd check theLayout Shift Regions?

  • Methods a
  1. Open the command menu (MAC OSX shortcut: Alt + P, Windows shortcut: CTRL + P)
  2. typeRendering
  3. performShow RenderingThe command
  4. Check theLayout Shift Regions
  • Way 2
  1. Click on the menu bar entry in the upper right corner of the Developer tool

  1. choosemore tools -> Rendering
  2. Check theLayout Shift Regions

The Audits panel runs Light version 5.1

This update was actually released in Chrome 76. We didn’t cover it in DevTools’ new features (Chrome 76), so we’ll cover it now.

The Audits panel now runs Lighthouse 5.1. The new reviews include:

Lighthouse is an open source automation tool that analyzes Web applications and Web pages, gathering modern performance metrics and developer best practices to improve the performance and quality of Web applications.

  • Determine if PWA can be added to the iOS home screen by checking if the developer has provided a valid Apple-touch-icon icon.

  • Number of reserved requests and file size. Reports the total number of network requests and file sizes for various categories, such as documents, scripts, style sheets, images, etc.

  • Maximum potential First Input Delay (FID) duration. A measure of the maximum potential time between a user’s home page interaction and the browser’s response to that interaction is simply the maximum time between the user’s first interaction with the site (that is, clicking a link, clicking a button, or using a custom javascript-driven control) and the time the browser can actually respond.

Open the keyboard shortcut for the breakpoint editor

Open the Breakpoint Editor by pressing Control + Alt + B or Command + Option + B (Mac) with mouse focus in the editor in the Developer Tools Sources panel. The breakpoint editor is then used to create log breakpoints and conditional breakpoints.

Network panel precaching

When a resource is loaded from prefetch cache, the Size column in the Network panel will show (Prefetch Cache). Prefetch, or pre-fetch, is a new Web feature used to speed up the loading of subsequent pages.

Prefetch is about telling the browser what resources will be used for a future jump or user interaction, for example, indicating that the user may need a resource later if he or she does what we expect. These resources are extracted with Lowest priority in Chrome when the current page is loaded and bandwidth is available. This means that Prefetch is best suited to preempt and prepare for what the user might do next, such as retrieving the details page of the first product in the results list or retrieving the next page of paging content.

Can I Use… As of July 2019, it is supported in 83.33% of browsers worldwide.

Here’s a Prefetch Demo

View the private properties of the object

The Console panel can now display the private class properties of its objects.

The old version of Chrome on the left does not display the #color field when examining objects, while the new version on the right shows the #color field.

Notifications and message pushes in the Application panel

The Background Services section of the Application panel now supports “Notifications” and “Push Messaging.”

It appears in Push Messaging when the server sends a message to the service worker, and in Notifications when the service worker or page script pushes a message to the user.

As with Background Fetch and Background Sync in Chrome 76 features, once you start recording, Push Messages and Notifications on this page are logged for 3 days even if the page is closed, even if Chrome is closed.

Download Chrome Canary as your default browser development version, which provides you with the latest DevTools features.

If there is a translation error, please correct, thank you!