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…