Safari developer tools developer console, Inspect options

Why Safari Dev tools are required?

In Web application development, Web Developers need to test and debug the functionality in different browsers. Chrome, Firefox, and Safari browsers are used by most developers.

Safari browser is one of the popular web browsers from Apple.

Sometimes, the functionality works in chrome, But it will not work on other browsers like safari. Developers need to debug the code to find out the root issue. All the browsers provide developer tools to debug the code.

Configure web developer tools in safari browser

Developer tools can be enabled by Safari—> Preferences-Advanced Tab - Check Show Developer menu in menu bar.

Configure Web developer tools

Enable Dev tools in safari

Develop menu is enabled in the menu of a browser as follows

Safari Developer menu tools

How to Inspect elements in the safari browser?

Web Inspector is one of the important developer tools provides different tabs to inspect all the front-end resources like HTML/CSS/javascript, the performance of the Network request time, time taken to load all resources, and console log messages. You can inspect DOM elements.

In the Develop menu, Please select the Show Web Inspector option

The shortcut command for configuring a web inspector is Ctrl+Alt+I. It opens the window to the same safari browser at the bottom.

You can also open this inspect tool in a new window using a docking feature as below.

undock inspect feature in new window

Show error console feature in safari browser

This feature can be enabled using either Develop menu or the shortcut command Ctrl+Alt+C. It lists out all broken elements, and error messages in red color on the web page. It is very useful for debugging the code and the message will be displayed with a line number and useful message for fixing the issue.

Show Error console safari browser

how to preserve log-in safari developer tools?

By default, the safari log is reset during the navigation of pages in the console log. You can find this option in developer tools as follows.

  • Keep Log on Navigation in older versions
  • preserve log in the latest safari versions

We can do the same thing easily in Chrome. From the safari 14 version, We can find the preserve log option in the Network tab of the Developer console.

Check Developer console + Network tab +preserve log.

For Older safari versions, You can right-click on the console area and select Keep Log on Navigation