Skip to content

Simple tips to test a website and potential changes using Chrome DevTools

  • How to
Reading Time: 8 minutes

Even if you don’t know how to code.

Edit 30/10/20: This post has been reviewed as the Chrome DevTools have changed since the initial blog post – so some of the instructions had to be changed.

screenshot of the audit functionality of the Chrome Devtools in dark mode

DevTools are initially for developers but you can do lots of quick tests and changes with it. Even if you don’t know how to code. Don’t worry, you won’t break anything.

This is something I often use to do some quick changes to a page, then take a screenshot of it to support the discussion for a change request.

I’ll explain for beginners how to

  • see how a page looks on a mobile or tablet (using your desktop or laptop)
  • remove an element of the page (this is not a permanent deletion)
  • edit the text on the page (and make a fake news)
  • make a quick automatic audit of the website (accessibility, best practices, performance)
  • experience a website with slow internet or offline
  • clear the cache

If you know a bit of HTML and CSS, I will give you an extra tip to change the colour of a text or a background

To access Chrome DevTools

On your desktop or laptop, using Google Chrome, click right anywhere on the page and select: ‘Inspect’

right click menu window with Inspect being one of the list items

Normally, this will open the dock in a column on the right of your screen. You can change this if you want to have it on the left or at the bottom of the screen, using the 3 vertical dots menus and changing the Dock side

showing the menu for the dock side

Check how a website looks on a phone or a tablet

To see how responsive a website is = how does the layout and components look on different screen sizes.

Using Amazon as an example. Select the 2nd icon from the top left menu:

showing where the icon is on screen

Click on Responsive and select a device in the list:

show the menu under 'Responsive' and the list of devices you can simulate

Here is how it looks as an iPhoneX

how the screen looks on an iPhoneX in portrait view

You can switch from portrait to landscape mode, just as if you were turning your phone using the icon at the top right on the screenshot

how the screen looks on an iPhoneX in landscape view

If you can’t find a specific device you want in the list in the Responsive menu, select Edit and add it.

Remove an element on the page

Using BBC News for this. What you see in the dock on the right is the HTML code of the page you have on screen. We are going to change it.

Note: This will only change what you see on your screen. If you refresh your page, it will go back to what it was before your changes.

Don’t worry if you don’t know HTML. If you do, then it’s easier to select what you want to remove.

screenshot of the BBC News top menu
https://www.bbc.co.uk/news

Let’s say you really don’t want to hear about the elections anymore

You can remove this item in the menu:

  • click right on the text ‘Election 2019’ in the menu
  • select Inspect
  • this will highlight the code for it in the dock in light blue
  • right click in the element highlighted in the dock, this will open a menu
  • select ‘Delete element’
screenshot showing both the screen and the dock
After selecting Inspect, you should see the element with a light blue background in the dock on the right
screenshot showing both the screen and the dock and the menu to remove the element
right click on the highlighted element menu will open the menu
BBC news menu without the Elections item
No more Elections item in the menu

We can declutter the Amazon top menu the same way

Amazon top menu with a lot of elements on many levels
www.amazon.co.uk — before
top menu after deleting lots of elements
After

Editing the text on the page

This will only change the text on the page on your device. We are not ‘hacking’ the website for everyone to see. As soon as you refresh the page, your changes will be gone.

Let’s make some fake news

Starting with the page below

BBC article about the Great British Bake Off
https://www.bbc.co.uk/news/entertainment-arts-50220583

Right click on the text you want to change, here it’s the title.

same page with the article selected and we see the code for it highlighted in the dock

Right click on the code highlighted then select Edit text.

You might not see this option, in that case, select ‘Edit as HTML’, more on this below.

dock with the menu open where we can see Edit Text

Make the text what ever you want it to be.

changing the text to: Stéphanie wins the Great British Bake Off

And Voilà!

now the page show the new title

Now let’s use that to make some changes to a website page

We can improve the top menu of this website

the top menu is on two lines as it is too long
https://www.coastword.co.uk/blog

