Firebug For Safari

You may not know it, but Safari is packed with developer goodness, tons of tools which you may find similar to Firebug which is a developer extension for Firefox.

Enabling Developer Menu In Safari

First we need to enable the developer menu in order to reach any of these features. Open up Safari's preferences and go to the Advanced tab.

"develop menu item" />

Network Activity Inspector

This is a very powerful debugging tool in terms of web performance, and is VERY similar to what you see in Firebug, yet splashed with some fancy apple gloss. This panel displays network resource downloading sequences, some of which download in parallel, as well as other useful information such as total time spent per type of resource.

Inspecting Request And Response Headers

Within the same panel mentioned above simply click on a resource in the main panel and you will be presented with both the request and response headers.

DOM Inspector

Again in a similar manor to Firebug there is the DOM or 'Web' Inspector. Most of this is self explanatory, just make sure you click the 'cascading tree' icon at the top to view the DOM tree for the document.

JavaScript Console

As shown in the images below, any errors will be logged to the main panel. Use the line function below in order to log data: