Taking apart an existing webpage

[Mesmond]

What is a good method of taking apart an already existing webpage?

My browser is Firefox and so far I am using the built in code inspector, but I was wondering if there was some other way of going about inspecting web pages.

P.S. This is motivated by my style of learning: I look at the ready made thing I want to learn how to make, take it apart and then try to assemble it again.

 

[turt]

What is a good method of taking apart an already existing webpage?

My browser is Firefox and so far I am using the built in code inspector, but I was wondering if there was some other way of going about inspecting web pages.

P.S. This is motivated by my style of learning: I look at the ready made thing I want to learn how to make, take it apart and then try to assemble it again.

You can view the source to get all of the code (remember to follow the CSS/JS links too at the top of the page). There's also a Save As function under File.

 

[Mesmond]

Yes, I am familiar with that, but the problem is I get lost in all that code - at least I got lost. I've recently started using the built-in inspector of Firefox and it makes the source of a page much easier to read.

 

[Mparra]

There are website down-loaders so you can download the website locally go through the file structure.

 

[Danch]

There are website down-loaders so you can download the website locally go through the file structure.

That seems a very logical solution. I could save the source code and reinstall the original code if something went wrong. I wonder if the method works when several thousand pages are linked together in some way?

 

[ParanoiaPlus]

The thing about that is you can't see server side code. You don't really know what language they're using. The website developer could be using PHP, Python, Rails, or something else. You only see that markup that's generated along with the JavaScript. I find that the best way of learning is a hands-on approach. Make things yourself and I believe you'll learn better. However if you're learning JavaScript, CSS, or HTML, then looking at source code would be quite auxiliary. Be sure to check out sites like GitHub and Source Forge for more awesome source code.

 

[phoenixcorreia]

The source code option on google chrome is quite nice because it opens in another page, and it makes it easy to flip back and forth between the code and the page, to see what's going on with each bit of code.

 

[DeveloperSam]

I realize I am digging up an old topic, but no one mentioned this. Save the source and view it in an editor like NotePad++. It has syntax highlighting, and allows you to collapse div blocks so you don't get overwhelmed by all the code. After you become more used to viewing code, you won't need to collapse the blocks, but the highlighting will still come in handy.

 

[AliDee]

I like to use Firefox's inspector tool. It does the same thing as DeveloperSam stated and it'll also show the relevant CSS styling too. I use it often if I'm looking for something or a way to do something when I can't figure it out myself. I've never really used tools to download the entire site just to go through it for one bit of code that I need.

 

[rodserd]

Probably a matter of personal taste, but I prefer Chrome's inspect to firefox's.