Debugging the UI for any web application has always been the nightmare for web developers and after the advent of Firebug plugin on Firefox browser life became much more simpler as we can check CSS, HTML source code and all the network activity on the browser. This rose the popularity of Firefox browser and all other browser tried to emulate Firebug like tool. Lately Safari also joined this and it had in build “Web Inspector” tool that emulate Firebug like operation. In this article we would learn how to use Web Developer tool on Safari browsers.
Enable Web Inspector on Safari Browser
Step1: By default Web Inspector tool is not enabled inside Safari, to enable it we have to goto
settings -> Preferences -> Advanced
Step2: After clicking on Preferences, goto Advanced tab and check “Show develop menu in menu bar”.
Step3: After clicking the “Show develop menu in menu bar we have to goto Customize toolbar option inside settings as shown below
Step4: Now we have to drag the Web Inspector button on the actual toolbar and click on Done.
Finally you would see the Web Inspector button on the toolbar, now to show the Web Inspector you would have to click on Web Inspector button that would open an window containing current web page information.