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安装
4.1.2 强大的功能
下面按照主面板、子面板的顺序说明Firebug的强大功能，相信大家会被Firebug所吸引。
1.主面板
安装完成之后，在Firefox浏览器的地址后方就会有一个小虫子的图标，这是Firebug启动开关，如图4-5所示。
图4-5 Firebug启动开关
单击该图标后即可展开Firebug的控制台，也可以通过快捷键<F12>来打开控制台，默认位于Firefox浏览器底部。使用Ctrl+F12快捷键可以使Firebug独立打开一个窗口而不占用Firefox页面底部的空间，如图4-6所示。
图4-6 Firebug主面板
从上图中可以看出，Firebug包括8个子面板：
·控制台面板：用于记录日志、概览、错误提示和执行命令行，同时也用于Ajax的调试。
·HTML面板：用于查看HTML元素，可以实时地编辑HTML和改变CSS样式，它包括3个子面板，分别是样式、计算出的样式、布局、DOM和事件面板。
·CSS面板：用于查看所有页面上的CSS文件，可以动态地修改CSS样式，由于HTML面板中已经包含了样式面板，因此该面板将很少用到。
·脚本面板：用于显示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脚本执行
控制台面板内有一排子菜单，分别是清除、保持、概况、全部等。
·“清除”用于清除控制台中的内容。
·“保持”则是把控制台中的内容保存，即使刷新了依然还存在。
·“全部”则是显示全部的信息。
·“概况”菜单用于查看函数的性能。
·后面的“错误”、“警告”、“消息”、“调试信息”、“Cookies”菜单则是对所有的信息进行了分类。
控制台面板还可以进行Ajax调试。例如打开一个页面，可以在Firebug控制台查看到本次Ajax的HTTP请求头信息和服务器响应头信息。首先在Firefox浏览器中开启Firebug，并访问百度的首页，可以看到图4-9的效果。
图4-9 Ajax请求
如果没有上图的效果，可以在控制台的下拉菜单中，选中显示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面板
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论