?

Web Scraper 官網：https://webscraper.io/

有關webscraper的問題，看這個就夠了（建議收藏）：

• https://zhuanlan.zhihu.com/p/34104808
• https://blog.csdn.net/biggbang/article/details/86251526

web scraper 入門到精通之路：https://zhuanlan.zhihu.com/p/89551741

Web Scraper 系列教程：https://www.cnblogs.com/web-scraper/tag/web%20scraper/

?

?

Web Scraper 高級用法

?

• 如何導入別人已經寫好的 Web Scraper 爬蟲__06：https://www.cnblogs.com/web-scraper/p/import_export_sitemap.html
• 抓取多條內容__07：https://www.cnblogs.com/web-scraper/p/web_scraper_use_element_selector.html
• 翻頁抓取「點擊 更多按鈕 進行翻頁」__08：https://www.cnblogs.com/web-scraper/p/web_scraper_start_element_click.html
• 自動控制抓取數量 & Web Scraper 父子選擇器__09：https://www.cnblogs.com/web-scraper/p/web_scraper_jiqiao.html
• 翻頁抓取「滾動加載，瀑布流」類型網頁__10：https://www.cnblogs.com/web-scraper/p/web_scraper_element_scroll_down.html
• 抓取表格數據__11：https://www.cnblogs.com/web-scraper/p/web_scraper_table.html
• 翻頁抓取分頁器翻頁的網頁__12：https://www.cnblogs.com/web-scraper/p/web_scraper_element_click_once.html
• 抓取二級網面__13：https://www.cnblogs.com/web-scraper/p/web_scraper_detail_page.html
• 利用 Link 選擇器翻頁__14：https://www.cnblogs.com/web-scraper/p/web-scraper-fanye-link.html
• CSS 選擇器的使用__15：https://www.cnblogs.com/web-scraper/p/web-scraper-css.html
• 抓取屬性信息__16：https://www.cnblogs.com/web-scraper/p/web-scraper-element-attribute.html
• 利用正則表達式篩選文本信息__17：https://www.cnblogs.com/web-scraper/p/web-scraper-regex.html
• 使用 CouchDB 存儲數據__18：https://www.cnblogs.com/web-scraper/p/web-scraper-couchdb.html

?

?

1. 安裝 Chrome?和?Web Scraper

?

Windows 電腦的各大應用商店都有最新版的 Chrome 瀏覽器，或者百度一下。(為了減少兼容性問題，最好安裝最新版本的 Chrome 瀏覽器)。

因為 Web Scraper 是 Chrome 瀏覽器插件，當然是首推使用 Chrome。但是限于國內的網絡環境，可能訪問 Chrome 插件應用商店不是很方便，如果第一條路走不通，可以嘗試第二條路，用 QQ 瀏覽器曲線救國（360 瀏覽器暫時不提供 Web Scraper 插件）。這兩個瀏覽器內核都是一樣的，只是界面不一樣。

Web Scraper?是一款?Chrome 瀏覽器插件，可以不用寫一行代碼進行數據采集。

Web Scraper優點：

門檻足夠低，只要你電腦上安裝了 Chrome 瀏覽器就可以用

永久免費，無付費功能，無需注冊

操作簡單，點幾次鼠標就能爬取網頁，真正意義上的 0 行代碼寫爬蟲

?

安裝 Web Scraper 插件

?

可以訪問外網的同學，直接訪問 "Chrome 網上應用店"，搜索 Web Scraper 下載安裝即可。

暫時無條件訪問外網，我們可以手動安裝插件曲線救國一下，當然和上面比會稍微麻煩一些：

首先，我們訪問? https://www.gugeapps.net/? 這個國內瀏覽器插件網站，搜索 Web Scraper，下載插件 (?https://www.gugeapps.net/webstore/search?key=Web+Scraper )，注意這時候插件不是直接安裝到瀏覽器上的，而是下載到了本地。

