Getting started: debugging with Safari 5

Today I was exploring the web debugging option with safari 5. Its really cool. I wish to put down the basic of how to start with debugging features.

Lunching the debugger tool:
First download Safari 5 from here. Click on the settings icon to the right top corner. A drill down menu will come up. From the menu chose the Preferences option. This will open a popup. From the popup check the checkbox "Show develop menu in menu bar" if its uncheck. On doing this there will be an additional option in the toolbar named "Develop". Thats all. From the developer menu we can chose the option we want to use out of which "Show web inspector" is the most common one.

Even we can lunch the web inspector by right clicking any element and this will show a context menu. From the context menu we can choose "Inspect element".

We can also check various option given by Safari 5 developer tool here.

How to find javascript files, css files and images from a web page

We can find many examples for various plugins. Now how to extract the code used in that case. Let me explain this with an example. As an example I wish to take the following page-

http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_carousel/gallery.html.

Now to get the source code first thing that we can do is view source the page and find the desired source code needed. Finding the desired source code comes with practice. One instance is the you know why you have visited some pages and what could be the desired HTML for your case. For example in this case I just need the sideshow. So I will be looking for the images and the corresponding script, CSS files. I don't need the header and footer. In my case div with id content is the desired HTML I am looking for. And I need the following script and CSS files-

<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- Pirobox setup and styles -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/pirobox.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $().piroBox({
            my_speed: 400, //animation speed
            bg_alpha: 0.1, //background opacity
            slideShow: false, // true == slideshow on, false == slideshow off
            slideSpeed: 4, //slideshow duration in seconds(3 to 6 Recommended)
            close_all: '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox
        });
    });
</script>
<link href="images/style.css" rel="stylesheet" type="text/css" />

Now few things are still pending. If I save the file in my local system and try to execute, it will not work. Reasons are-

1. Image are missing in the local drive. As you can see the images are relative path starting with images/....
2. CSS files are relative
3. Script files are relative

Now easy and quick way to resolve the problem of the file location is the use of browser debugging tools.

Using IE developer tool:
If you are using IE 9 onward you can use the IE 9 debugger tool to find the file locations. Open the page in IE 9, click F12, debugger tool will popup. Go to network tab, click Start Capturing button and refresh the same page again. Below the network tab you will find the actual location of all the files that are getting loaded with the page. You can right click the link and copy and use the full path.

Using Firebug:
Go to firebug tool, select the Net option, enable the net option if its disabled, refresh the page. You can find the set of URLs displaying in the net tab. In firebug there are classification of the different files loaded with the page like images, flash, CSS, js and so on. You can right click the link and copy and use the full path.

Using Safari, Opera and Google Chrome developer tool:
In all these browse, open the page. Right click on any place in the page, and from the context menu chose "Inspect Element". This will popup the developer tool. Then go to Network tab in the developer tool and refresh the page. You can see all the CSS, images and scripts loaded.