从 chrome devtools protocol 再看 Ch

之前简单的描述了Chrome Devtools的一些使用技巧，不过慢慢就会想想Chrome Devtools原理是什么呢 ？

一个简单的例子，我们用谷歌控制台去调试页面样式，页面可以根据调整的样式动态去变化，这是为啥？

这一切都可以 **[chrome devtools protocol](https://chromedevtools.github.io/devtools-protocol//)** 来解释。 Chrome DevTools Protocol  允许使用工具来检测、检查、调试和分析 Chromium、Chrome 和其他基于 Blink 的浏览器。 许多现有项目目前使用该协议。并且Chrome DevTools 使用此协议。因为功能比较多，所以分了多个域（一般复杂的东西都会分域），包括 DOM、Debugger、Network、Page 等等，分别放不同的调试协议。

新版 chrome可以打开设置中的实验特性的 Protocol Monitor 面板。

选择之后可以查看一下下，如果没有点击右侧三个点 然后里面有More tools进行添加。

一起⭕猜⭕一下上面css调试的整个过程。

1. 修改了font-size的属性
2. 3、4、5 等等发送了修改的请求
3. 2是最后修改的300px，因为动态监听了这个所以发送了很多次 setStyleTexts 方法。
4. 对照着 协议api可以了解到。

5. 本质上就是在修改属性的时候 其实向 浏览器调试控制台发送request ，浏览器内部进行处理 并且给出状态。

   
   

这个仅仅是冰山一角的一角，可能会问了解这个有啥作用呢？

1. 一方面 往高级点方向说就是 可以实现 CDP 服务端，来对接 chrome devtools 的调试功能，调试不同的目标，也可以通过 sdk 的 api 来和 CDP 服务端对接，拿到数据，实现调试的功能。比如单独实现 DOM 编辑器、Network 查看器、JS Debugger。
2. 另一方面 还是返璞归真一些、能够了解一些浏览器工作原理、了解DOM树、了解CSS的一些知识、了解到请求是什么构成的？等等等很多

我们一起来来实验下：

1. 打开谷歌浏览器所在的文件位置 然后终端打开 输入 ./chrome --remote-debugging-port=9222 --headless 可以看到调试模式已经打开。可以将远程页面连入了。

2. 为了更好的看到一些效果，我用本地页面来进行, 这里需要注意的是 需要进行安装一下chrome-remote-interface 提供了一些简单的api。

下面代码意思很明显，先是navigate到给定URL的当前页面、通过页面上captureScreenshot 方法 获取当前页面的截图。这个方法可以传入很多参数。

打开谷歌浏览器 输入 ``chrome://inspect/#devices` 发现有一个远程页面了。

const CDP = require('chrome-remote-interface')
const fs = require('fs')

async function cdpTest() {
    let client
    try {
        client = await CDP()
        const {Page, DOM, Debugger, Network, CSS, Log, Browser} = client

        await Page.enable()
        await Page.navigate({url: 'http://localhost:63342/chrome-debugger-test/test.html?_ijt=j6tk8fq253465uofikto2bsqjb'})

        const res = await Page.captureScreenshot()
        fs.writeFileSync('./screenshot.jpg', res.data, {
            encoding: 'base64'
        })

    } catch (err) {
        console.error(err)
    }
}

3. 通过这个协议继续查看一下页面中DOM元素 将这部分代码加入到上面代码的主体中。调试可以发现下面的整个文档的信息。等等，这是DOM树嘛？

然后找到其中一个DOM元素 通过getAttributes 获取属性查看一下。可以看到下面的信息。等等，怎么是数组的形式？
还有很多很多的api...

        // 启用 DOM 代理
        await DOM.enable()
        // 获取整个树结构
        const {root} = await DOM.getDocument({
            depth: -1
        });
        console.log(root)
        const result = await DOM.getAttributes({nodeId: 13});
        console.log(result)

4. 继续往下去看看 CSS 部分在获取CSS信息之前需要等待DOM代理开启。通过getComputedStyleForNode方法获取元素的计算过后的样式。然后看到了写的color 变成了RGB形式存储了。元素面板右侧里面有个Computed。是不是正好对应？

// 页面中 class container 设置了颜色
.container{
        color: #032dff;
 }

  await CSS.enable()
  const nodeCssInfo = await CSS.getComputedStyleForNode({nodeId: 13})

5. 继续看看网络方面，我在页面中引入了JQ 然后发送了一个请求。然后可以看到一些信息。

  await Network.enable();
   //网络  requestWillBeSent->当页面即将发送HTTP请求时触发。
   Network.requestWillBeSent((params) => {
            console.log(params.request.url)
   });

6. 还有很多好玩的api。快来参与参与。