然后，我們在瀏覽器的的網址輸入框里輸入?chrome://extensions/?，這樣我們就可以打開瀏覽器的插件管理后臺：

(?下圖是?Chrome?裝完?Web Scraper?的截圖?)

?

MAC?和?Windows? 用戶：

• 如果你是?Mac 用戶，首先要把這個安裝包的后綴名?.crx?改為?.zip。再切到瀏覽器的插件管理后臺，打開右上角的開發者模式，把?Web Scraper.zip?這個文件拖進去，這樣就安裝好了。
• 如果你是?windows 用戶，你需要這樣做：
  ? ? ? ? 1. 把后綴為?.crx?的插件改為?.rar，然后解壓縮
  ? ? ? ? 2. 進入?chrome://extensions/?這個頁面，開啟開發者模式
  ? ? ? ? 3. 點擊 "加載已解壓的擴展程序"，選擇第一步中解壓的文件夾，正常情況下就安裝成功了。

到這里我們的 Chrome 瀏覽器就成功安裝好 Web Scraper 插件了。

注意：webscraper 的最新版本去除了 "Download image"?選項，也就是批量下載圖片的功能，最新版本現在只能抓取圖片鏈接。

解決方案有 2 種：

• 1. 批量抓取到圖片的鏈接，然后使用迅雷等下載工具批量下載。
• 2. 卸載掉最新的 webscraper，安裝老版本。鏈接:?https://pan.baidu.com/s/1GD6gxDWOaglCLAv0uc--yA 提取碼: geif

老版本依然是有 "Download image"?這個選項的。注意不要科學上網，否則 webscraper 可能會自動更新到最新版本。

?

?

2. 開發者模式

?

2.1 開啟開發者模式

這個功能《造謠成本有多低？一行代碼就可以截圖造假》中提到過，想從普通瀏覽模式切換到開發者模式，只要按?F12?就可以實現(QQ 瀏覽器?F12?被禁掉了)。Mac 電腦也可以用?option?+?command?+?I?打開，Win 電腦可以用?Ctrl?+?Shift?+?I?打開。

?

2.2 切換開發者后臺的位置

控制臺打開后，一般會在網頁的下方顯示，我們其實也可以切到網頁的右邊顯示，具體的操作是點擊后臺面板右側的???按鈕，然后修改顯示位置，具體操作如下動圖。

?

2.3?用電腦瀏覽器模擬手機瀏覽器

用電腦瀏覽器模擬手機瀏覽器是一個很實用的功能。因為現在是移動互聯網的時代了，大部分公司的網頁都是優先支持移動端，而且手機瀏覽器的數據結構更清晰，更利于我們抓取數據。開啟模擬手機也很簡單，只要點擊一下開啟開發者后臺左側的手機切換圖標，然后刷新就好了。

拿豆瓣這個網站演示一下。

?

?

3.?Web Scraper 初級用法 之 抓取豆瓣電影

?

有人之前可能學過一些爬蟲知識，總覺得這是個復雜的東西，什么 HTTP、HTML、IP 池，在這里我們都不考慮這些東西。一是小的數據量根本不需要考慮，二是這些亂七八糟的東西根本沒有說到爬蟲的本質。

爬蟲的本質是什么？其實就是找規律。

而且爬蟲的找規律難度，大部分都是小學三年級的數學題水平。

我們下面拿個例子說明一下，下圖歷史文章的一個截圖，我們可以很清晰的看到，每一條推文可以分為三大部分：標題、圖片和作者，我們只要找到這個規律，就可以批量的抓取這類數據。

好了，理論的地方我們講完了，下面我們開始進行實操。

但凡做爬蟲練手，第一個爬取的網站一般都是豆瓣電影 TOP 250，網址鏈接是：https://movie.douban.com/top250

第一次上手，我們爬取的內容盡量簡單，所以我們只爬取第一頁的電影標題。

