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