Headless browser learning

headless

學習骨架屏的時候又從新接觸到的東西，以前在自動化測試時也有接觸過，但隨着技術廣度的積累，愈加感到headless browser在平常開發中的重要性。

名詞

• devtools protocol: Chrome Devtools團隊維護的與chrome/chriomu控制傳輸的協議，大名鼎鼎的Devtools工具就是基於此協議的
• puppeteer：npm包，用devtools協議生成頁面，能夠完成頁面截圖，SSR等任務
• chrome-remote-interface：npm包，devtools protocol的nodejs版本封裝

puppeteer

裏面有一個puppeteer-core，若是有chrome的話，就只下個puppeteer-core就能夠了。

chromium安裝不了時，能夠試下， npm config set puppeteer_download_host npm.taobao.org/mirrors。 .npmrc裏面的格式是ini形式的，裏面的foo=bar也是環境變量

const puppeteer = require('puppeteer');
 
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
 
  await browser.close();
})();
複製代碼

---

• Devtools protocol: chromedevtools.github.io/devtools-pr…
• puppeteer: www.npmjs.com/package/pup…
• chrome-remote-interface: github.com/cyrus-and/c…