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

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

文章来源:365jz.com     点击数:202    更新时间: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行这句代码前面单击一下,它前面就会出现一个红褐色的圆点,表示此处已经被设置了断点。此时,在右侧断点面板的断点列表中就出现了刚才设置的断点。如果想暂时禁用某个断点,可以在断点列表中去掉某个断点的前面的复选框中的勾,那么此时左侧面板中相应的断点就从红褐色变成了红灰褐色了。


图4-18 断点设置

设置完断点之后,我们就可以调试程序了。单击页面中的“login”按钮,可以看到脚本停止在用淡黄色底色标出的那一行上。此时用鼠标移动到某个变量上即可显示此时这个变量的值。显示效果如图4-19所示。



图4-19 断点调试

此时JavaScript内容上方的四个按钮已经变得可用了。它们分别代表“继续执行”、“单步进入”、“单步跳过”和“单步退出”。可以使用快捷键进行操作:

·继续执行<F8>:当通过断点来停止执行脚本时,单击<F8>就会恢复执行脚本。

·单步进入<F11>:允许跳到页面中的其他函数内部。

·单步跳过<F10>:直接跳过函数的调用,即跳到return之后。

·单步退出<shift+F11>:允许恢复脚本的执行,直到下一个断点为止。

单击“单步进入”按钮,代码会跳到下一行,当鼠标移动到“msg”变量上时,就可以显示出它的内容是一个DOM元素,即“div#message”。将右侧面板切换到“监控”面板,这里列出了几个变量,包括“this”指针的指向以及“msg”变量。单击“+”可以看到详细的信息,如图4-20所示。

图4-20 单步调试

以上设置的都是静态断点,脚本面板还提供了条件断点的高级功能。在要调试的代码前面的序号上单击鼠标右键,就可以出现设置条件断点的输入框。在该框内输入“arr==5”,然后回车确认,显示效果如图4-21所示。


最后单击页面的“login”按钮。可以发现,脚本在“arr==5”这个表达式为真时停下了。

6.FirePath面板

切换到FirePath面板,通过查看(Inspect)按钮,点击“百度一下”按钮,XPath后面的输出框中出现XPath路径表达式,如图4-22

所示,这在Python爬虫开发中非常有用。

图4-21 条件调试


图4-22 FirePath面板

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (202人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------