DevTools of Google chrome is very popular among web developers since it is coming with many useful features for web debugging. You will see 5 useful things of DevTools that will help you while you are developing and testing your web projects.

1. Interactive Console

Console can be used to execute Javascript directly for the rendered DOM manipulation or just to execute some user desired code snippet. Also you can use the console to execute Javascript macros for special automated tasks (I.e – triggering click event for many buttons automatically)

2. Console Sidebar

Console Sidebar shows all messages related to current page. A message can take several faces like warning, error and information. You can filter those messages using the sidebar. For an instance if you wish to see all messages just click “verbose” label.

3. Cookie Manager

Go to “Application” tab and click “Cookies” tree node and then select specific domain to see list of cookies. Specially you also can modify those cookies. This option is very useful when you are debugging an application that generates user cookies.

Useful details for each cookie

  • Name and Value
  • Expiry time
  • Domain
  • Security Status (HTTP or HTTPS)

4. Device Preview

DevTools offers a feature to test your responsive pages with inbuilt mobile web rendering simulator. It enables you to select preferred mobile devices and also you are able to change device type (Low end or High end).

Moreover it gives useful screen options

  • Landscape
    • With/Without Navigation Bar
    • With Keyboard
  • Portrait
    • With/Without Navigation Bar
    • With Keyboard

5. Web Page Audit

This is having tests for progressive web apps (PWA), performance, accessibility, and best practices. Eventually this tool gives you scores for several categories. Further If you expand one test stream you will see set of subtests with some guidelines and additional information.

Few tests under “best practices” stream

  • Avoids document.write()
  • Avoids Requesting The Notification Permission On Page Load

Chrome DevTools offers so many powerful features like AJAX request monitor, DOM inspector etc. We will meet in future DevTools article with another top 5 useful features.

Happy debugging!