Google Chrome DevTools: Lesser-known tools for developers

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.

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:

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:

Sources

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

In the Dev Tools, select the Sources panel and then select the script that you wish to convert.
Next, press the Pretty print button {} from the bottom of the DevTools window, as shown in Figure E:
Your minified script is now ready to view or print in a readable format as shown in Figure F:

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:

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:

TechRepublic Premium editorial calendar: IT policies, checklists, toolkits and research for download

TechRepublic Premium content helps you solve your toughest IT issues and jump-start your career or next project.

Payroll

The Best Human Resources Payroll Software of 2023

With a lot of choices in the market, we have highlighted the top six HR and payroll software options for 2023.

A computer running Windows 11. — Image: Microsoft.

Software

Windows 11 update brings Bing Chat into the taskbar

Microsoft's latest Windows 11 allows enterprises to control some of these new features, which also include Notepad, iPhone and Android news.

A software engineer works from home. — Image: tanatat/Adobe Stock

CXO

Tech jobs: No rush back to the office for software developers as salaries reach $180,000

Salaries for remote roles in software development were higher than location-bound jobs in 2022, Hired finds.

Project management process to manage and develop with resources to deliver quality product, agile development cycle, businessman project manager balance on clock juggling project management elements. — Image: Nuthawut/Adobe Stock

Software

The 10 best agile project management software for 2023

With so many agile project management software tools available, it can be overwhelming to find the best fit for you. We've compiled a list of 10 tools you can use to take advantage of agile within your organization.

A user typing a password. — Image: Song_about_summer/Adobe Stock

Security

1Password is looking to a password-free future. Here’s why

With phishing-based credentials theft on the rise, 1Password CPO Steve Won explains why the endgame is to 'eliminate’ passwords entirely.

PURPOSE This policy describes the organization’s employee privacy guidelines and outlines employee privacy expectations. From the policy: POLICY DETAILS The organization’s IT equipment, services and systems are intended for business use only. However, the organization acknowledges that staff, consultants and volunteers occasionally require opportunities to make or receive personal phone calls, access personal email, utilize ...

PURPOSE The purpose of this Security Response Policy from TechRepublic Premium is to outline the security incident response processes which must be followed. This policy will assist to identify and resolve information security incidents quickly and effectively, thus minimizing their business impact and reducing the risk of similar incidents recurring. It includes requirements for both ...

PURPOSE This policy from TechRepublic Premium provides guidelines for reliable and secure backups of end user data. It outlines the responsibilities of IT departments and employees to identify tasks and action items for each group. The policy can be customized to fit the needs of your organization. From the policy: IT STAFF RESPONSIBILITIES IT staff ...

Google Chrome DevTools: Lesser-known tools for developers