Google Chrome DevTools is part of the Google Developers products and includes many powerful tools. The Google Developers Chrome DevTools Tips and Tricks section includes some of the lesser-known tools, organized into the nine topics which include Console, Timeline, Profiles, Sources, Elements, Network, Settings, General, and Additional Tools. I will highlight a few of the tips and tricks that stand out to me, and are an asset in my Google tool kit.  The following tips are highlighted as utilized in the Google Chrome browser.


The shortcut to launch web pages in inspect-element mode uses the Ctrl + Shift + C combination (or Cmd + Shift + C combination for Mac OS). Open up the Chrome DevTools in the inspect element so you can examine the current page instantly. A sample inspect element console is displayed below in Figure B.

Become a keyboard ninja by using the Shift + ? combination to view all of the supported shortcuts in one convenient pane. The shortcuts are displayed in Figure C:


Share and analyze a Timeline with other web developers to analyze useful data about events, paint, calculating style, and more. Just use the Ctrl + E combination or Cmd + E for Mac to start and stop the timeline recording, the key combination acts as a start and stop toggle. Then you can right-click anywhere inside the timeline and select Save Timeline data… which will allow you save the JSON file to the directory of your choice, as shown in Figure D:


Pretty Print JavaScript allows you to take minified JavaScript from a web page and convert it to a more readable form.

  1. In the Dev Tools, select the Sources panel and then select the script that you wish to convert.

  2. Next, press the Pretty print button {} from the bottom of the DevTools window, as shown in Figure E:

  3. Your minified script is now ready to view or print in a readable format as shown in Figure F:


Dock-to-right for viewport debugging can be helpful for viewing pages on devices with smaller screens or view ports and is easily completed by holding on the layout switcher icon for a few moments and then selecting the top icon as shown in Figure G:

Once selected, the viewport changes as displayed in Figure H:

Other resources

Selected additional resources that highlight more of the other lessor known functionalities of the Google Chrome DevTools are included below: