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…