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