建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
使用 Headless Chrome 進(jìn)行頁(yè)面渲染 從屬于筆者的 Web 開(kāi)發(fā)基礎(chǔ)與工程實(shí)踐系列文章，主要介紹了使用 Node.js 利用 Chrome Remote Protocol 遠(yuǎn)程控制 Headless Chrome 渲染界面的基礎(chǔ)用法。本文涉及的參考與引用資料統(tǒng)一列舉在這里。
創(chuàng)新互聯(lián)公司從2013年開(kāi)始，先為寧遠(yuǎn)等服務(wù)建站，寧遠(yuǎn)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為寧遠(yuǎn)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
近日筆者在為 declarative-crawler 編寫(xiě)動(dòng)態(tài)頁(yè)面的蜘蛛，即在使用 declarative-crawler 爬取知乎美圖 一文中介紹的 HeadlessChromeSpider 時(shí)，需要選擇某個(gè)無(wú)界面瀏覽器以執(zhí)行 JavaScript 代碼來(lái)動(dòng)態(tài)生成頁(yè)面。之前筆者往往是使用 PhantomJS 或者 Selenium 執(zhí)行動(dòng)態(tài)頁(yè)面渲染，而在 Chrome 59 之后 Chrome 提供了 Headless 模式，其允許在命令行中使用 Chromium 以及 Blink 渲染引擎提供的完整的現(xiàn)代 Web 平臺(tái)特性。需要注意的是，Headless Chrome 仍然存在一定的局限，相較于 Nightmare 或 Phantom 這樣的工具， Chrome 的遠(yuǎn)程接口仍然無(wú)法提供較好的開(kāi)發(fā)者體驗(yàn)。我們?cè)谙挛慕榻B的代碼示例中也會(huì)發(fā)現(xiàn)，目前我們?nèi)孕枰罅康哪０宕a進(jìn)行控制。
安裝與啟動(dòng)
在 Chrome 安裝完畢后我們可以利用其包體內(nèi)自帶的命令行工具啟動(dòng)：
- $ chrome --headless --remote-debugging-port=9222 https://chromium.org
筆者為了部署方便，使用 Docker 鏡像來(lái)進(jìn)行快速部署，如果你本地存在 Docker 環(huán)境，可以使用如下命令快速啟動(dòng)：
- docker run -d -p 9222:9222 justinribeiro/chrome-headless
如果是在 Mac 下本地使用的話我們還可以創(chuàng)建命令別名：
- alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
- alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"
- alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium"
如果是在 Ubuntu 環(huán)境下我們可以使用 deb 進(jìn)行安裝：
- # Install Google Chrome
- # https://askubuntu.com/questions/79280/how-to-install-chrome-browser-properly-via-command-line
- sudo apt-get install libxss1 libappindicator1 libindicator7
- wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
- sudo dpkg -i google-chrome*.deb # Might show "errors", fixed by next line
- sudo apt-get install -f
chrome 命令行也支持豐富的命令行參數(shù)，--dump-dom 參數(shù)可以將 document.body.innerHTML 打印到標(biāo)準(zhǔn)輸出中：
- chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/
而 --print-to-pdf 標(biāo)識(shí)則會(huì)將網(wǎng)頁(yè)輸出位 PDF：
- chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
初次之外，我們也可以使用 --screenshot 參數(shù)來(lái)獲取頁(yè)面截圖：
- chrome --headless --disable-gpu --screenshot https://www.chromestatus.com/
- # Size of a standard letterhead.
- chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/
- # Nexus 5x
- chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.chromestatus.com/
如果我們需要更復(fù)雜的截圖策略，譬如進(jìn)行完整頁(yè)面截圖則需要利用代碼進(jìn)行遠(yuǎn)程控制。
代碼控制
啟動(dòng)
在上文中我們介紹了如何利用命令行來(lái)手動(dòng)啟動(dòng) Chrome，這里我們嘗試使用 Node.js 來(lái)啟動(dòng) Chrome，最簡(jiǎn)單的方式就是使用 child_process 來(lái)啟動(dòng)：
- const exec = require('child_process').exec;
- function launchHeadlessChrome(url, callback) {
- // Assuming MacOSx.
- const CHROME = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome';
- exec(`${CHROME} --headless --disable-gpu --remote-debugging-port=9222 ${url}`, callback);
- }
- launchHeadlessChrome('https://www.chromestatus.com', (err, stdout, stderr) => {
- ...
- });
遠(yuǎn)程控制
這里我們使用 chrome-remote-interface 來(lái)遠(yuǎn)程控制 Chrome ，實(shí)際上 chrome-remote-interface 是對(duì)于 Chrome DevTools Protocol 的遠(yuǎn)程封裝，我們可以參考協(xié)議文檔了解詳細(xì)的功能與參數(shù)。使用 npm 安裝完畢之后，我們可以用如下代碼片進(jìn)行簡(jiǎn)單控制：
- const CDP = require('chrome-remote-interface');
- CDP((client) => {
- // extract domains
- const {Network, Page} = client;
- // setup handlers
- Network.requestWillBeSent((params) => {
- console.log(params.request.url);
- });
- Page.loadEventFired(() => {
- client.close();
- });
- // enable events then start!
- Promise.all([
- Network.enable(),
- Page.enable()
- ]).then(() => {
- return Page.navigate({url: 'https://github.com'});
- }).catch((err) => {
- console.error(err);
- client.close();
- });
- }).on('error', (err) => {
- // cannot connect to the remote endpoint
- console.error(err);
- });
我們也可以使用 chrome-remote-interface 提供的命令行功能，譬如我們可以在命令行中訪問(wèn)某個(gè)界面并且記錄所有的網(wǎng)絡(luò)請(qǐng)求：
- $ chrome-remote-interface inspect
- >>> Network.enable()
- { result: {} }
- >>> Network.requestWillBeSent(params => params.request.url)
- { 'Network.requestWillBeSent': 'params => params.request.url' }
- >>> Page.navigate({url: 'https://www.wikipedia.org'})
- { 'Network.requestWillBeSent': 'https://www.wikipedia.org/' }
- { result: { frameId: '5530.1' } }
- { 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia_wordmark.png' }
- { 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png' }
- { 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/js/index-3b68787aa6.js' }
- { 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/js/gt-ie9-c84bf66d33.js' }
- { 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-bookshelf_icons.png?16ed124e8ca7c5ce9d463e8f99b2064427366360' }
- { 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-project-logos.png?9afc01c5efe0a8fb6512c776955e2ad3eb48fbca' }
我們也可以直接查看內(nèi)置的接口文檔：
- >>> Page.navigate
- { [Function]
- category: 'command',
- parameters: { url: { type: 'string', description: 'URL to navigate the page to.' } },
- returns:
- [ { name: 'frameId',
- '$ref': 'FrameId',
- hidden: true,
- description: 'Frame id that will be navigated.' } ],
- description: 'Navigates current page to the given URL.',
- handlers: [ 'browser', 'renderer' ] }>>> Page.navigate
- { [Function]
- category: 'command',
- parameters: { url: { type: 'string', description: 'URL to navigate the page to.' } },
- returns:
- [ { name: 'frameId',
- '$ref': 'FrameId',
- hidden: true,
- description: 'Frame id that will be navigated.' } ],
- description: 'Navigates current page to the given URL.',
- handlers: [ 'browser', 'renderer' ] }
我們?cè)谏衔闹羞€提到需要以代碼控制瀏覽器進(jìn)行完整頁(yè)面截圖，這里需要利用 Emulation 模塊控制頁(yè)面視口縮放：
- const CDP = require('chrome-remote-interface');
- const argv = require('minimist')(process.argv.slice(2));
- const file = require('fs');
- // CLI Args
- const url = argv.url || 'https://www.google.com';
- const format = argv.format === 'jpeg' ? 'jpeg' : 'png';
- const viewportWidth = argv.viewportWidth || 1440;
- const viewportHeight = argv.viewportHeight || 900;
- const delay = argv.delay || 0;
- const userAgent = argv.userAgent;
- const fullPage = argv.full;
- // Start the Chrome Debugging Protocol
- CDP(async function(client) {
- // Extract used DevTools domains.
- const {DOM, Emulation, Network, Page, Runtime} = client;
- // Enable events on domains we are interested in.
- await Page.enable();
- await DOM.enable();
- await Network.enable();
- // If user agent override was specified, pass to Network domain
- if (userAgent) {
- await Network.setUserAgentOverride({userAgent});
- }
- // Set up viewport resolution, etc.
- const deviceMetrics = {
- width: viewportWidth,
- height: viewportHeight,
- deviceScaleFactor: 0,
- mobile: false,
- fitWindow: false,
- };
- await Emulation.setDeviceMetricsOverride(deviceMetrics);
- await Emulation.setVisibleSize({width: viewportWidth, height: viewportHeight});
- // Navigate to target page
- await Page.navigate({url});
- // Wait for page load event to take screenshot
- Page.loadEventFired(async () => {
- // If the `full` CLI option was passed, we need to measure the height of
- // the rendered page and use Emulation.setVisibleSize
- if (fullPage) {
- const {root: {nodeId: documentNodeId}} = await DOM.getDocument();
- const {nodeId: bodyNodeId} = await DOM.querySelector({
- selector: 'body',
- nodeId: documentNodeId,
- });
- const {model: {height}} = await DOM.getBoxModel({nodeId: bodyNodeId});
- await Emulation.setVisibleSize({width: viewportWidth, height: height});
- // This forceViewport call ensures that content outside the viewport is
- // rendered, otherwise it shows up as grey. Possibly a bug?
- await Emulation.forceViewport({x: 0, y: 0, scale: 1});
- }
- setTimeout(async function() {
- const screenshot = await Page.captureScreenshot({format});
- const buffer = new Buffer(screenshot.data, 'base64');
- file.writeFile('output.png', buffer, 'base64', function(err) {
- if (err) {
- console.error(err);
- } else {
- console.log('Screenshot saved');
- }
- client.close();
- });
- }, delay);
- });
- }).on('error', err => {
- console.error('Cannot connect to browser:', err);
- });
【本文是專(zhuān)欄作者“張梓雄 ”的原創(chuàng)文章，如需轉(zhuǎn)載請(qǐng)通過(guò)與作者聯(lián)系】
戳這里，看該作者更多好文
名稱(chēng)欄目：使用Headless Chrome進(jìn)行頁(yè)面渲染
本文URL：http://m.5511xx.com/article/djjddgi.html
