Question

我正在开发一个基于Web的应用程序，为了测试我的更改，我希望能够比较视觉呈现（可能通过重叠）和源HTML（ diff < / em> style）2个浏览器选项卡（开发与生产）。我很高兴使用任何浏览器来执行此操作。

我已经有两个脚本从两个站点中提取HTML并对它们进行比较，但它在浏览器之外很乏味，并且不能轻易处理基于会话的点击流到达页面的情况我想比较一下。我还手动将源复制并粘贴到比较工具中，但这又是非常繁琐的。

任何提示？

Answer 1

Firefox PageDiff插件看起来可能会有所帮助。它显示了两个选项卡源的差异。安装插件，右键单击第一页并选择“Start DIFF”，然后右键单击第二页并选择“Show DIFF”。差异显示在单独的弹出窗口中，并为您提供生成的源的并排和顶部的行差异摘要。

比较页面渲染似乎是一项非常有用的任务，可以保证自己的Firefox插件。我会留意任何可能有用的东西。如果您只是担心布局，GridFox工具可能会很方便，但我没有看到任何自动执行此操作。

尝试某种GUI自动化脚本是否值得？

奇怪的想法 - 我不是网络大师，但如果你需要在同一个浏览器上叠加两个不同的页面，为什么不在div中创建一个带有两个重叠iframe的HTML文件，将src属性设置为两个不同的页面，并降低顶部div的不透明度？将它放在本地Web服务器上，您可以让自己喜欢的服务器端技术为您提供响应包含URL的GET数据。哎呀，如果有兴趣的人知道编写Firefox扩展，看起来好像太难......

事实上，我刚刚完成了所述重叠iframe here的演示。只需更改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>

虽然这对布局来说非常方便，但如果你担心颜色差异 - 或者显然是浏览器之间的差异 - 你将不得不尝试别的东西。

Answer 2

一个廉价的解决方法，如果你使用的是linux，就是使用一个窗口管理器，让你可以用键盘/鼠标快捷键轻松调整窗口的透明度。然后覆盖两个窗口，每个窗口打开一个版本，并使用透明度调整快捷方式在它们之间淡入淡出。

当然，这并不能解决html代码比较问题。

Answer 3

听起来像是在寻找Microsoft SuperPreview。 http://expression.microsoft.com/en-us/dd819431.aspx

我相信它只是Beta / Preview，但它看起来很有希望。

Answer 4

对于代码，我认为您可以将文件保存在本地磁盘上，并使用WinMerge工具进行比较。

用于比较UI，
1.请检查Expression Web Super Preview。它是一个可以免费下载的独立工具。
2.您也可以将http://browsershots.org/用于相同目的

我希望这会有所帮助。： - ）

Answer 5

通过使用QtWebKit，您可以：

加载任何页面。
从代码中导航或通过评估其中的一些JavaScript。因此，您可以填写登录表单并发布。
访问页面的源和DOM，包括从JavaScript完成的修改。
截取屏幕截图并将其另存为图像。
如果您想避免真正的GUI运行，请参阅this blog post。
不需要在低级C ++中编写代码，因为Qt具有出色的Python绑定--PyQt。

Answer 6

我已经改编了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>

有没有办法比较2个浏览器标签的外观和/或源HTML？

6 个答案: