您现在的位置： 365建站网 > 365文章 > Python爬虫开发HTML解析：Firebug工具的使用

Python爬虫开发HTML解析：Firebug工具的使用

文章来源：365jz.com 点击数：436 更新时间：2018-01-20 11:03 参与评论

HTML解析

HTML网页数据解析提取是Python爬虫开发中非常关键的一步。

4.1　初识Firebug

Firebug是一个用于Web前端开发的工具，它是FireFox浏览器的一个扩展插件。它可以用于调试JavaScript、查看DOM、分析CSS、监控网络流量以及进行Ajax交互等。它几乎提供了前端开发需要的全部功能，因此在Python爬虫开发中非常有用，尤其是在分析协议和分析动态网站的时候，本节我们所有的分析场景都是基于这个工具，基于FireFox浏览器。Firebug面板如图4-1所示。

图4-1　Firebug面板

大家如果之前用过Firebug，会发现在面板上多了一个FirePath的选项。FirePath是Firebug上的一个扩展插件，它的功能主要是帮助我们精确定位网页中的元素，生成XPath或者是CSS查找路径表达式，这在Python爬虫开发中抽取网页元素非常便利，省去了手写XPath和CSS路径表达式的麻烦。FirePath选项面板内容如图4-2所示。

图4-2　FirePath面板

4.1.1　安装Firebug

由于Firebug是FireFox浏览器的一个扩展插件，所以首先需要下载FireFox（火狐）浏览器。读者可以访问www.mozilla.com下载并安装FireFox浏览器。安装完成后用FireFox访问https://addons.mozilla.org/zh-CN/firefox/collections/mozilla/webdeveloper/，进入如图4-3所示页面。点击“添加到Firefox”，然后点击“立即安装”，最后重新启动FireFox浏览器即可完成安装。

图4-3　Firebug下载页面

Firebug安装完成后，为了扩展Firebug在路径选择上的功能，还需要安装Firebug的插件FirePath。打开火狐浏览器，进入“设置→附件组件→搜索”，输入firepath，如图4-4所示。

图4-4　FirePath安装

·脚本面板：用于显示JavaScript文件及其所在的页面，也可以用来显示Javascript的Debug调试信息，包含3个子面板，分别是监控、堆栈和断点。

·DOM面板：用于显示页面上的所有对象。

·网络面板：用于监视网络活动，可以帮助查看一个页面的载入情况，包括文件下载所占用的时间和文件下载出错等信息，也可以用于监视Ajax行为。在分析网络请求和动态网站加载时非常有用。

·Cookies面板：用于查看和调整cookie。

·FirePath面板：用于精确定位网页中的元素，生成XPath或者是CSS查找路径表达式。

2.控制台面板

控制台面板可以用于记录日志，也可以用于输入脚本的命令行。

Firebug提供如下几个常用的记录日志的函数：

·console.log：简单的记录日志。

·console.debug：记录调试信息，并且附上行号的超链接。

·console.error：在消息前显示错误图标，并且附上行号的超链接。

·console.info：在消息前显示消息图标，并且附上行号的超链接。

·console.warn：在消息前显示警告图标，并且附行号的超链接。

例如新建一个html页面中，向<body>标记中加入<script>标记，代码如下：

<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.01// EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Firefox测试</title> </head> <body> <script type="text/javascript"> var a = "Python";
var b = "爬虫开发";
document.write(a,b);// 网页上输出内容

console.log(a + b);
console.debug(a + b);
console.error(a + b);
console.info(a + b);
console.warn(a + b);
</script> </body> </html>

在Firefox浏览器中开启Firebug并运行此HTML文档，效果如图4-7所示。

图4-7　Firebug控制台输出结果

也可以直接在右侧输入JavaScript代码执行，同时可以对输入的源代码格式进行美化，示例如图4-8所示。

图4-8　Firebug js脚本执行

控制台面板内有一排子菜单，分别是清除、保持、概况、全部等。

