ansaurus

Question

Is there a way to compare the appearance and/or source HTML of 2 browser tabs?

Answer 1

+5 A:

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.

Ryan Thompson 2009-11-05 07:45:17

Not just linux! WindowShade X (http://unsanity.com/haxies/wsx) for Mac OS X can make windows transparent (among other things). It's $13.50, but I love it for making the yellow minimize button hide the app instead of minimize. I'm sure there are free solutions and Windows solutions as well.

Peter Di Cecco 2009-11-27 14:15:45

Please don't let this be the winning solution. There has to be a *real* way to do this.

Ryan Thompson 2009-11-28 20:31:55

Answer 2

+3 A:

Sounds like your looking for Microsoft SuperPreview. http://expression.microsoft.com/en-us/dd819431.aspx

I believe that it only a Beta/Preview but it looks really promising.

Jesper Palm 2009-11-24 06:08:05

Answer 3

+2 A:

For code I think you can save the files on your local disk and use WinMerge tool to compare them.

For comparing the UI,
1. Please check Expression Web Super Preview. It is a standalone tool available for free download.
2. You can also use http://browsershots.org/ for the same purpose

I hope this helps. :-)

Manish 2009-11-24 06:41:47

For code, I'm trying the streamline the manual process of getting from browser to diff tool.Browsershots looks interesting, thanks for that :)

Rog 2009-11-30 07:38:33

Answer 4

+2 A:

By using QtWebKit you can:

Load any page.
Navigate it from code or by evaluating some JavaScript in it. So you can fill-in login form and post it.
Access source and DOM of the page, including modifications done from JavaScript.
Take screenshot and save it as image.
See this blog post if you'd like to avoid real GUI running.
No need to code in low-level C++ since Qt has excellent Python binding - PyQt.

Denis Otkidach 2009-11-27 14:05:13

Answer 5

+7 A:

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://&lt;?php echo $_GET["site1"];?>" style="position: absolute; width:100%; height:100%;" allowtransparency="true" scrolling="yes"></iframe>
    </div>
    <iframe src="http://&lt;?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.

Matt Luongo 2009-11-28 17:19:34

Pagediff and the dom diff derivative that it links to look like a good start!Will give the opaque div trick a try soon, and possibly build a simple test rig using jquery to specify the URLs and tweak the opacity.Thanks! With hours remaining, you sir get the bounty :)

Rog 2009-11-30 07:33:15

I've adapted your transparency HTML into a simple static client side comparison tool using jquery. See my separate answer for the code.

Rog 2009-11-30 23:24:19

Ha, just found a Firefox plugin that does this =)Check out PixelPerfect (https://addons.mozilla.org/en-US/firefox/addon/7943/developers/roadblock).

Matt Luongo 2009-12-22 20:09:15

Answer 6

+1 A:

I've adapted Matt Luongo's accepted answer regarding the visual comparison of browser rendering into a static overlay page using jquery. It doesn't work in IE7, but works in firefox. It's pretty flexible, but I imagine it will need minor tweaks for use (start by pointing to your own jquery include)...

<html>
<head>
<script src="/javascripts/jquery/jquery-1.3.1.min.js" type="text/javascript" ></script>
<script>
$(window).load(function() {
    $('#go').click(function() {
        $('#f1').attr('src',$('#p1').val() + "/" + $('#url').val());
        $('#f2').attr('src',$('#p2').val() + "/" + $('#url').val());
    });
    $('#opa').toggle(function() {
        $('#transdiv').css("opacity","0.75");
    },
    function() {
        $('#transdiv').css("opacity","0.25");
    });
});
</script>
</head>
<body style="opacity:1;">
    Prefix 1: <input id="p1" value="http://testsite.foo.com"/&gt; 
    Prefix 2: <input id="p2" value="http://comparisonsite.foo.com"/&gt; 
    URL: <input id="url" value="mypage.html" /> <button id="go">Go</button>
    <button id="opa">Toggle opacity</button> 
    <div id="transdiv" style="opacity: 0.5;">
        <iframe id="f1" src="about:blank" style="position: absolute; width:95%; height:95%; background-color:transparent;" allowtransparency="true" scrolling="yes"></iframe>
    </div>
    <iframe id="f2" src="about:blank" style="position: absolute; z-index: -1; width:95%; height:95%;  background-color:transparent;" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>

Rog 2009-12-01 00:47:00

ansaurus

tags:

views:

answers:

Is there a way to compare the appearance and/or source HTML of 2 browser tabs?

related questions