Chrome Devtool Protocol 开发笔记

周末动笔写教程,越写越长暂时收不了笔;周日发现上一台 iMac 回收被坑了,显示器从烧屏变闪屏了,心情大坏,简直写不动了,哎……

Chrome Devtool Protocol(下面简称 CDP)是一个非常强大工具,简单来说,它可以揭开束缚 Chrome 的各种封印,从浏览器角度深入页面(及其它领域,包括 worker),完成一些平日里难以完成的操作。

我目前研究它主要是想优化我厂官网的首屏 CSS,顺便为将来 QA 插件的深入开发做准备。

不过 CDP 的文档、资料各种不全,Google 也没什么结果,所以我会把日常踩到的坑记到这里,以备回顾。

心得

  1. CDP 关系跟 Puppeteer 非常密切,最好直接使用 Puppeteer 学习开发
  2. 使用 domain 时最好先 {domain}.enable,不然可能报错类似:CSS agent was not enabled cdp
  3. 同上条类似,侦听 Page.domContentEventFired 事件时,如果没有先调用 Page.enable,那么就不会有任何事件触发,但是也不会报错,就留你一个人看着 console 思考人生
  4. 各种 {domain}.enable 需要在 .navigate 前调用,不然会报错。类似的还有不要在使用 CDP 的过程中调用 Puppeteer 自身的 API,不然也会出错。不知道是否通过多次 page.createCDPSession() 来解决。
  5. awaitawaitawait,千万注意用 await
  6. 浏览器渲染机制没有变,所以操作时仍要注意时机,比如采集 CSS rules 的时候,就要等渲染完成,也就是 Page.loadEventFired 触发之后
  7. 设置系统变量 DEBUG=*protocol 可以看到所有来回数据

遇到的问题

  1. Page.loadEventFired 不触发,问题不明,通过“心得7”可以看到事件信息收到了,但是没有触发

如果您觉得文章内容对您有用,不妨支持我创作更多有价值的分享:


已发布

分类

来自

评论

欢迎吐槽,共同进步

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据