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?

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, after 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:
  1. Right-click on the element [in your document] that's in question and click "Page Spy" in the IE context menu
  2. When it's window opens there will be a collapsed tree on the left
    • The top-level node is always "doc" (Page Spy's psuedo-element that represents the document object in the page you're spying.)
  3. Right-click on the "doc" node and choose "Locate srcElement" in Page Spy's context menu
    • That will make it expand the tree to highlight the node representing the element in the host document that you clicked.
  4. When you expand the selected node, in addition to nodes for any child elements there may be, there are 2 special nodes
    • 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 sheets.
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?