使用Puppeteer進行數據抓取(五)——快速調試

在咱們使用chrome做爲爬蟲獲取網頁數據時，每每需以下幾步。

1. 打開chrome
2. 導航至目標頁面
3. 等待目標頁面加載完成
4. 解析目標頁面數據
5. 保存目標頁面數據
6. 關閉chrome

咱們實際的編碼每每集中在第4步，而且，在開發過程當中，解析網頁數據每每不是一步到位的，須要通過反覆屢次調試才行。若是每次調試都須要通過這一個過程就顯得效率太低。

此時，咱們但願有一種相似調試程序中的"附加到進程"相似的方法，沒必要每次都打開chrome，跳轉到目標頁面，直接進行第4步，解析現有頁面。本文這裏就介紹一個這樣的方法。

以遠程調試的方式啓動chrome：

"C:\Program Files (x86)\Google\Chrome\Application\Chrome.exe" --remote-debugging-port=9222 --user-data-dir=".\UserData"

手動跳轉到目標網頁。

 

獲取調試藉口

訪問http://127.0.0.1:9222/json/version能夠獲得以下信息

{
    "Browser": "Chrome/71.0.3578.98",
    "Protocol-Version": "1.3",
    "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36",
    "V8-Version": "7.1.302.31",
    "WebKit-Version": "537.36 (@15234034d19b85dcd9a03b164ae89d04145d8368)",
    "webSocketDebuggerUrl":     "ws://127.0.0.1:9222/devtools/browser/1b9f6012-6b9b-4450-a6a5-a0bbc8b54ee8"
}

其中的webSocketDebuggerUrl就是主動鏈接的調試接口。在實際運行過程當中，能夠經過axios庫來自動獲取這個地址：

const axios = require('axios');
async function get_debug_url() {
    var rsp = await axios.get('http://127.0.0.1:9222/json/version');
    return rsp.data.webSocketDebuggerUrl;
}

注：這個地址的獲取方式在不一樣的chrome版本中貌似有變化，我以前是在http://127.0.0.1:9222/json中獲取的，但在chrome71中貌似就不行了。具體能夠參看官方文檔devtools protocol 和 browser endpoint 的信息。

鏈接調試接口

利用puppeteer.connect(options)鏈接，得到的是一個browser對象，再利用browser.pages()獲取當前打開的page，直接操做page便可。

async function run() {
    var ws = await get_debug_url();
    console.log(ws);
    const browser = await puppeteer.connect({
        browserWSEndpoint: ws,
        defaultViewport: null
    });
    const pages = await browser.pages();
    const page = pages[0];
    await page.screenshot({ path: 'screen.png' });
    console.log("finished");
};

run();

究其本質，這裏和我文章使用CefSharp在.Net程序中嵌入Chrome瀏覽器（六）——調試中的遠程調試的原理是同樣的。這裏我雖然是用的puppeteer爲例，其它基於Chrome DevTools Protocol的工具應該也是同樣能夠用的。

參考文章：

• puppeteer.connect
• browser.wsEndpoint