iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
0
DevOps

Puppeteer系列 第 10

Puppeteer & devtools-protocol

介紹

前幾篇介紹 Puppeteer 的幾個運用以及一些 browser的API, 這次來看一下整個Puppeteer樣貌,也來看看如何使用devtools-protocol

這是 Puppeteer 可以操作的部分,這次看的是 devtools-protocol

https://ithelp.ithome.com.tw/upload/images/20171227/20103438suqSgDs3Ya.png

Chrome DevTools Protocol 一般可用除錯檢視也可以觀察一些變化在 , 開發者在Panel可以按下F12(windows),可以看到不同的panel(DOM,Debugger,Network等)。每個panel都定義了許多命令以及事件。命令和事件都是固定結構的序列化JSON Object。可以透過複寫原始 raw messages的方式進行debug。

https://ithelp.ithome.com.tw/upload/images/20171227/20103438Dem2y5hlUR.png

圖片中有上傳的icon點入就可以用 Puppeteer的 trace.json

這邊有更多 DevTools Protocol 的資源開發資訊 https://chromedevtools.github.io/devtools-protocol/

Puppeteer 就可以根據這個使用 Trace 來做性能分析

await page.tracing.start({path: 'trace.json'})
await page.goto('https://www.google.com')
await page.tracing.stop()

總結

Puppeteer 連 DevTools 都整合的很完善,如果要進一步對爬蟲校調速度就可以藉由Trace來觀察與校調


上一篇
Puppeteer & Jest
下一篇
Puppeteer & Page API
系列文
Puppeteer30

2 則留言

0
Wolke
iT邦新手 3 級 ‧ 2017-12-29 10:52:23

讚耶
爬別人的網站
還幫他做分析

0
Wolke
iT邦新手 3 級 ‧ 2017-12-29 10:52:25

讚耶
爬別人的網站
還幫他做分析

我要留言

立即登入留言