Make the menu items all on one single line by removing ‘Coastword 2019 -’ using the instructions to edit the text in the section above for each item in the menu.

It looks better no?

all the menu items are now on one line

You might not have an ‘Edit text’ option

Not every elements have an ‘Edit Text’ option. You might have to chose: ‘Edit as HTML’ instead.

For example, if you are editing the green button on this page:

apply for a passport page, as a green button with the text 'Continue'
https://www.passport.service.gov.uk/filter/overseas

Right click on the button to see the code for it in the dock highlighted. Then right click on highlighted code and select Edit as HTML.

screenshot of the dock once you have right clicked showing the menu

A window opens for you to edit the text of this element.

show the code and the page at the same time

Now change the text for the button, then click anywhere outside the window you were in to edit the text. Your new text will be visible on the button on the page and in the code in the dock.

showing both the updated button and the code in the dock

Using the Audit functionality to test a website

This will give you an indication of how good a website page is. It’s not perfect, but can help spot some problems. Like any automatic testing tool, this is only a quick audit and won’t reveal all the problems. A good score, especially for accessibility doesn’t mean you’re doing great.

Using Amazon again, in the top menu in the dock, select Audits.

Edit 30/10/20: It’s not called Audits anymore but ‘Lighthouse’ now

showing where the functionality is in the menu

You will have different options:

  • select a device: Mobile or Desktop
  • check as many as you want between Performance, Progressive Web App, Best practices, Accessibility, and SEO (Search Engine Optimisation)
  • select the simulation for the speed of the internet connection (simulated throttling) if checked, it will generate the report when your page is loaded for someone with a slow internet connection
  • generate the report
screenshot of the dock showing the Lighthouse menu just before it's launched
This is the selection to generate a report for desktop, looking at the performance, best practices, accessibility and SEO with simulate throttling

Running the audit for Amazon.co.uk, here is the result

Pretty poor for the performance, but the other two are ok. Again this doesn’t mean it is that good accessibility wise, but based on the set of criteria automatically checked by the audit, it’s a really good score.

Do remember it’s only for that page, not the whole website. Here, I was testing the homepage.

You can check the details of the audit if you scroll and you can do another one (for mobile this time for example), if you want by clicking on the + at the left of the Amazon url under the menu in the dock.

results of the audit showing the scores in each category as a percentage in a circle and the details for the performance category

Simulating slow connection or offline

You can also try to experience using a website with a slow connection or even offline. This is a good test to see how difficult and frustrating some websites can be if you have a slow connection.

In the dock menu, select Network.

dock menu

And then, in the row below, select Online and in the list, select fast 3G, or slow 3G, or offline.

showing the various options in the menu

If the web app you are testing is a Progressive Web App (PWA), it could be working when you simulate being offline.

You can try the game 2048 for example:

game shown on the left side while the doc show it's a simulation of being offline
2048game.com

If you are interested in PWA, here are some for you:

Progressive Web Apps

Practical tip to clear the cache

When the Chrome DevTools are open on your page, there is a quick way to clear the cache for that page, click on the reload icon in the browser menu and hold. This will open a list of options. Select Empty cache and hard reload to clear the cache.

menu for reload with various options

If you know a bit of HTML and CSS, an extra tip

You can change the colours of some elements, the background of the text for example. Right click on them and look under the style menu.

For example, changing the colour of the News banner for the BBC

Right click on it and you will see the following code in the dock under Styles.

BBC banner and dock on the right with the code for the background colour
showing the code closer
the box with the background colour is where you will do the changes

Hover on the 3 dots menu, for the background colour and you will see icons to add a shadow to the text, or the box, or change the colour of the text or of the background.

4 little icons appear

The banner is not just one block, so you will have to find all the little parts to change all of them to pink for example:

showing the same top banner but now all pink instead of the initial BBC red.

Firefox and Safari too

You can find similar functionalities in other browsers. By right clicking on the page, you will access the Inspect menu.

One example for Firefox

inspect dock for Firefox