在我們使用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版本中貌似有變化，我之前是在

連線除錯介面

利用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