puppeteer调试

调试

puppeteer并不是只有headless模式，打开puppeteer的ui界面：puppeteer.launch({headless: false),再放慢puppeteer执行的动作puppeteer.launch({headless: false, slowMo: 250})，就可以轻松调试。
‘打call？’ page.on('console', msg => console.log('PAGE LOG:', msg.text())); 事件监听轻松打出页面的log。

await page.waitFor(2000);

请求拦截/模拟请求

puppeteer比testcafe好的一点就是支持请求拦截，记得当初用testcafe测试请求是否被发出用了很多黑科技，提过issue。。

const puppeteer = require('puppeteer');
 
puppeteer.launch({headless: false, slowMo: 250}).then(async browser => {
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
page.on('request', interceptedRequest => {
if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))
interceptedRequest.abort();
else
interceptedRequest.continue();
});
await page.goto('https://open.toutiao.com');// await browser.close();});

提供了request，response事件，可以拦截请求，首先需要打开这个开关await page.setRequestInterception(true);。

这里的例子就是停掉所有的png和jpg请求。

拦截能做的东西有很多，比如一些爬虫可以通过拦截请求捕获一些数据，来处理一些东西。

修改环境

puppeteer可以通过page.setViewport,page.setUserAgent来修改访问的环境。

await page.setViewport({
 1920,
height: 1080});

await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36');

puppeteer/DeviceDescriptors还给我们封装好了一些环境，比如：

const puppeteer = require('puppeteer');const devices = require('puppeteer/DeviceDescriptors');const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.emulate(iPhone); // emulate的配置有Viewport，UserAgent等等。之前的setUserAgent等方法是它的语法糖。
await page.goto('https://www.google.com');
// other actions...
await browser.close();});

性能测试

可以生成一个trace.json的文件，供chrome控制台解析，await page.metrics()还可以给出一些性能测试的数据。

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.tracing.start({path: 'trace.json'})
await page.goto('https://open.toutiao.com')
await page.tracing.stop()
const metrics = await page.metrics()
console.log(metrics)
await browser.close();})();// output{ Timestamp: 27888.820538,
Documents: 2,
Frames: 1,
JSEventListeners: 58,
Nodes: 171,
LayoutCount: 20,
RecalcStyleCount: 26,
LayoutDuration: 0.042335,
RecalcStyleDuration: 0.010091,
ScriptDuration: 0.124838,
TaskDuration: 0.000039,
JSHeapUsedSize: 6388448,
JSHeapTotalSize: 10334208 }