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. await，await，await，千万注意用 await
6. 浏览器渲染机制没有变，所以操作时仍要注意时机，比如采集 CSS rules 的时候，就要等渲染完成，也就是 Page.loadEventFired 触发之后
7. 设置系统变量 DEBUG=*protocol 可以看到所有来回数据

遇到的问题

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