Menu
I'm working on a web based application, and in order to test my changes, I'd like to be able to compare the visual rendering (perhaps by way of overlaying) and the source HTML (diff style) of 2 browser tabs (development vs production). I'm happy to use any browser to do this.
I've already got a couple of scripts that pull the HTML from 2 sites and compares them, but it's tedious outside of a browser and doesn't easily handle the situation where there are session based clickstreams to get to the pages that I'd like to compare. I've also copied and pasted the source into a comparison tool manually, but again this is quite tedious.
Any tips?
497
The Firefox PageDiff plugin looks like it might be of some help. It shows you the diff of the source of two tabs. Install the plugin, right click on the first page and select "Start DIFF", and right click on the second and select "Show DIFF". The diff is shown in a separate popup, and gives you a side-by-side of the generated source and a summary of line differences at the top.
Comparing page rendering seems like a useful enough task to warrant its own Firefox plugin. I'll keep an eye out for any that might be of service. If you're just worried about layout, the GridFox tool might be handy, but I haven't seen anything that does this automatically.
Would it be worth it to try some sort of GUI automation scripting?
Weird idea- I'm not a web guru, but if you need an overlay of two different pages on the same browser, why not create an HTML file with two overlaid iframes in divs, src attributes set to your two different pages, and lower the opacity of the top div? Put it on a local web server and you can have your favorite server-side tech give it to you in response to GET data containing the URLs. Heck, if anyone interested knows about writing Firefox extensions, it doesn't seem like it would be too difficult...
In fact, I just finished a demo of said overlaid iframes here. Just change the GET data and you can compare any pages you'd like. The PHP is painfully simple, though figuring out iframe opacity took some googling.
<html>
<body style="opacity:.5;">
<div style="opacity: 0.5;">
<iframe src="http://<?php echo $_GET["site1"];?>" style="position: absolute; width:100%; height:100%;" allowtransparency="true" scrolling="yes"></iframe>
</div>
<iframe src="http://<?php echo $_GET["site2"];?>" style="position: absolute; z-index: -1; width:100%; height:100%" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>
While this seems pretty handy for layout, if you're worried about color differences- or, obviously, inter-browser differences- you'll have to try something else.
158
One cheap workaround, if you're using linux, is to use a window manager that lets you easily adjust the transparency of windows with a keyboard/mouse shortcut. Then overlay two windows, one with each version of your page open, and use the transparency adjustment shortcut to fade between them.
Of course, this doesn't address the html code comparison issue.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
