Home » Featured » Useful Chrome DevTools Tips For Developers

Useful Chrome DevTools Tips For Developers

dk1

Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome Developer Tools).As Google continuously adds new features to DevTools, we have decided to showcase some of those features in DevTools that could help you develop your website more efficiently.

Override 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.

dk4

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

dk5

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.

dk2

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).

dk3

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).

dk6

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

dk7

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

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).

dk8

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

dk9

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.

dk0

We hope that you found these tips useful.

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top