🧠 Knowledge Series #4: How to use browser developer tools
Practical ways use your browser
🔒The Knowledge Series is a series of easy to read guides designed to help you plug the gaps in your tech knowledge so that you feel more confident when chatting to colleagues. Clearly explained in plain English. One topic at a time.
If you’re a free subscriber and you’d like to upgrade to receive them you can do so below. Or you can find out more about paid access here.
Hi product people 👋,
Rich from the Department of Product here! If you’re new here, welcome. The Knowledge Series is an exclusive newsletter for DOP’s paid subscribers where we focus on one topic at a time to help you add new skills - and knowledge - to your professional toolkit so that you can have more informed conversations with your colleagues and broaden your skill set.
Coming up in this edition, we’ll explore an area that often confuses non-technical tech professionals: browser developer tools. And more importantly, we’ll delve into some of the ways you can practically use browser developer tools in your day to day role.
Note: For the purposes of this post, we’re going to use a Chromium based browser to help illustrate our examples so if you’re not using a Chromium based browser (Chrome, Edge, Brave and more), then grab a copy of one so that you can follow along.
What are browser developer tools?
Every browser comes with a bunch of native tools that developers can use to help them when they’re building products.
When you first open up developer tools it can look a little overwhelming. The Chromium toolbar includes various sections which allow developers to do a whole bunch of different things.
Here’s a simple breakdown of the functionality included in modern browser developer tools with a quick explanation of what each part does:
🧩 Elements - front end tool for changing HTML elements and CSS
💻 Console - a console that runs javascript so that you can debug errors or run custom scripts
🧑💻 Sources - the Sources tab provides a code-level view of the web page or application's source code.
📠 Network - the Network tab displays detailed information about all the network requests made by the web page or application. The web is built upon the request / response model and developers can use this to assess requests and responses and response times.
🏃♀️Performance - performance is used to analyse the performance of a web page or application. It allows developers to record and analyse timelines of various browser events, such as page load, script execution, rendering, and more. Useful if your product is experiencing performance issues.
🧠 Memory - provides insights into the memory usage of a web page or application. It helps developers identify memory leaks and excessive memory consumption, which can lead to slow performance or crashes.
💽 Application - allows developers to inspect and manage various aspects related to application storage and data. It provides access to browser features like Local Storage, Session Storage, IndexedDB, and Cookies.
🔐 Security - focused on providing information about the security aspects of a website or web application. It shows details about SSL certificates, secure and insecure content loaded on the page, and any potential security issues like mixed content warnings
Some of these are more interesting than others so we’re not going to focus on all of them, instead we’re going to approach the most useful ones from a use-case perspective instead with some examples of how you can use them in your day to day role.