瀏覽器按?F12?打開控制臺，并把控制臺放在網頁的下方，然后找到 Web Scraper 這個 Tab，點進去就來到了 Web Scraper 的控制頁面。

進入 Web Scraper 的控制頁面后，我們按照?Create new sitemap?->?Create Sitemap?的操作路徑，創建一個新的爬蟲，sitemap?是啥意思并不重要，你就當他是個爬蟲的別名就好了。

在接下來出現的輸入框里依次輸入爬蟲名和要爬取的鏈接。

爬蟲名可能會有字符類型的限制，我們看一下規則規避就好了，最后點擊?Create Sitemap?這個按鈕，創建我們的第一個爬蟲。

這時候會跳到一個新的操作面板，不要管別的，我們直接點擊?Add new selector?這個藍底白字的按鈕，顧名思義，創建一個選擇器，用來選擇我們想要抓取的元素。

這時候就要開始正式的數據抓取環節了！我們先觀察一下這個面板有些什么東西：

說明：

• 1. 首先有個 Id，這個就是給我們要爬取的內容標注一個 id，因為我們要抓取電影的名字，簡單起見就取個 name 吧；
• 2. 電影名字很明顯是一段文字，所以 Type 類型肯定是 Text，在這個爬蟲工具里，默認 Type 類型就是 Text，這次的爬取工作就不需要改動了；
• 3. 我們把多選按鈕 Multiple 勾選上，因為我們要抓的是批量的數據，不勾選的話只能抓取一個；
• 4. 最后我們點擊黃色圓圈里的 Select，開始在網頁上勾選電影名字；

當你把鼠標移動到網頁時，會發現網頁上出現了綠色的方塊兒，這些方塊就是網頁的構成元素，當我們點擊鼠標時，綠色的方塊兒就會變為紅色，表示這個元素被選中了：

這時候我們就可以進行我們的抓取工作了。

我們先選擇「肖生克的救贖」這個標題，然后再選擇「霸王別姬」這個標題（注意：想達到多選的效果，一定要手動選取兩個以上的內容）

選完這兩個標題后，向下拉動網頁，你就會發現所有的電影名字都被選中了：

拉動網頁檢查一遍，發現所有的電影標題都被選中后，我們就可以點擊?Done selecting!這個按鈕，表示選擇完畢；

點擊按鈕后你會發現下圖的紅框位置會出現了一些字符，一般出現這個就表示選取成功了：

我們點擊?Data preview?這個按鈕，就可以預覽我們的抓取效果了：

沒什么問題的話，關閉 Data Preview 彈窗，翻到面板的最下面，有個?Save selector?的藍色按鈕，點擊后我們會回退到上一個面板。

這時候你會發現多了一行數據，其實就是我們剛剛的操作內容被記錄下來了。

在頂部的 tab 欄，有一個?Sitemap top250?的 tab，這個就是我們剛剛創建的爬蟲。點擊它，再點擊下拉菜單里的?Scrape?按鈕，開始我們的數據抓取。

這時候你會跳到另一個面板，里面有兩個輸入框，先別管他們是什么，全部輸入 2000 就好了。

點擊?Start scraping?藍色按鈕后，會跳出一個新的網頁，Web Scraper?插件會在這里進行數據抓取：

一般彈出的網頁自動關閉就代表著數據抓取結束了，我們點擊面板上的?refresh?藍色按鈕，就可以看到我們抓取的數據了！

在這個預覽面板上，第一列是 web scraper 自動添加的編號，沒啥意義；第二列是抓取的鏈接，第三列就是我們抓取的數據了。

這個數據會存儲在我們的瀏覽器里，我們也可以點擊?Sitemap top250?下的?Export data as CSV，這樣就可以導出成?.csv?格式的數據，這種格式可以用 Excel 打開，我們可以用 Excel 做一些數據格式化的操作。

這里爬取了豆瓣電影TOP250 的第 1 頁數據（也就是排名最高的 25 部電影），

下面講解如何抓取所有的電影名。

