Tuesday, June 26, 2018

Safari developer tools tutorials- Understanding web 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 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. 
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 element in safari browser?

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

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 a docking feature as below 

undoc inspect feature in new window



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

Show Error console safari browser