Open your browser's developer tools (devtools)

Development tools (or DevTools) are extensions built into browsers that let you explore, test, and fix a website's code.

Whether you're a beginner or experienced, they are essential for debugging effectively.

What are they for?

Each browser has its own set of tools, in the form of tabs. Each tab lets you view/analyze/modify a specific part of a site or web application:

• Inspector: Lets you view and modify HTML/CSS live.
• Console: Displays JavaScript errors and lets you interact with the page in JS.
• Network: Lists all loaded files (scripts, images, requests, etc.) and their response times.
• Sources: Gives access to JS files with debugging tools.
• Application: For inspecting cookies, local storage, caches...
• Performance: For analyzing loading speed, resource consumption, etc.

Application is sometimes named "Storage" and Performance can also be found under the name "Memory"

Opening the devtools

To open the development tools, there are easy-to-use keyboard shortcuts, which are almost identical across the different browsers:

Google Chrome (and Chromium-based browsers)

On Windows and Linux: Ctrl + Shift + I or F12

On MacOS: Cmd + Option + I

You can also open the tools via the main menu > More tools > Developer tools!

These shortcuts therefore also work for Edge, Brave, Arc, and Opera

Firefox

On Windows and Linux: Ctrl + Shift + I or F12

On MacOS: Cmd + Option + I

You can also open the tools via the main menu (☰) > Developer tools!

Safari

On MacOS: Cmd + Option + I

On Windows and Linux: If you're trying to open Safari on Windows, I'd suggest going for a little nap, you must be tired!

Otherwise, you can open it via the Develop menu > Show Web Inspector

Remember to enable the Develop menu: Safari > Settings > Advanced > check Show Develop menu