All geek questions in one place

Is there a way to compare the look and / or source HTML from two browser tabs?

I am working on a web application, and in order to check my changes, I would like to be able to compare the visual rendering (possibly by way of overlay) and the original HTML (diff style) from 2 browser tabs (development and production). I am glad to use any browser for this.

I already have several scripts that pull HTML from 2 sites and compare them, but it is tedious outside the browser and does not easily cope with a situation where there are session-based click nodes to get to the pages, I would like to compare. I also copied and pasted the source into the comparison tool manually, but again this is pretty tedious.

Any tips?

+3
source share
6 answers

The Firefox PageDiff plugin looks like it might help. It shows the difference between the two tabs. Install the plugin, right-click on the first page and select "Run DIFF", and then right-click on the second and select "Show DIFF". The difference is displayed in a separate pop-up window and gives you a side-by-side generated source and a summary of the line differences at the top.

Comparing page rendering seems useful enough to guarantee a native Firefox plugin. I will keep track of what might happen. If you are just worried about the layout, the GridFox tool may be convenient, but I have not seen anything that does this automatically.

- GUI?

: -, , HTML divs, src , div? -, GET, URL-. , - Firefox, , ...

, iframes . GET, , . PHP , iframe .

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

, , , , - .

+7

, linux, - , /. , , , .

, html.

+5

, Microsoft SuperPreview. http://expression.microsoft.com/en-us/dd819431.aspx

, -, .

+3

, , WinMerge .

,
 1. -. .
 2. http://browsershots.org/

, .: -)

+2

QtWebKit, :

  • .
  • JavaScript. , .
  • DOM , , JavaScript.
  • .
  • . , .
  • ++, Qt Python - PyQt.
+2

Matt Luongo jquery. IE7, firefox. , , ( jquery)...

<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"/> 
    Prefix 2: <input id="p2" value="http://comparisonsite.foo.com"/> 
    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>
+1

Source: https://habr.com/ru/post/1721959/

More articles:


All Articles