THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
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.
Enable Dev tools in safari
Develop menu is enabled in the menu of a browser as follows
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.
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.
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
