Understanding client side code of existing sites

Question

Many times I encounter a site, and would like to know - how did they do this?

Moreover, I'm looking at a the work of someone else in my own (web) project, and want to understand what exactly did he do?

What are the parts of the page? Which scripting manipulations are being performed? Which requests are being sent to the server, and when?

All this information is obviously present in the web page when one is browsing. However it can be very difficult to read and understand it.

Does anybody know of some tools for doing this better?

Could you define precisely some of the difficulties of such a process?

Any tips and strategies how this can be done?

Thank you!

Gidi

Answer 1

Download FireBug for Firefox. It is invaluable for this sort of thing.

http://getfirebug.com/

Answer 2

Using Firefox you can use Firebug to gain insight into all the XHRs that are occurring, as well as some of the javascript, html, and css. Note that people can make your life difficult by obfuscating the javascript.

With webkit based browsers like Chrome and Safari, you can get at this info with the developer tools.

Firebug is better for some things, webkit for others.

Answer 3

You need to do it yourself so choose a language and find a good book on web development then try to make web applications. Start from very simple ones. I suggest something like PHP because of ease to understand. After you learned basic concepts you can move to other platforms like ASP.NET.