您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > Python爬蟲開發(fā)HTML解析：Firebug工具的使用

Python爬蟲開發(fā)HTML解析：Firebug工具的使用

文章來源：365jz.com 點(diǎn)擊數(shù)：452 更新時間：2018-01-20 11:03 參與評論

HTML解析

HTML網(wǎng)頁數(shù)據(jù)解析提取是Python爬蟲開發(fā)中非常關(guān)鍵的一步。

4.1　初識Firebug

Firebug是一個用于Web前端開發(fā)的工具，它是FireFox瀏覽器的一個擴(kuò)展插件。它可以用于調(diào)試JavaScript、查看DOM、分析CSS、監(jiān)控網(wǎng)絡(luò)流量以及進(jìn)行Ajax交互等。它幾乎提供了前端開發(fā)需要的全部功能，因此在Python爬蟲開發(fā)中非常有用，尤其是在分析協(xié)議和分析動態(tài)網(wǎng)站的時候，本節(jié)我們所有的分析場景都是基于這個工具，基于FireFox瀏覽器。Firebug面板如圖4-1所示。

圖4-1　Firebug面板

大家如果之前用過Firebug，會發(fā)現(xiàn)在面板上多了一個FirePath的選項(xiàng)。FirePath是Firebug上的一個擴(kuò)展插件，它的功能主要是幫助我們精確定位網(wǎng)頁中的元素，生成XPath或者是CSS查找路徑表達(dá)式，這在Python爬蟲開發(fā)中抽取網(wǎng)頁元素非常便利，省去了手寫XPath和CSS路徑表達(dá)式的麻煩。FirePath選項(xiàng)面板內(nèi)容如圖4-2所示。

圖4-2　FirePath面板

4.1.1　安裝Firebug

由于Firebug是FireFox瀏覽器的一個擴(kuò)展插件，所以首先需要下載FireFox（火狐）瀏覽器。讀者可以訪問www.mozilla.com下載并安裝FireFox瀏覽器。安裝完成后用FireFox訪問https://addons.mozilla.org/zh-CN/firefox/collections/mozilla/webdeveloper/，進(jìn)入如圖4-3所示頁面。點(diǎn)擊“添加到Firefox”，然后點(diǎn)擊“立即安裝”，最后重新啟動FireFox瀏覽器即可完成安裝。

圖4-3　Firebug下載頁面

Firebug安裝完成后，為了擴(kuò)展Firebug在路徑選擇上的功能，還需要安裝Firebug的插件FirePath。打開火狐瀏覽器，進(jìn)入“設(shè)置→附件組件→搜索”，輸入firepath，如圖4-4所示。

圖4-4　FirePath安裝

·腳本面板：用于顯示JavaScript文件及其所在的頁面，也可以用來顯示Javascript的Debug調(diào)試信息，包含3個子面板，分別是監(jiān)控、堆棧和斷點(diǎn)。

·DOM面板：用于顯示頁面上的所有對象。

·網(wǎng)絡(luò)面板：用于監(jiān)視網(wǎng)絡(luò)活動，可以幫助查看一個頁面的載入情況，包括文件下載所占用的時間和文件下載出錯等信息，也可以用于監(jiān)視Ajax行為。在分析網(wǎng)絡(luò)請求和動態(tài)網(wǎng)站加載時非常有用。

·Cookies面板：用于查看和調(diào)整cookie。

·FirePath面板：用于精確定位網(wǎng)頁中的元素，生成XPath或者是CSS查找路徑表達(dá)式。

2.控制臺面板

控制臺面板可以用于記錄日志，也可以用于輸入腳本的命令行。

Firebug提供如下幾個常用的記錄日志的函數(shù)：

·console.log：簡單的記錄日志。

·console.debug：記錄調(diào)試信息，并且附上行號的超鏈接。

·console.error：在消息前顯示錯誤圖標(biāo)，并且附上行號的超鏈接。

·console.info：在消息前顯示消息圖標(biāo)，并且附上行號的超鏈接。

·console.warn：在消息前顯示警告圖標(biāo)，并且附行號的超鏈接。

例如新建一個html頁面中，向<body>標(biāo)記中加入<script>標(biāo)記，代碼如下：

<!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 = "爬蟲開發(fā)";
document.write(a,b);// 網(wǎng)頁上輸出內(nèi)容

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并運(yùn)行此HTML文檔，效果如圖4-7所示。

圖4-7　Firebug控制臺輸出結(jié)果

也可以直接在右側(cè)輸入JavaScript代碼執(zhí)行，同時可以對輸入的源代碼格式進(jìn)行美化，示例如圖4-8所示。

圖4-8　Firebug js腳本執(zhí)行

控制臺面板內(nèi)有一排子菜單，分別是清除、保持、概況、全部等。

如果沒有上圖的效果，可以在控制臺的下拉菜單中，選中顯示

XMLHttpRequests，如圖4-10所示。

圖4-10　顯示XMLHttpRequests

3.HTML面板

HTML面板的強(qiáng)大之處就是能查看和修改HTML代碼，而且這些代碼都是經(jīng)過格式化的。以百度首頁為例，在HTML控制臺的左側(cè)可以看到整個頁面當(dāng)前的文檔結(jié)構(gòu)，可以通過單擊“+”來展開。當(dāng)單擊相應(yīng)的元素時，右側(cè)面板中就會顯示出當(dāng)前元素的樣式、布局以及

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

圖4-11　百度首頁HTML結(jié)構(gòu)

而當(dāng)光標(biāo)移動到HTML樹中相應(yīng)元素上時，頁面中相應(yīng)的元素將會被高亮顯示，高亮部分我用框圈起來了，如圖4-12所示。

