Welcome to the PageSpy - Extreme version Website
Please download and execute this short Registry
Script to install (which will overwrite your old PageSpy registry
entry, if it exists.) You must restart your browser for it to take effect.
If you want to remove PageSpyEx from your IE context menu, too damn bad, what do
I look like, your mommy? You think you're so smart, figure it out your
own damn self! ...oh, sorry, just kidding, here's a little script to remove the
registry entry that makes it tick: http://pagespy.com/uninstall.js
What's New and So Extreme?
Graphically resize the dialog window and splitter panes within it.
Streamlined UI, layout uses screen space more efficiently.
Rendered pane improved
Checkbox to make rendered elements CONTENTEDITABLE, allowing select/cut/paste
Area can be graphically resized
HTML Source pane improved
Source can be selected/copied
Area can be graphically resized
Improved script exec facility
- Displays error messages when errors occur
- Executes selected code only if any text is selected
- New built-in symbol "win" (a reference to the host document's window object)
- New built-in symbol "that" (a reference to the element [in the host document] represented by the currently selected/last-expanded tree node)
Tree nodes now support a context menu
New feature locates source element (clicked in host document, to invoke PageSpy) in tree
Allows you to expand or collapse the entire tree (or any branch) with two clicks
Default size now fits low-res displays (800x600 minimum required)
Allows you to browse the whole frameset, not just the frame you clicked in
Lists all styles and attributes for each element, in alpha order
It now has an about box
- *New* Client cookies used to remember/restore last size/position
- *New* Client-side script persistance
An Example Use Case
An element in your blog isn't behaving as you'd like or expect. You realize
that it could be affected by multiple styles (they call them 'cascading' for a
reason) some or all of which you can't easily see.
What you need to know is, what are the element's current styles
all style sheets have been applied -- but how do you find that out?
Enter: Page Spy [kachow!]
It will show you all styles appplied
to any element in the document. When you're most interested in a single element,
this is the easy way to find it in Page Spy:
- Right-click on the element [in your document] that's in question and click
"Page Spy" in the IE context menu
- When it's window opens there will be a collapsed tree on the left
Right-click on the "doc" node and choose "Locate srcElement" in Page Spy's context menu
- The top-level node is always "doc" (Page Spy's psuedo-element that represents
the document object in the page you're spying.)
When you expand the selected node, in addition to nodes for any child elements there may be, there are 2
- That will make it expand the tree to highlight the node representing the
element in the host document that you clicked.
- Attributes -- (pretty self-explanatory)
- Styles -- Shows the end effect of all styles, inline or in style sheets
- For each element, all relevant styles resolve to one value for each style
- That value dictates behavior of any given element
As you explore the tree you'll notice that many nodes cause a portion of the document
to render in the right side. Not all elements can be logically rendered in isolation,
and further, some may be hidden from rendering. Even so, you'll find most DIVs, TABLEs,
FORMs, IMGs, and others will render in isolation -- they are even isolated from their style
Hopefully you'll find Page Spy to be both useful as well as educational.
A page with some aberant construction to practice spying
What else is planned?
- Smart tree nodes, with element-type-specific behavior