Tools to inspect a web page?

Rails
1

Hi,

Currently when I want to study the construction of a web page,
I use view source.

I’m looking for some a little more high-tech.

I’d like a tool which would fetch the html, any .css files, JavaScript,
and
any images.

It would gather all this stuff up and then drop it into …
I’ll call it a work-bench.

I’d use the work-bench to answer simple questions like,
is this td element affected by any .css?

Is there any .css that is not used in this page?

How are methods in the JavaScript tied to objects in the page?

What does the hierarchy of HTML elements look like?

What are the hidden parameters of a form?

Thanks,
-Dan

2

Dan B. wrote:

It would gather all this stuff up and then drop it into …

What are the hidden parameters of a form?

Thanks,
-Dan

Firefox plus WebDeveloper and Firebird extensions work for me.

3

On 10/14/06, Dan B. [email protected] wrote:

It would gather all this stuff up and then drop it into …

What are the hidden parameters of a form?

Thanks,
-Dan

Here’s a good start.

– James

4

Xylescope for Macintosh OS X is very cool.

Firefox plus Firebug is also indispensable.

On Oct 14, 2006, at 11:18 AM, Dan B. wrote:

It would gather all this stuff up and then drop it into …

What are the hidden parameters of a form?

Thanks,
-Dan

–
– Tom M.

5

On Sat, Oct 14, 2006 at 11:18:11AM -0700, Dan B. wrote:
} Currently when I want to study the construction of a web page,
} I use view source.
}
} I’m looking for some a little more high-tech.

You want Firefox with some handy extensions:

EditCSS: https://addons.mozilla.org/firefox/179/
Firebug: http://www.joehewitt.com/software/firebug/
InspectThis: https://addons.mozilla.org/firefox/1913/
Tamper Data: https://addons.mozilla.org/firefox/966/
View Source Chart: https://addons.mozilla.org/firefox/655/
Web D.: Web Developer

Others I haven’t tried but look useful:

savegenpage: https://addons.mozilla.org/firefox/2262/
View Dependencies: https://addons.mozilla.org/firefox/2214/

See below…
} I’d like a tool which would fetch the html, any .css files,
JavaScript, and
} any images.
[…]

View Dependencies may help with this. Also, Firefox has an option to
save a
web page as “Web page, complete” which includes all external references.

} is this td element affected by any .css?

InspectThis lets you bring up the DOM inspector (which is, I think, an
optional install with Firefox).

} Is there any .css that is not used in this page?

I’m not sure what you mean by this. You’re looking for CSS code that
doesn’t apply to any elements in the page? I don’t know of a way to do
that. You can use EditCSS to mess with the CSS and see what changes,
however.

} How are methods in the JavaScript tied to objects in the page?

There used to be an extension named Event Spy, but it seems to be gone.
For
now, Firebug can help, in conjunction with the DOM inspector.

} What does the hierarchy of HTML elements look like?

View Source Chart is excellent for this, as is the DOM inspector and
InspectThis. Firebug’s Inspector tab can also be useful. In addition,
Web
Developer will let you outline a variety of kinds of HTML elements. That
savegenpage extension may also be helpful, since I believe it will allow
you to view the source of a page as it is after it has been attacked by
AJAX and such.

} What are the hidden parameters of a form?

Tamper Data is excellent for that, allowing you to stop in mid-submit
and
see what is being submitted. Of course, you can also just view source
and
find all inputs of type hidden.

} Thanks,
} -Dan
–Greg