How to Access Console in Safari Browser on Mac

Debugging web pages or working with JavaScript requires access to the browser’s developer tools, often referred to as the “console.” In Safari on a Mac, accessing the console can be slightly different than on other browsers like Chrome or Firefox.

This blog post provides a detailed guide on how to open and use the console in Safari.

Why Access the Console?

Before diving into the steps, let’s look at some reasons you might want to use the console:

• Debugging: It helps in identifying issues with web pages or scripts.
• Monitoring: You can watch network activity and other events in real time.
• Testing: The console lets you run JavaScript commands and see their effects instantly.

Prerequisites

To follow this guide, you’ll need:

• A Mac computer running macOS.
• The Safari browser installed.

Enable Developer Mode

In Safari, the console is a part of the developer tools, which are not visible by default. To enable them:

Step 1: Open Safari Settings

Go to Safari > Settings or press Command + , to open the Preferences panel.

Step 2: Unlock the Advanced Tab

Navigate to the ‘Advanced’ tab.

Step 3: Enable Developer Menu

At the bottom, you’ll find the option “Show Develop menu in menu bar” Check this box.

Access the Console

Once Developer Mode is enabled, you’ll see a new ‘Develop’ option in the Safari menu bar.

Step 1: Open the Web Inspector

Go to Develop > Show Web Inspector or simply press Command + Option + I.

Step 2: Navigate to Console Tab

Inside the Web Inspector, you will see multiple tabs like ‘Elements,’ ‘Console,’ ‘Sources,’ etc. Click on the ‘Console’ tab.

Step 3: Interact with the Console

Here you can type JavaScript commands, check errors, and view logs.

Using the Console

The console in Safari has several useful features:

• Autocomplete: As you type, Safari will suggest possible completions.
• Command History: Use the up and down arrows to navigate through past commands.
• Clear Console: Click the ‘Clear’ button or type clear() to remove existing messages.

Advanced Tips

• Preserve Log: To keep the log when you navigate to a different page, click the ‘Preserve Log upon Navigation’ button (a box icon).
• Filter Messages: Use the filter box to search through existing console messages.

Accessing the console in Safari on a Mac is a simple yet powerful way to interact with web pages and run JavaScript commands. Enabling Developer Mode and familiarizing yourself with the console can offer valuable insights into web development and debugging tasks.