Inspect Element

Using Inspect Element will help speed up debugging issues as well as writing style modifications to an existing layout before writing and saving them into your project. All modern desktop browsers include an inspect element feature. For mobile this is more tricky to do directly on a real device but there is a feature in Chrome to visually test at different breakpoints and viewport simulation.

We tend to use both Chrome and Firefox inspect element features. Both have advantages, for example, we tend to find it easier to find out about cookies on a website on Firefox vs. Chrome.

Browser inspect window

When using Inspect Element make use of the performance and memory features to analyse the page load and highlight any unnecessarily large assets or scripts that could be compressed/minified further.

Network tab

Typically, the network tab is most helpful for seeing what is happening behind the scenes. You may use this to see:

Console debugging

The console tab is an incredibly useful tool to see whether there are any errors or warnings on the page you are visiting. These are not immediately visible to the end user but may explain whether some functionality is not working.

The console tab is also very helpful for quickly identifying 404s and other similar server errors.