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.

Elements

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.

Network

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.

Sources

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.

Timeline

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.

Profiles

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.

Resources

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.

Audits

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.

Console

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.

Trackbacks

http://www.colourrich.co.uk/BlogRetrieve.aspx?BlogID=4376&PostID=640544&A=Trackback

Post has no trackbacks.

Your comments

Richa Gangwani
Nice, I found it helpful and interesting.

Post a Comment


Captcha Image

Request a callback

Filter by category

Post archive

I had a strong vision of how I wanted my website to look and function and Richard has totally fulfilled the brief and more.

He is efficient, quick and creative and his a can-do attitude has meant that my launch has gone off without a hitch which is invaluable.

I now have a great online brand, a CMS that I can update myself easily, amazing analytics, as well as my own mail-out system that even the most computer illiterate could use.

If I get stuck Richard always gets back to my endless queries and I would recommend him to anyone.
Beauty web design

Susannah Taylor,
Get the Gloss

What's next?

Get in touch on 01993 883767 and let's kick-start your project.

Colour Rich custom website design

Emotional web design

Thursday, May 11, 2017

Using Chrome Developer ToolsAppealing to the emotions of your website users is nothing new and certainly something that marketers and branding experts will have plenty of experience and specialist knowledge of. But because the online world is becoming so saturated with content, and because first impressions count, making people feel instantly at home on your site has never been more important.  Read more

© Copyright Colour Rich. Privacy