5 (More) Useful Chrome DevTools Tips for Developers

By . in Web Design. Updated on .

Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome Developer Tools). In a previous post, we showed you a few basic tips on using DevTools like changing the User Agent string, CSS Editing, Changing color format, and moving the DOM.

As Google continuously adds new features to DevTools, we have decided to showcase 5 more features in DevTools that could help you develop your website more efficiently.

Recommended Reading: Useful Google Chrome Extensions For Web Designers

1. Tidy-up JavaScript

Minifying JavaScript is a good way to reduce file size and improve a website’s load time. However, a minified code is very difficult to read and debug. If you have this problem, you can use the PrettyPrint feature in DevTools to "un-minify" the JavaScript.

Go to the Sources panel in DevTools, and you will find an array of icons at the bottom left (screenshot).

icons

Select the minified JavaScript source, and then click on the curly bracket icon, {} from the array of icons (screenshot).

unminified

And as you can see from the screenshot above, the JavaScript is now tidier and more readable.

2. Snippets

By taking advantage of frequently used codes, Code Snippets can save you a lot of time and significantly speed up the debugging process.

First, go to Sources > Snippets (subpanel). Then, right-click and select New to create a new snippet, type in a code that you frequently use and save it.

new snippets

To insert a snippet, just open one of your source codes – it could be HTML, CSS or JS. Then, drag and drop the snippet into the source code (screenshot).

drag snippets

3. Override Geolocation

In a previous tutorial, we showed you how to retrieve user location using HTML5 Geolocation. When developing a website or an application where you incorporate HTML5 Geolocation, you might want to display a location other than your own. With DevTools, you can do that quite easily.

First, you need to find out the longitude and latitude coordinates of the desired location with this tool.

  1. Then, go to Settings > Override.
  2. Check / Tick the Override Geolocation option.
  3. Enter the longitude and latitude coordinates.
geolocation

Now, refresh the page and you should see the location based on the coordinates you have entered (screenshots).

maps

4. Performance Audit

Your visitors or customers will likely leave your website if it loads terribly slowly. To measure your website’s performance using Google Chrome, you can go to the Audits panel in DevTools, and hit the Run button (screenshot).

audit

It will generate a report showing you which part(s) of your website should be optimized (screenshot).

report

5. Copy the Text Document

With DevTools, you can also copy content from a web page. This could be useful when you need some real content to test your website instead of the conventional Lorem Ipsum. To do that, just go to the Console panel and run the following command.

copy(document.getElementById('content').innerText)

The command assumes that the content is nested under the element with the ID of content. Depending on the web page, the ID may vary. So, before running this command, copy(), you need to figure out where the content (that you intend to copy) is being nested.

After running this command, the content will be immediately saved to the clipboard, so you can simply paste it into your document.

copy content

As always, we hope that you found these tips useful. If you have any other good tips what we have missed out in this post, please feel free to let us know in the comments below.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail