Google Chrome 62 : What’s new in DevTools

In the previous article, I explain some new features of Chrome 62. If you want to read that article please visit this link Google Chrome 62 : New Features.

DevTools aka Developer Tools of Google Chrome is used by any front-end developer for development of web application and V8 engine play a vital role in creating Chrome as the best browser. In this article, we are discussing new features of Chrome’s DevTools. So let’s start.

Developer Tools Features : Newly Added

  1. await Operator in Console.
  2. Take screenshots of any portion of Viewport.
  3. Take screenshot of specific HTML nodes.
  4. Negative filter support in Console.
  5. queryObject()

await Operator in Console :

In the latest version of Google Chrome, Console supports the await operator. await operator is the new keyword which is included into ECMAScript 6.

The await operator is used to wait for a Promise. It can only be used inside an async function.
await operator in console of Google Chrome

Take screenshots of any portion of Viewport :

Before this release of Google Chrome, when we take a screenshot of some portion of viewport of screen there are some methods like

  1. PrintScreen the whole page then cut unwanted area.
  2. Use Snipping Tool if you used Microsoft Windows

These methods are hectic when we take numerous screenshots in the small amount of time.

In this release of Google Chrome, Google added the solution of this task and take screenshots of the webpage in three simple steps.

  1. Click Inspect or press Command+Shift+C (Mac) or Control+Shift+C (Windows, Linux) to enter Inspect Element Mode.
  2. Hold Command (Mac) or Control(Windows, Linux) and drag the mouse to select the portion of the viewport.
  3. Release the mouse and save the image in your system.

I use this feature and it’s really awesome and I can’t wait for next releases of Google Chrome.

Take screenshot of specific HTML nodes :

There is another installment of taking screenshots in screenshots workflow. In this part, we learn how to take the screenshot of the portion of the viewport by specific HTML nodes.

In this release of Google Chrome, Google added the solution of this task and take screenshots of the webpage in three simple steps.

  1. Select any HTML node or HTML nodes.
  2. Press Command + Shift +p (Mac) or Control + Shift + p (Windows or Linux ) then see the command menu on Element section.
  3. Type node and hit enter, then Chrome takes screenshot automatically and saves into your default download location.

Negative filter support in Console :

In this release of Google Chrome, developers filter out the string value by the use of the negative filter. For example, if I’m printing any string from an array of strings and filter out any string value. Then I type that value with a negative sign. Below there are two images first one is without a filter and the second one is with a negative filter.

Without negative filter
With negative filter

In the first image, we print three names from an array by the forEach function of JavaScript. Without a negative filter, all the three values are printed. But if filter out my name ‘vaibhav’ from console window simple type ‘vaibhav’ with negative(-) sign.

Note : Negative filter works on the the string value.

queryObject( ) :

Chrome 62nd version give supports to console of queryObjects( ). It returns an array. For example :

  1. queryObjects(Promise) : return all promises
  2. queryObjects(HTMLElement) : return all HTMLElement
returns an array of objects by queryObjects( )

In the above example, we create a function constructor person. By the use of this constructor, we create two objects vaibhav and sanchit respectively. then we pass function constructor as an argument in queryObject (). It returns an array of objects which is created by use of person constructor.

These are the main changes in DevTools of Chrome 62. Some of small changes in this version are:

  1. CSS Grid highlighting
  2. HAR imports in the Network panel
  3. Previewable cache resources.

If you found this helpful, please share it. Follow me for more articles on modern technologies.