开发浏览器监控网页数据变化_贝程学院：Selenium辅助开发工具Firebug和Firepath

在Selenium开发脚本利用辅助开发工具，可以节省许多时间，提高开发效率和软件质量，降低开发成本。在selenium开发脚本或进行测试前是必须对页面元素进行定位的，而Firefox提供了两个非常使用且方便的小工具(Firebug和FirePath)用于定位元素。

一.Firebug

Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一，它已经和Firefox浏览器无缝地结合在一起，具备在各种浏览器下面调试功能。用FireBugy有可以帮助测试开发人员快速开发脚本, 通常情况下，可以用FireBug插件在脚本开发种做四种类型的操作：

显示源代码 - 它可以让你重新查看JavaScript引擎渲染之后的HTML网页。
高亮显示变化 - 它可以检测并高亮（黄色）显示任何HTML页面的改变。这个特性可以立即获取你的注意，以确保你没有错过什么。
快速检查 - FireBug有 Inspect 功能，能够让你快速查看你想要的web元素的定位器。
复制HTML - 你可以轻松地复制HTML网页的代码，或用 innerHTML 获取部分网页，或者某个元素的XPath表达式。

下面我们来看看安装和它的基本功能：

1. 安装firebug2.0.19:

A. 打开火狐浏览器
B. 使用快捷键commond+shift+A（mac系统）或者ctr+shift+A（window系统）：

C. 拉动上界面中的滚动条，点击下面”看看更多组件”按钮，出现界面：

D. 搜索firebug

E. 点击’添加到firefox’

2. Firebug基本功能

A. 控制台：

控制台得主要作用是用来显示网页各类错误信息，并可对日志进行打印处理。同时可以在进行javascript调试的时候当作命令行窗口使用，并通过概况子选项说明JavaScript代码执行的相关信息。如下图所示：

B. HTML：

此菜单标签功能主要用于查看当前页面的源代码功能，并可进行编辑，时时显示，从而实现页面最佳效果。启用此标签后界面如下：

整个页面被分为左右两部分，在HTML控制台的左侧可以看到整个页面当前的文档结构，可以通过单击“+”来展开。当单击相应的元素时，右侧面板中就会显示出当前元素的样式、布局以及DOM信息。而当光标移动到HTML树中相应元素上时，上面页面中相应的元素将会被高亮显示。较普通的源代码显示更为的直观和具体。双击左边源码中任一元素的属性值，出现可编辑悬浮，可对属性进行编辑，并可即可查看修改效果。

Firebug面板上导航栏的第二个箭头按钮，就是"Inspect"按钮，这个功能是用鼠标在网页上选中一个元素时，元素会被一个蓝色的框框住，同时下面的HTML面板中相应的HTML树也会展开并且高亮显示。再次单击后即可退出该模式，并且底部的HTML树也保持在这个状态。通过这个功能，可以快速寻找页面内的元素，调试和查找相应代码非常方便。刷新网页后，页面显示的仍然是用Inspect选中的区域。

HTML面板下方的“编辑”按钮可以用于直接编辑选中的HTML代码，而后面显示的是当前元素在整个DOM中的结构路径。

C. CSS：

点击CSS菜单标签，可查看所有的CSS定义信息，同时也可以通过双击来达到修改页面样式的效果，如下图所示：

D. JavasSript：

脚本功能主要是一个脚本调试器，可以进行单步调试、断点设置、变量查看等功能，同时通过右边的监控功能来实现脚本运行时间的查看和统计，提高运行效率，如下图所示：

由于firebug已经停止更新了，所以firebug支持JavaScript调试功能只是支持到了50版本以下，因为本书用的是firefox安装了54.0.1版本，所以在图中你会看到“本页面不包含 JavaScript”信息。

E. DOM功能：

单击“DOM”面板后可以看到此元素的详细的DOM信息以及函数和事件，通过提供的搜索功能实现DOM的快速准确定位，并可双击来实现DOM节点属性或值的修改，如下图：

F. 网络（Net）：

该标签功能主要用来监控网页各组成元素的运行时间的信息，方便找出其中运行时间较慢的部分，进一步优化运行效率，如下图：

如上图所示可以点击网络标签查看网页的详细的网络请求。在做前端性能测试中，可以根据分下面的请求信息来判断那条请求性能有问题。面板上有XHR（XHR类型即通过XMLHttpRequest方法发送的请求，也就是ajax功能实现所依赖的对象）标签，这是对异步请求过滤，这个功能在做自动化测试的过程中很有帮助。它可以查看网站的异步请求情况。包括post数据。点击其中xhr的一个请求，双击，就可以在请求下面查看该请求的参数信息以及发送的cookie等。可以通过此得到请求是否完成，请求的运行情况。

二.Firepath

Firepath可对Firebug的功能进行扩展。自动生成xpath和css，同时测试开发人员可以提供自定义的XPath值，并直接在网页上测试他们的正确性。因为firepath也是firefox的插件，所以安装同firebug.下面学习用firepath获得XPath

1. 打开FireBug，然后点击 FirePath 标签。

2. 在页面中点击右键，出现浮动菜单，点击inspect in firepath

在firepath的输入框中就会出现xpath的路径，点击Hightlight，选择的元素就会高亮度显示出来。

通过上面操作，你就可以在自动化就脚本开发的过程中选择你要取得的元素xpath路径，可以大大提高了脚本开发效率，如果你想获得的是页面元素的css选择器，只要把firebug的XPath改成CSS即可。