1. 程式人生 > >chrome--瀏覽器除錯工具詳解

chrome--瀏覽器除錯工具詳解

chrome瀏覽器開發除錯工具開啟方式:F12鍵

一,常用面板介紹

面板
1.定位小箭頭按鈕(左邊第一個):
選中Elements面板,並啟動該按鈕,可以在頁面中定位相應元素的原始碼位置,或者選擇原始碼位置可定位到頁面相應的元素。
2.手機-PC檢視切換按鈕(左邊第二個):
啟動該按鈕,網頁可以在pc網址網頁和手機網址網頁之間進行轉換。由於在爬蟲過程中,爬取手機網址網頁相對來說更容易,所以可以通過該按鈕將網頁切換至移動網頁實現更快速爬取操作。(例如新浪微博)
3.Elements面板
該面板顯示了渲染完畢後的全部HTML原始碼,在使用selenium爬取網頁時可通過這些原始碼找到各標籤的位置,屬性等特徵。更重要的是,雙擊html原始碼或者右側的css,可以更改網頁外觀,即可以對靜態網頁進行除錯。
4.Console面板
該面板用來顯示網頁載入過程中的日誌資訊,包括列印,警告,錯誤及其他可顯示的資訊等。同時它也是一個js互動控制檯。
console


上圖顯示了百度首頁的console面板資訊,該資訊來源於執行請求下來的js檔案所得。每條資訊的右側顯示了資訊的來源的js檔案及具體的行數。同時最下邊個人寫了一條簡單的輸出資訊,輸出“這是資料小丸子”。
更為重要的一個功能是:ctrl+shift+F在該面板中能夠喚起全域性搜尋功能,即可以在所有下載的資源中搜索目標資訊,這點對於關鍵字查詢是非常重要的。
5.Sources面板
該面板以站點為分組,存放著請求下來的所有資源(html,css,jpg,gif,js等)。正是因為該面板存放了所有的資源,因此在除錯js時,目的碼都是在此處尋找的。
該面板也提供了除錯按鈕工具。
6.Network面板
Network面板記錄了網路請求的詳細資訊,包括請求頭,響應頭,表單資料,引數資訊等等,只要是做爬蟲的這個面板必須要了解。
network

紅色圓圈內代表的是請求的不同型別的資料,其中XHR表示ajax請求,即非同步請求,在爬蟲中最重要的是分析該項。Doc表示的是html文件型別。其他幾個不是很重要不詳細講解。
若要保留請求記錄,勾選上preserve log選項。

其他幾個面板在爬蟲過程中使用不是很多,故不再講解。