本篇要介紹的是開始學習爬蟲之前必會的技能 - 瀏覽器自帶的開發者工具,學會了瀏覽器開發者工具,才能更好的分析出網頁相應的內容結構,以及如何使用開發者工具來找出網站中信息交互的請求接口地址。
PS:請求接口地址,小白可以理解為一個網頁的地址。此地址是服務器(服務器可以看做配置高點的電腦)專門返回數據用的請求地址,比如我們在瀏覽器上輸入一個地址,回車以后能看到瀏覽器上返回相應的網頁,請求接口地址與之類似,只不過一般返回的都是格式化的數據信息,如 JSON。不懂 JSON 的詳見:Python小課堂25 - 你真的了解JSON嘛?
瀏覽器的選擇
瀏覽器的選擇,特意來說下對于分析爬蟲元素的瀏覽器,筆者常用的3個,分別為:谷歌、火狐、360極速瀏覽器。
對于瀏覽器的選擇,基本上只要除了微軟的 IE 瀏覽器以外,其余瀏覽器都可以使用,因為 IE 自帶的瀏覽器開發工具不太好用。這里推薦谷歌瀏覽器。但是作為講解,筆者這里使用的是360極速瀏覽器,因為360的瀏覽器是雙核的,既可以用 IE 內核,也可以用谷歌內核,在工作中兼容性較好,支持一些只有 IE 能訪問的網頁。可以放心的是下面講解的截圖雖然是360的開發者工具,但是與谷歌瀏覽器基本一樣,安心觀看啦。。。
PS:會了谷歌瀏覽器的開發者工具,其余瀏覽器同理。
瀏覽器的開發者工具準備
首先,打開瀏覽器隨意進入一個網頁,如百度,按下F12后可以看到下圖所示:

也許你看到的框框和筆者的不一樣,現在看到的框是默認吸附于瀏覽器的,筆者更習慣將開發者工具作為單獨的一個頁面呈現。筆者選擇第一個按鈕,可以調節如下:


瀏覽器開發者工具詳講
調整后,可以看到瀏覽器上面一排按鈕,這里只為了爬蟲介紹最常用的前四個按鈕,元素(Elements)、控制臺(Console)、源代碼(Sources),網絡(Network):

標粗的文字(元素、網絡)是學爬蟲前提必須掌握的選項卡,其余兩個了解即可,以下按照掌握程度的優先級進行介紹。
1. 元素(Elements)
查看元素代碼結構:點擊如下圖的箭頭(或用者用快捷鍵Ctrl+Shift+C)進入選擇元素模式,然后從頁面中選擇需要查看的元素,然后可以在開發者工具元素(Elements)一欄中定位到該元素源代碼的具體位置 。

舉個栗子,比如想看百度熱搜對應的 html 代碼,只需要點擊此箭頭,選擇你想查看的文本,鼠標左鍵點擊后,方可在 Elements 中看到對應的 html 代碼,如下:

根據文字找出對應代碼塊,是學習爬蟲之前分析的必要階段,當然這里交小白一個好玩的操作。我們可以對其頁面內容進行修改,選中對應頁面元素,雙擊即可修改文字,比如改為下面的:

當然,這里僅限于你不刷新的情況,一旦刷新了頁面,其實又回到原來的熱點新聞文字了,因為靜態頁面我們是可以用此方式修改的,若刷新頁面,相當于重新請求了服務器一次,所以又變回原來的文字信息了。
2. 網絡(Network)
點到 Network 選項卡,查看下面圖片可以看到最常用的幾個功能:

第二行的按鈕可以根據網頁資源進行網頁監控的過濾:

比如選擇XHR時,就是所謂的異步請求,比如我們常用的百度翻譯,有時候不需要你點擊翻譯按鈕,左側寫完英文后,右側可以自動翻譯出結果,就是因為使用了異步調用的請求方式,如下圖:

對于爬蟲來說,分析請求服務器的接口異常重要,就拿百度翻譯為例,我們可以依次點擊這四個請求依次查看其請求內容,直接以 v2tranapi 網頁請求為例,先來看 Headers :

其次是 Preview :

Response :

還有 Cookies , timing ,此處詳細介紹了,自行了解即可。爬蟲必須掌握的就是對網頁的分析,而分析網頁的元素以及請求接口是學習爬蟲之前必要的知識。
PS:多說一句,對于 Cookies 的相關信息,不要隨意公布在網上給人看…!Cookies 涉及賬號密碼,會有安全問題,如果后續有機會,單獨開一篇來講下。
3. 控制臺(Console)
控制臺,類似 Pycharm 中的控制臺,編寫程序都需要用到控制臺,目的是為了便于調試,點擊如下,可以看到百度設置的招聘小彩蛋(各大廠都有…):

了解即可,前端開發人員用到的較多,這里不多介紹了,有需要自己可以搜索相關知識…
4. 源代碼(Source)
在源代碼(Source)頁面可以查看到當前網頁的所有源文件,如下圖:

在編寫前端頁面時,可以通過此項進行代碼的調試,了解即可。
總結
本篇粗略的介紹了一下學習爬蟲之前必須要掌握的技能,有些地方沒有寫的非常詳細,筆者認為,F12 必會的就是 網頁元素的選擇 與 網絡中分析接口 ,這兩個是重點。
至于了解的知識點,大家可以自行百度,網上有許多優秀詳細的文章,比筆者這里介紹的要詳細得多,本篇目的只有一個,認準學習的目標,突出重點去學習。再次強調,瀏覽器開發者工具 F12 熟練掌握 網頁元素 和 網絡分析,后續學習爬蟲才會懂得原理。