圖4-12　“百度一下”高亮顯示

還有一種更快更常用的查找HTML元素的方法。利用查看（Inspect）功能，可以快速地尋找到某個元素的HTML結(jié)構(gòu)，如圖4-13所示，線框圈起來的就是Inspect按鈕。

圖4-13　Inspect按鈕查看元素

當(dāng)單擊Inspect按鈕后，用鼠標(biāo)在網(wǎng)頁上選中一個元素時，元素會被一個藍(lán)色的框框住，同時下面的HTML面板中相應(yīng)的HTML樹也會展開并且高亮顯示，再次單擊后即可退出該模式。通過這個功能，可以快速尋找頁面內(nèi)的元素，調(diào)試和查找相應(yīng)代碼非常方便。

之前講的都是查看HTML，還可以修改HTML內(nèi)容和樣式。例如，將百度首頁的“百度一下”按鈕文字修改為“搜索一下”，只需將input標(biāo)記中的value值改為搜索一下，如圖4-14所示。

圖4-14　修改HTML元素值

在這個基礎(chǔ)上，修改一下樣式，將background值改為red，“搜索一下”的背景立即變成了紅色，效果如圖4-15所示。

圖4-15　修改HTML樣式

4.網(wǎng)絡(luò)面板

在Python爬蟲開發(fā)中，網(wǎng)絡(luò)面板比較常用，能夠監(jiān)聽網(wǎng)絡(luò)訪問請求與響應(yīng)，在分析異步加載請求時非常有用。例如訪問百度首頁，效果如圖4-16所示。

圖4-16　網(wǎng)絡(luò)請求

線框中可以看到，網(wǎng)絡(luò)訪問的頭信息、響應(yīng)碼、響應(yīng)內(nèi)容和Cookies都能得到有效記錄。

在網(wǎng)絡(luò)面板的子菜單中又分為HTML、CSS、JavaScript、XHR、圖片等選項(xiàng)，其實(shí)只是將所有的網(wǎng)絡(luò)訪問進(jìn)行了分類劃分。

5.腳本面板

腳本面板不僅可以查看頁面內(nèi)的腳本，而且還有強(qiáng)大的調(diào)試功能。在腳本面板的右側(cè)有“監(jiān)控”、“堆棧”和“斷點(diǎn)”三個面板，利用Firebug提供的設(shè)置斷點(diǎn)的功能，可以很方便地調(diào)試程序，還可以將JavaScript腳本格式化，方便閱讀源碼進(jìn)行分析。Firebug腳本面板如圖4-17所示。

接下來測試一下腳本面板的斷點(diǎn)調(diào)試功能，以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　腳本面板

運(yùn)行代碼后可以看到如圖4-18所示的效果。圖中加粗并有綠色的行號的代碼表示此處為JavaScript代碼，可以在此處設(shè)置斷點(diǎn)。比如在第8行這句代碼前面單擊一下，它前面就會出現(xiàn)一個紅褐色的圓點(diǎn)，表示此處已經(jīng)被設(shè)置了斷點(diǎn)。此時，在右側(cè)斷點(diǎn)面板的斷點(diǎn)列表中就出現(xiàn)了剛才設(shè)置的斷點(diǎn)。如果想暫時禁用某個斷點(diǎn)，可以在斷點(diǎn)列表中去掉某個斷點(diǎn)的前面的復(fù)選框中的勾，那么此時左側(cè)面板中相應(yīng)的斷點(diǎn)就從紅褐色變成了紅灰褐色了。

圖4-18　斷點(diǎn)設(shè)置

設(shè)置完斷點(diǎn)之后，我們就可以調(diào)試程序了。單擊頁面中的“login”按鈕，可以看到腳本停止在用淡黃色底色標(biāo)出的那一行上。此時用鼠標(biāo)移動到某個變量上即可顯示此時這個變量的值。顯示效果如圖4-19所示。

圖4-19　斷點(diǎn)調(diào)試

此時JavaScript內(nèi)容上方的四個按鈕已經(jīng)變得可用了。它們分別代表“繼續(xù)執(zhí)行”、“單步進(jìn)入”、“單步跳過”和“單步退出”。可以使用快捷鍵進(jìn)行操作：

·繼續(xù)執(zhí)行<F8>：當(dāng)通過斷點(diǎn)來停止執(zhí)行腳本時，單擊<F8>就會恢復(fù)執(zhí)行腳本。

·單步進(jìn)入<F11>：允許跳到頁面中的其他函數(shù)內(nèi)部。

·單步跳過<F10>：直接跳過函數(shù)的調(diào)用，即跳到return之后。

·單步退出<shift+F11>：允許恢復(fù)腳本的執(zhí)行，直到下一個斷點(diǎn)為止。

單擊“單步進(jìn)入”按鈕，代碼會跳到下一行，當(dāng)鼠標(biāo)移動到“msg”變量上時，就可以顯示出它的內(nèi)容是一個DOM元素，即“div#message”。將右側(cè)面板切換到“監(jiān)控”面板，這里列出了幾個變量，包括“this”指針的指向以及“msg”變量。單擊“+”可以看到詳細(xì)的信息，如圖4-20所示。

圖4-20　單步調(diào)試

以上設(shè)置的都是靜態(tài)斷點(diǎn)，腳本面板還提供了條件斷點(diǎn)的高級功能。在要調(diào)試的代碼前面的序號上單擊鼠標(biāo)右鍵，就可以出現(xiàn)設(shè)置條件斷點(diǎn)的輸入框。在該框內(nèi)輸入“arr==5”，然后回車確認(rèn)，顯示效果如圖4-21所示。