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 of the developers.
Safari browser is one of the popular web browsers from Apple.
Sometimes the functionality works in chrome 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.
|Enable Dev tools in safari|
Develop menu is enabled in the menu of a browser as follows
How to Inspect element in safari browser?
In Develop menu, Please select Show Web Inspector option
The shortcut command for configuring web inspector is Ctrl+Alt+I. It opens the window to same safari browser in the bottom.
You can also open this inspect tool in a new window using docking feature as below
Show error console feature in safari browser
This feature can be enabled using either Develop menu or shortcut command Ctrl+Alt+C.
It lists out all broken elements, error messages in red color in the web page. It is very useful for debugging the code and message will be displayed with line number and useful message for fixing the issue