Web Development

Google Chrome DevTools: Lesser-known tools for developers

You'll find some lesser-known, but very useful, developer tools in the Tips and Tricks collection for Chrome DevTools.

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.

Console

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.

07162013Figure-B.gif

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:

07162013Figure-C.gif

Timeline

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:

07162013Figure-D.gif

Sources

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:

    07162013Figure-E.gif

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

Settings

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:

07162013Figure-G.gif

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

07162013Figure-H.gif

Other resources

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



About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks