First, please keep in mind, that this is my very first review at all and
english is not my native language. So if you don't like something, find
some mistakes or have some hints to improve future reviews from me, please
don't hesitate to comment what i can do better next time.
Second, please excuse the strange colors of my screenshots. As a visually
impaired person i must use a black background with bright foreground colors.
But PageSpy is so flexible, that it works with all color combinations and
the syntax coloring is customizable too. So please look at my screenshots
but imagine, that they look on your computer just like you expect it they
But now let's go for the main thing. The mini-Review!Introduction:
I am developing a web application (a game) that use partially page updates
via the asynchronous AJAX technology. The problem was, that this kind of
software is not easy to debug and troubleshoot. The page content will
change only in parts without reloading the full page. And if something went
wrong, you don't easy know what and why it fails. If you reload the whole
page, you can use the "View Source" feature of your browser. But this won't
work with this kind of technology. You ever only see the initial loaded
source of the page and not the actual updated state of the objects in it.
This was the main reason for my interest in PageSpy, when i stumbled over
this program on the DonationCoder DiscountPage (https://www.donationcoder.com/Discounts/index.html
So i don't think a long time, went to the homepage (http://www.sembel.net
downloaded the trial version, installed it and ... was impressed how handy,
also in other aspects, this program is.
So what in detail can PageSpy do for you?DHTML and HTML View:
As i said earlier, PageSpy is able to give you many different and very
clearly organized views of any HTML-Page showing up in your browser.
PageSpy integrates in the contextmenu of your browser. So you activate it
with a right mouseclick on the page or object your are interested in, and
selecting the PageSpy-Entry. As you rightclicked somewhere on the page,
PageSpy remembers on which object you've clicked. So in the DHTML-View the
corresponding lines in the code is automatically highlighted for quick
The HTML-View of PageSpy is the equivalent of your browsers normal
"View Source" feature. The DHTML-View is the view generated from the actual
DOM-Model objects of the page, representing the real actual state of the
page objects and not the state when the page is loaded.
On the next two screenshots you'll see my page in my AJAX project. First in
HTML-View, that represents the exact HTML-File on my webserver as it is
transmitted when first loading the page in the clients browser. Second
in the DHTML-View after AJAX has updated some single Objects in my page.
Note the differences in the img src="" tags that are "dummy" in the original
source and later updated to real URIs from AJAX.
The DHTML-Source is automatically highlighted by PageSpy in fact of my
clicked object and i have highlighted the corresponding part in the
HTML-View manually for your convinience.
PageSpy - A swiss army knife for web-developers
PageSpy - A swiss army knife for web-developersCookies:
It can show you the saved cookies for this site and the stored information
within them. In my case i use the cookie for session tracking while the game
PageSpy - A swiss army knife for web-developersQuerystring:
It can show you the actual Query of this pageurl with all parameters and let
you change, delete and add some or all of them on the fly. As i don't use
a querystring in my AJAX-Project, i show you in the screenshot a sample
of a Google-Search page, searching for "Donationcoder".
PageSpy - A swiss army knife for web-developersForms:
It show you all forms in the page with all fields in it incl. detailed
descriptions of all properties and a preview for every field. Again, as i
don't use forms in my AJAX-Project, i've taken the screenshot from another
project of mine. It contains a "Joining"-Form for a course for maritime
radio operations (GMDSS) in which i teach peoples how to use it correctly.
PageSpy - A swiss army knife for web-developersThis:
In the "this"-Tab you can easily and quickly explore all attributes and
values, inclusive prewiew, of the actual clicked DOM-Object in the page.
It's a comfortable way to get where you want, whithout the need to browse
through the whole DOM-Tree, which is of course also possible (see below).
PageSpy - A swiss army knife for web-developersDOM:
Of course you can browse the whole DOM-Tree by hand beginning from
the root to every deepest object. All objects are shown with all properties
and values and their accesspath within the DOM-Tree for later use in
PageSpy - A swiss army knife for web-developersImages:
See a table of all images in the page with all attributes of every picture
incl. URL, width, height and preview.
PageSpy - A swiss army knife for web-developersCSS:
Gives you an overview for all used CSS rules in the page. It shows you a
preview of the used properties (where applicable) and if you expand a
rule in the table, the corresponding CSS-Code is shown directly under the
PageSpy - A swiss army knife for web-developersCollections:
Here you'll find all external and internal references and used objects in the
page. You can see if there are internal or external stylesheets, internal
or external scripts, used frames, embedded objects, the list of links in the
page or used RSS-Feeds.
PageSpy - A swiss army knife for web-developersOthers:
what happens and has a builtin RegEx-Tester.
PageSpy - A swiss army knife for web-developers
Last, PageSpy shows you also the client and server informations. It has
some validator-links right handy on several buttons. So you can check the
validity of the actual page in several checkers with only a mouseclick.
PageSpy - A swiss army knife for web-developersSummary:
The functionality of PageSpy is too big to mention it all here. And i'm sure
i have forgotten something and/or not have digged in deep enough yet. But
even so far as i use PageSpy at the moment, it has become a indespensably
tool for my web developing.
There is a fully functional 30-days trial version available from the a.m.
authors homepage if you want to try PageSpy without any risk. And then you
can purchase a key to register your installed trialware to get a full
time-unlimited version. No need to download or reinstall sth. after that.
The price is IMHO very reasonable for such a good program ($19,95 for a single
user license). And if you decide to purchase before 30th, April 2006, as a
DonationCoder member, you can still get the very generously discount of
50% from the author. Purchasing my license works like charm. Even the
discount was given without any problems. I got my licensekey about 2 minutes
after the purchase.
At the end i must say, that the author is very communicative and kind. As i
mentioned above i need special colors that the actual version of PageSpy
wasn't able to support. But a single eMail to the author with my wish for a
fully configurable syntax coloring, results in a positive answer within a day.
The author agrees to implement a customizing feature for the syntax coloring.
This feature is, while writing this review, not yet implemented in the official
version (not yet fully finished, but will come shortly, said the author),
but i got a pre-release version from the author where i can hack my colors
in (with an XML-Editor) until the comfortable GUI is finished. The custom
syntax coloring works great in this pre-version. So i can pretty good live
with this version. I really appreciate the special-care handling of my
problems from Victor Sembelidis. Thanks here again for this!
Now i must state, that i really like PageSpy and hold it worth the
money, especially when you use the DonationCoder-Discount. BUT I AM NOT
affiliated with the author in any way and i don't get any money for writing
this review or from future sales of PageSpy.
Hope this review will help some people to get their web developing done
faster and easier in the future with PageSpy.