如果没有上图的效果，可以在控制台的下拉菜单中，选中显示

XMLHttpRequests，如图4-10所示。

图4-10　显示XMLHttpRequests

3.HTML面板

HTML面板的强大之处就是能查看和修改HTML代码，而且这些代码都是经过格式化的。以百度首页为例，在HTML控制台的左侧可以看到整个页面当前的文档结构，可以通过单击“+”来展开。当单击相应的元素时，右侧面板中就会显示出当前元素的样式、布局以及

DOM信息，效果如图4-11所示。

图4-11　百度首页HTML结构

而当光标移动到HTML树中相应元素上时，页面中相应的元素将会被高亮显示，高亮部分我用框圈起来了，如图4-12所示。

图4-12　“百度一下”高亮显示

还有一种更快更常用的查找HTML元素的方法。利用查看（Inspect）功能，可以快速地寻找到某个元素的HTML结构，如图4-13所示，线框圈起来的就是Inspect按钮。

图4-13　Inspect按钮查看元素

当单击Inspect按钮后，用鼠标在网页上选中一个元素时，元素会被一个蓝色的框框住，同时下面的HTML面板中相应的HTML树也会展开并且高亮显示，再次单击后即可退出该模式。通过这个功能，可以快速寻找页面内的元素，调试和查找相应代码非常方便。

之前讲的都是查看HTML，还可以修改HTML内容和样式。例如，将百度首页的“百度一下”按钮文字修改为“搜索一下”，只需将input标记中的value值改为搜索一下，如图4-14所示。

图4-14　修改HTML元素值

在这个基础上，修改一下样式，将background值改为red，“搜索一下”的背景立即变成了红色，效果如图4-15所示。

图4-15　修改HTML样式

4.网络面板

在Python爬虫开发中，网络面板比较常用，能够监听网络访问请求与响应，在分析异步加载请求时非常有用。例如访问百度首页，效果如图4-16所示。

图4-16　网络请求

线框中可以看到，网络访问的头信息、响应码、响应内容和Cookies都能得到有效记录。

在网络面板的子菜单中又分为HTML、CSS、JavaScript、XHR、图片等选项，其实只是将所有的网络访问进行了分类划分。

5.脚本面板

脚本面板不仅可以查看页面内的脚本，而且还有强大的调试功能。在脚本面板的右侧有“监控”、“堆栈”和“断点”三个面板，利用Firebug提供的设置断点的功能，可以很方便地调试程序，还可以将JavaScript脚本格式化，方便阅读源码进行分析。Firebug脚本面板如图4-17所示。

接下来测试一下脚本面板的断点调试功能，以jsTest.html文件为例，代码如下：

<!DOCTYPE html PUBLIC "-// W3C// DTD XHTML 1.0 Transitional// EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta charset="utf-8"> <script type="text/javascript"> function doLogin(){ var msg = document.getElementById('message');

var username = document.getElementById('username');
var password = document.getElementById('password');
arrs=[1,2,3,4,5,6,7,8,9];
for(var arr in arrs){ msg.innerHTML+=arr+"<br />"
msg.innerHTML+="username->"+username.value
+"password->"+password.value+"<br />"
} } </script> </head> <body> <div> <input id="username" type="text" placeholder="用户名" value=""/> <br/> <input id="password" type="text" placeholder="密码" value=""/> <br/> <input type="button" value="login" onClick="doLogin();"/> <br/> <div id="message"></div> </div> </body> </html>

图4-17　脚本面板

运行代码后可以看到如图4-18所示的效果。图中加粗并有绿色的行号的代码表示此处为JavaScript代码，可以在此处设置断点。比如在第8行这句代码前面单击一下，它前面就会出现一个红褐色的圆点，表示此处已经被设置了断点。此时，在右侧断点面板的断点列表中就出现了刚才设置的断点。如果想暂时禁用某个断点，可以在断点列表中去掉某个断点的前面的复选框中的勾，那么此时左侧面板中相应的断点就从红褐色变成了红灰褐色了。