I was writing another blog post about downloading images from idealista where I tell the user to inspect elements to inject some code in the Console (you shouldn’t really be injecting code that internet strangers tell you, but I know the code I’m giving isn’t nefarious, so whatever), when I realise some people don’t even know how to open the Inspect elements window. I couldn’t be bothered to write an entire article on how to it, so I was going to link to an already written blog post, but then thought “Wait a minute, let’s do some good SEO stuff, let’s link to one of my own articles explaining!”. But I still couldn’t be arsed so here’s ChatGPTs answer of how to it. (It’s correct at time of copying).

Safari

Opening the Inspection Tools:

  • Launch Safari on your Mac.
  • Go to the website or web page you want to inspect.
  • To open the developer tools, you can use one of the following methods:
    • Press the keyboard shortcut: Option + Command + I.
    • Go to “Develop” in the menu bar and selecting “Show Web Inspector.”
    • Go to “Safari” in the menu bar and select “Settings.”
    • In the Preferences window, click on the “Advanced” tab.
    • Check the box that says “Show Develop menu in menu bar.”

Once the Develop menu is enabled, you can access the developer tools by going to “Develop” in the menu bar and selecting “Show Web Inspector.”

Google Chrome

Opening the Inspection Tools:

  • Launch Google Chrome on your computer.
  • Navigate to the website or web page you want to inspect.
  • To open the developer tools, you can use one of the following methods:
    • Press the keyboard shortcut: Option + Command + I (Mac) or Ctrl + Shift + I (Windows/Linux).
    • Right-click anywhere on the web page and select “Inspect” from the context menu.
    • Go to “View” in the menu bar, hover over “Developer,” and select “Developer Tools.”

Mozilla Firefox

Opening the Inspection Tools:

  • Launch Mozilla Firefox on your computer.
  • Visit the website or web page you want to inspect.
  • To open the developer tools, you can use one of the following methods:
    • Press the keyboard shortcut: Option + Command + I (Mac) or Ctrl + Shift + I (Windows/Linux).
    • Right-click anywhere on the web page and select “Inspect Element” from the context menu.
    • Go to “Tools” in the menu bar and select “Web Developer,” then choose “Inspector.”

Enabling the Developer Menu (if needed)

In some cases, the developer menu in your browser may not be visible by default. Here’s how to enable it for each browser:

  • Safari: As mentioned earlier, you can enable the Develop menu by going to “Safari” > “Preferences” > “Advanced” and checking the box that says “Show Develop menu in menu bar.”

Conclusion: Being able to open the inspection tools in Safari, Chrome, and Firefox is a fundamental skill for web developers and anyone interested in understanding and troubleshooting websites. Whether you need to analyse the structure of a webpage, debug JavaScript, or optimize page performance, these developer tools provide valuable insights into how web content is created and displayed. By following the steps outlined in this article, you can easily access and leverage these tools in your web development workflow.