PageSpy - A swiss army knife for web-developers

[JoTo]

Hi DC-Community,

Foreword:
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
should do.

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
finding.

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-developers

Cookies:
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
is running.

PageSpy - A swiss army knife for web-developers

Querystring:
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-developers

Forms:
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-developers

This:
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-developers

DOM:
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
Javascript or whatsoever.

PageSpy - A swiss army knife for web-developers

Images:
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-developers

CSS:
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
preview.

PageSpy - A swiss army knife for web-developers

Collections:
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-developers

Others:
PageSpy let you execute manually JavaScripts on the page content to see
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-developers

Summary:
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.

Greetings
JoTo

[mouser]

really nice minireview joto! looking forward to more and to hearing about your ajax-based game in the future.
also fascinating to see the visual scheme you are using because of the visual impairment issue.

ps. quick link to the discount and program info for members: https://www.donation...dex.php?topic=2313.0

[jgpaiva]

Congratulations JoTo on your first (and not last, i expect ) review!
This review is an example of how this section of the forum is important.
I'm not a web-developer, but I bet this mini-review will be a big help for those considering buying PageSpy!
Thank you, and wellcome to the community! 

[AbteriX]

Thank you JoTo 
I found this review is very well done.
I like this tool and i could imaging i have needed such in the last years a few times.
I will check this out.

[Rover]

Joto,

Thank you for this nice review.  At 50% off, I think this is a tool I'll add to my kit.


Good job 

[taichimaster]

Thanks a lot for the great review Joto.  I just installed the trial, it's very stable and I am liking it so far!

Have you tried any free alternatives and see how it stacks up against PageSpy?  PageSpy seems to have a bigger feature set on displaying the Forms and other collections (images, querystring etc).  But the IE dev toolbar and DOMHelper supports dynamic add/modify/delete DOM elements and CSS rules after the page is loaded.

Internet Explorer Developer Toolbar Beta
DOMHelper

[JoTo]

No, haven't heard so far from this two tools. PageSpy was the first and only program i heard of.

I'll give both others a try. At least DOMHelper uses .Net Framework, and this means for me it is unusable for the bad coloring. But we'll see, trying doesn't cost anything.

Thanks for pointing this alternatives out.

Greeting
JoTo

[mouser]

it also pays to mention that firefox has a number of very good addons to do this kind of thing.
not sure how they compare to pagespy.

[mouser]

am i the only one having problems seeing the images?  they are hosted on imageshack so it could be a local problem.

in the future when you add pictures to a post, use the attachment feature (click additional options at the bottom of your post) to add pictures from local file directly to your post.  you can place attached pictures anywhere you want after you attach them by using:

[Select]

[attach=1][/attach]

where 1 is the # of the attachment you want to place.

[Sugar]

Joto, I am as impressed with your review as I am with Page Spy. (or will be impressed with it soon.  )

[allen]

Excellent review -- I hadn't given pagespy the slightest glance, but now I'm playing with it like crazy.  It's very well assembled, I sort of wish it was standalone though, or at least portable to other browsers.  Oh well, can't it all right?  I was relieved to learn its color scheme wasn't the same one as in the review

Mouser: In my experience (granted, I haven't used Firefox much in the last year+), there were several different DOM/DHTML related extensions, but I've never seen anything that can hold a candle to pagespy--not even combinations of them.  It does a lot and does it well, it seems.

[JoTo]

In addition to my review i tested the a.m. alternatives. Okay i tested only the IE Developer Toolbar as i said i have problems with .NET based programs. Also i don't like the manual way of DOMHelper for installing and de-installing. It is in beta, but for me a little bit too beta.

Going for IE DevToolbar. It is really a nice alternative to PageSpy with some advantages or functions PageSpy can't offer or can be done with IEDevToolbar quicker.

I like the thing, that IEDevToolbar works directly on the page in the browser window. You haven't to switch between different windows. Even if this can be an advantage if you want to have more than one info window for different aspects open. Then PageSpy will come more handy again.

I like really the quick outlining of objects, divs images a.s.o.,  showing its most important values right beside the outline frame, within IEDevToolbar. So you can analyze your Layout very quckly. This function PageSpy is really missing.

I like the ruler and the measure ability of IEDevToolbar. So you can easily measure which amount of pixels or whatsoever you have to correct your layout a.s.o.

And most of all, IEDevToolbar is FREE!

I now use both of them together, PageSpy and IEDevToolbar, which one comes handy for the actual case, as an addition of functionality making the best out for me.

So i think you give IEDevToolbar a try too. As it is free, you have to lose nothing but a small download and a few minutes of time.

Greetings
JoTo

[Carol Haynes]

Great little tool. I have been using Paessler's Site Inspector 4 but I am going to swap over to PageSpy because it is neater (the IE menu is grossly overextended with PSI), is a sensible price and his update policy is less annoying.

Does anyone know if there is any prospect of adding support for other browsers (firefox in particular)?

[JoTo]

@Carol: Write to the author Victor Sembelidis (mailto:[email protected]). For me he was very kind and responsive. Maybe he is planning something like that. Dunno!

Greetings
JoTo

[sembel]

Hello DC-Community!

Thank you JoTo for the nice minireview 

The same program for another browser is not easy task for me. Maybe in the future, but I can not promise.

best regards,
Victor Sembelidis

[Carol Haynes]

Thanks, and welcome sembel.

Obviously I don't know how you wrote the program but would it need much new code to produce an extension for Firefox? The data you are analyzing is identical after all?

[sembel]

hi Carol,
I use external.menuArguments (IE feature) .
I'm not familiar with Mozilla's XUL and I need learn it first.

P.S.
If Mozilla gets 50% of the market, then I learn it anyway

[Carol Haynes]

Fair enough - thanks.

[nontroppo]

Looks very nice, congrats to sembal (and JoTo for the review). Shame it is for IE only, and I imagine it would be very difficult to port over.

note most of the features are available in other browsers, but this integrates it all together in a clean way.

another essential for web developers is a request / HTTP header debugger. I long used proxomitron, which can regex and rewrite headers on the fly and log all HTTP requests. But a nicer UI is available with the name of Fiddler, an excellet HTTP debugger:

http://www.fiddlertool.com/fiddler/

the great thing is that this is cross-browser.

[JoTo]

Hi nontroppo,

i was searching a long time for a free HTTP-Debugger. Found only commercial ones with much too high price that i am willing to pay for a util i only have to use for my hobby in a very special case.

Found one (dont remember the name anymore) that is free, but it crashes and stops my IE from working correctly, so i deinstalled it asap.

Haven't heard about fiddler. I'll give him a try, even it is a .NET based application, which i HATE.

Thanks for the link.

CU
JoTo