Using Chrome Developer Tools

Tuesday, December 06, 2016 by Richard Howe

Using Chrome Developer ToolsWhether you’re a web developer or a website owner, being able to quickly and easily view, edit and debug your website is essential. One way to do this is with a tool built right into your browser - Chrome’s own Developer Tools. In this blog post, we will take an introductory look at what these tools do and how you can use them to monitor and improve your site.

If you haven’t made much use of Chrome’s Developer Tools yet, simply open up your website in Chrome, right-click on any element and choose "Inspect Element". You’ll find that a new window opens are the bottom of the page and that there are several tabs across the top: elements, network, sources, timeline, profiles, resources, audits and console. Let’s take a look at each of these in turn.


This is the area in which you can see your main HTML coding. Because it is syntax-highlighted and an indented hierarchically, it is easier to read than some sources and will show you exactly how each page looks to the browser itself. You can edit and save any changes directly to this window if you like (and also go back and undo any unwanted changes you just made!).

On the right-hand side within the elements window, you’ll notice the CSS style panel, which will show you the styling that’s been applied to any given element. Particularly useful here is the ability to quickly change font sizes, colours, margin and padding, and a whole array of other effects directly on the screen.


Useful for providing information on load speed time, the ‘network’ area itemises and shows on a timeline each element that has been loaded on the current page, including the size and type of file. A useful shortcut here is to click on any heading to order the information. For example, clicking on ‘time’ will allow you to see at a glance which elements have taken the longest to download.


This panel shows where scripts and snippets are sourced from and allows you to debug JavaScript using a graphical interface where you can pause, continue, step over/in/out, use breakpoints and so on. It is intended to give an overview of all scripts that are part of the inspected page.


The timeline shows the length of time it takes for each element on a particular page to load, script and render. You can start and stop recording, before analysing the results using the profile tab.


This tab shows how much memory each element uses and which functions take the longest time to run. There are three tools within this section: 1) JavaScript CPU profile, 2) CSS selector profile and 3) Heap profile (used to uncover any memory leaks in your applications). Together, these will give you all the information you’ll need to isolate any problems and optimise the site.


This area helps to optimise site performance, decreasing page load time and therefore scoring more brownie points from the main search engines. Here you can see which resources are required by the browser to load the page, the time it takes to receive these requests, the order in which they fire-off and how much bandwidth is being taken up.


Of particular use here is the ‘audit present state’ tool, which gives a list of items that need attention. These are colour-coded, with the most urgent items in red. Advice on how to fix the problems is also included. Information includes order and styles of scripts, CSS, naming, caching, JavaScript, cookie size, image dimensions and so on.


This section logs diagnostic information and allows for testing of pages and apps. As well as being able to write to the console, here you can create JavaScript profiles and open a debug screen to isolate and fix errors.

Device emulation mode

Google Developer Tools is not only useful for desktop sites but for mobile and responsive websites too. By clicking the button between the magnifying glass and the ‘Elements’ tab, you will be able to open up “device emulation mode” to view the site as it would be seen on Apple, Samsung, Google, Nokia and Kindle devices. Simply select the device required from the dropdown list. You can also select various network options and view in portrait or landscape mode.

Google Developer Tools are a really useful, free method of giving an overview of your site’s performance. Since they’re already built-in to Chrome, the tools an be used to make quick, temporary changes to your site when necessary or play about with layout, colour or font choices without even leaving the browser. With the ability to analyse site performance, eliminate errors, view on multiple devices and make live edits, it’s a powerful toolbox and is easy for both developers and site owners to use. If you haven’t tried it, go ahead. Before you know it you’ll wonder how you managed without it.

Your comments

Richa Gangwani
Nice, I found it helpful and interesting.

Post a Comment

Captcha Image

Request a callback

Filter by category

Post archive

When I began my first start-up adventure, I knew that building a full-featured e-commerce site would be challenging, but Richard made it feel easy!

First and foremost, Richard is a talented designer, who was able to hear my vision for my site and then make it a zillion times better. I could not be happier with the site, which is beautiful, clean, user-friendly and professional.
While his design skills are superb, I will hire Richard again and again because he is an excellent partner.

As a non-technical solopreneur, I needed a designer who could work with - and manage - me. He is an excellent communicator, who made sure I understood and could anticipate what was needed from me at each stage of the building process. He is also a patient and willing teacher.

Thank you, Richard! I could not have done it without you.

What's next?

Get in touch with us today on 01865 522525 and let's kick-start your project.

Colour Rich custom website design

11 reasons why email marketing matters

Wednesday, September 25, 2019

11 reasons why email marketing mattersIf you think that e-mail marketing has become a dated marketing tool, you’re not alone. But whilst technology and web marketing in general may have evolved enormously, some of the old standards are just as relevant.  Read more

© Copyright Colour Rich. Privacy