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({
width: 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 }