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.