?

?

4. 多頁爬取數據

?

https://www.cnblogs.com/web-scraper/p/web_scraper_douban_top250_movie.html

?

4.1 鏈接分析

我們先看看第一頁的豆瓣網址鏈接：

https://movie.douban.com/top250?start=0&filter=

https://movie.douban.com?這個很明顯就是個豆瓣的電影網址，沒啥好說的

top250?這個一看就是網頁的內容，豆瓣排名前 250 的電影，也沒啥好說的

??后面有個 start=0&filter=?，根據英語提示來看，好像是說篩選（filter），從 0 開始（start）

再看看第二頁的網址鏈接，前面都一樣，只有后面的參數變了，變成了?start=25，從 25 開始；

我們再看看第三頁的鏈接，參數變成了?start=50 ，從 50 開始；

分析 3 個鏈接我們很容易得出規律：

• start=0，表示從排名第 1 的電影算起，展示 1-25 的電影
• start=25，表示從排名第 26 的電影算起，展示 26-50 的電影
• start=50，表示從排名第 51 的電影算起，展示 51-75 的電影
• …...
• start=225，表示從排名第 226 的電影算起，展示 226-250 的電影

規律找到了就好辦了，只要技術提供支持就行。隨著深入學習，你會發現 Web Scraper 的操作并不是難點，最需要思考的其實還是這個找規律。

?

4.2 Web Scraper 控制鏈接參數翻頁

Web Scraper 針對這種通過超鏈接數字分頁獲取分頁數據的網頁，提供了非常便捷的操作，那就是范圍指定器。

比如說你想抓取的網頁鏈接是這樣的：

• http://example.com/page/1
• http://example.com/page/2
• http://example.com/page/3

你就可以寫成?http://example.com/page/[1-3]，把鏈接改成這樣，Web Scraper 就會自動抓取這三個網頁的內容。

當然，你也可以寫成?http://example.com/page/[1-100]，這樣就可以抓取前 100 個網頁。

那么像我們之前分析的豆瓣網頁呢？它不是從 1 到 100 遞增的，而是 0 -> 25 -> 50 -> 75 這樣每隔 25 跳的，這種怎么辦？

• http://example.com/page/0
• http://example.com/page/25
• http://example.com/page/50

其實也很簡單，這種情況可以用?[0-100:25]?表示，每隔 25 是一個網頁，100/25=4，爬取前 4 個網頁，放在豆瓣電影的情景下，我們只要把鏈接改成下面的樣子就行了；

https://movie.douban.com/top250?start=[0-225:25]&filter=

這樣 Web Scraper 就會抓取 TOP250 的所有網頁了。

?

4.3 抓取數據

解決了鏈接的問題，接下來就是如何在 Web Scraper 里修改鏈接了，很簡單，就點擊兩下鼠標：

1.點擊?Stiemaps，在新的面板里點擊 ID 為?top250?的這列數據：

2.進入新的面板后，找到?Stiemap top250?這個 Tab，點擊，再點擊下拉菜單里的?Edit metadata：

3.修改原來的網址，圖中的紅框是不同之處：

修改好了超鏈接，我們重新抓取網頁就好了。操作和上文一樣，我這里就簡單復述一下：

點擊?Sitemap top250?下拉菜單里的?Scrape?按鈕

新的操作面板的兩個輸入框都輸入 2000

點擊?Start scraping?藍色按鈕開始抓取數據

抓取結束后點擊面板上的?refresh?藍色按鈕，檢測我們抓取的數據

如果你操作到這里并抓取成功的話，你會發現數據是全部抓取下來了，但是順序都是亂的。

我們這里先不管順序問題，因為這個屬于數據清洗的內容了，我們現在的專題是數據抓取。先把相關的知識點講完，再攻克下一個知識點，才是更合理的學習方式。

?

?

?

總結

以上是生活随笔為你收集整理的Chrome 爬虫插件 Web Scraper的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。